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

Posted 2023-03-15

【中文标题】将opentype转入paper.js，贝塞尔曲线问题

【英文标题】：transfer opentype to paper.js, bézier curve problem

【发布时间】：2019-09-24 14:23:27

【问题描述】：

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

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

有人有什么想法吗？

【问题讨论】：

路径是documented well enough，您显示的是curveTo 指令，从“无论我们在哪里”到“x/y”，超过两个控制点x1/y1 和x2 /y2。鉴于此，我不知道您要使用其他 sn-p 代码显示什么：它根本没有显示您如何尝试绘制它，它只是显示显然不是来自硬编码的值字体？

@Mike'Pomax'Kamermans 感谢您的回答。是的，我知道上面不是一封信，它只是我尝试制作路径的一个示例。所以我在这里上传了我的草图（kajetansom.ch/opentype）以便更好地理解。在示例中，我仅使用 paper.js 进行绘制，我仅使用 opentype.js 从字体中获取点。 halder 点似乎是正确的。 （我用红色和蓝色的圆圈和线条标记了它们）。但是，如果我尝试在 paper.js 中使用此句柄，它不会正确使用它们，正如您在蓝色处理程序上看到的那样。希望这能更清楚地描述我的问题。

【参考方案1】：

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

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

【讨论】：

谢谢！它与 SVG 解决方法完美配合 :) 只是为了澄清，我想知道如何从绝对坐标中获取手柄的相对坐标。有办法吗？

当然，要获得相对坐标，只需将绝对值（手柄点的绝对位置）减去锚点位置即可。这将为您提供一个从锚点到手柄点的向量。

谢谢，试试看！ :)