2013-05-14 116 views
3

使用paper.js可以容易地沿着贝塞尔曲线绘制文本吗?在paper.js中沿着bezier曲线绘制文本

我知道可以将文本附加到行路径然后旋转它,但我特别感兴趣的是沿曲线绘制文本。 喜欢的东西http://www.w3.org/TR/SVG11/images/text/toap02.svg

我明白这一点可以通过打印文本由字母一个字母对应适用于每一个项目旋转来实现,但我很感兴趣,更简单的方法在paper.js实现这一

回答

4

我们避风港”在Paper.js中沿路径实现文本。目前,文本支持相当简单,但一旦我们推出了1.0版本的库,这将有望改变。

+0

谢谢你澄清这一点! – 2013-05-14 08:11:52

+1

这方面的任何更新? – Shouvik 2015-05-12 11:30:58

+0

有关paperjs中正确文本支持的更新吗?我一直在等待很长时间。 – Raha 2017-08-12 05:04:54

9

如前面的回答中所述,PaperJS不提供此功能。但你可以用很少的努力达到效果。

这里是如何进行的:

  1. 得到偏移文本中的每个字形的x中心。这可以通过使用子字符串的PointText的宽度直到字形。
  2. 找到想要文本对齐的路径上的偏移点。
  3. 将单个中心字形放在刚找到的点上。通过路径的切线角度旋转glph。

下面是纸素描:Align Text to Path Sketch

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

enter image description here

您可以将沿y轴的字形PointText对象然后应用旋转来实现路径的偏移量(如您的示例中的红色文本)。