将opentype转移到paper.js,贝塞尔曲线问题

时间:2019-05-07 00:06:31

标签: javascript paperjs opentype

我正在尝试将字体从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"

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

任何人有什么想法吗?

1 个答案:

答案 0 :(得分:0)

Segment.handleInSegment.handleOut是相对于锚点的坐标。确保为手柄指定相对坐标,而不是绝对坐标。

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