2013-05-14 96 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對象然後應用旋轉來實現路徑的偏移量(如您的示例中的紅色文本)。