javascript - 在 paper.js 中沿贝塞尔曲线绘制文本

Question

是否可以使用 paper.js 沿着贝塞尔曲线轻松绘制文本？ ？

我知道可以将文本附加到直线路径然后旋转它，但我对沿曲线绘制文本特别感兴趣。类似于 http://www.w3.org/TR/SVG11/images/text/toap02.svg

我知道这可以通过逐个字母打印文本并对每个项目应用相应的旋转来实现，但我对在 paper.js 中实现此目的的更简单方法感兴趣

Answer 1

如前一个答案所述，PaperJS 不提供开箱即用的此功能。但是你可以用很少的努力达到效果。

下面是如何进行:

1. 获取文本中每个字形的 x 中心偏移量。这可以通过将 PointText 的宽度用于子字符串直到字形来完成。
2. 在您希望文本对齐的路径上找到偏移点。
3. 将单个居中字形放在刚刚找到的点上。按路径的切 Angular 旋转 glph。

这是纸草图:Align Text to Path Sketch

这是一个简单测试的结果:

您可以在应用旋转之前沿 y 轴移动字形的 PointText 对象，以实现与路径的偏移(如示例中的红色文本)。