KineticJS TextPath数据属性

Question

我正在尝试使用KineticJS获得一个曲线文本。

我的目标是：

• 让KineticJS在TextPath上创建带有弯曲文本的画布
• 以文本为中心
• 有一个字段来更新键盘上的曲线文本。
• 有可能调整曲线的半径
• 由KineticJS制作的画布应该是隐藏的，但是创建一个可见的.png
• 将.png文件保存在服务器上

我已经达到的目标是：

• 让KineticJS在TextPath上创建带有弯曲文本的画布
• 以文本为中心
• 有一个字段来更新键盘上的曲线文本。
• 由KineticJS制作的画布是隐藏的，但是创建了一个可见的.png。
• 将.png文件保存在服务器上

所以，我所需要的只是调整曲线半径的可能性，这看起来相当困难，因为我只是不知道Kinetic.TextPath的数据属性是如何工作的。

我发现第一个值(Mxx.xx，xx.xx)是整个路径的偏移量，但我不明白下面的值(cxx.xx、xx.xx和sxx.xx、xx.xx)是如何工作的。

我昨天开始在网上寻找解释，但没有发现任何有用的东西。

我真的很感激任何帮助。

Answer 1

正如您可能注意到的，在Kinetic.TextPath中您将拥有一些属性，如text和data。在text中，您可以指定要显示在textpath中的字符串，而在data中，您可以定义一个SVG数据字符串，该字符串将形成文本路径。

SVG数据字符串可以包含一些元素，如: M，L，H，V，C，S，Q，T，A和Z。

W3schools解释了其中的每一个元素：

• M=移动
• L= lineto
• H=水平线
• V=垂直线
• C=曲线
• S=光滑曲线
• Q=二次Bézier曲线
• T=光滑二次Bézier曲线
• A=椭圆弧
• Z=闭合路径

每个元素后面的数字是点的坐标。

SVG路径示例：

<path d="M150 0 L75 200 L225 200 Z" />

KineticJS网站提供了一个textpath 示例，您可以使用它作为自定义文本路径的参考。