时间戳

首页 > 解决方案 > 将opentype转入paper.js，贝塞尔曲线问题

javascript - 将opentype转入paper.js，贝塞尔曲线问题

问题描述

我正在尝试将字体从 opentype 传输到 paper.js 路径对象。我正在使用 opentype.js 从信中获取要点，然后尝试从这些要点中创建新的纸张路径。

听起来很简单，但不知何故我无法计算出这条曲线。我正在尝试通过示例和 paper.js 的参考来了解如何做到这一点。但我找不到它。

从 opentype.js 我得到这样的路径：

{type: "C", x: 56.3, x1: 58.4, x2: 56.3, y: 111.9, y1: 90, y2: 97.80000000000001}

（这里 x/y 是基本点，x1/y1 和 x2/y2 是其相关的点处理程序。）

现在我尝试将其放入 paper.js 路径中：

var segments = [];

    segments.push(new Segment(
        new Point(119,111.30000000000001)
        ));
    segments.push(new Segment(
        new Point(119,284.1)
        ));
    segments.push(new Segment(
        new Point(139.7,302.7),
        new Point(119,300),
        new Point(125.89999999999999,302.7)
        ));
    segments.push(new Segment(
        new Point(161,284.1),
        new Point(150.2,302.7),
        new Point(161,300.3)
        ));

        var path = new Path(segments);
        path.strokeColor = "black"

所有非弯曲路径都是正确的。但处理程序显示没有逻辑位置......

有人有什么想法吗？

标签： javascriptpaperjsopentype

解决方案

Segment.handleIn和Segment.handleOut是相对于锚点的坐标。确保为手柄提供相对坐标，而不是绝对坐标。

一个简单的解决方案是使用 OpenType.js 将字体转换为 SVG width Path.toSVG(decimalPlaces)，然后将其导入到 paper.js 中importSVG(svg[, options])。

推荐阅读