Canvas KineticJS文本路径数据属性

我正在尝试使用KineticJS获取曲线文本

我的目标是：

• 让KineticJS在文本路径上创建带有曲线文本的画布
• 将文本居中
• 有一个字段，用于更新曲线文本onkeyup
• 可以调整曲线的半径
• KineticJS制作的画布应该隐藏，但创建一个可见的.png
• 在服务器上保存.png文件

我已经达到的目标是：

• 让KineticJS在文本路径上创建带有曲线文本的画布
• 将文本居中
• 有一个字段，用于更新曲线文本onkeyup
• KineticJS制作的画布是隐藏的，但会创建一个可见的.png
• 在服务器上保存.png文件

所以，我所需要的是调整曲线半径的可能性，这似乎很难，因为我不知道Kinetic.TextPath中的数据属性是如何工作的

我计算出第一个值（Mxx.xx，xx.xx）是整个路径的偏移量，但我不明白以下值（cxx.xx，xx.xx和sxx.xx，xx.xx）是如何工作的

我昨天开始在网上搜索解释，但没有找到任何有用的东西

---

我真的非常感谢任何帮助。

正如您可能注意到的，在

动能.TextPath

中，您将拥有一些属性，如

文本

和

数据

。在

text

中，指定要在textpath中显示的字符串，在

data

中，可以定义一个SVG数据字符串，该字符串将塑造您的textpath

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

解释这些元素中的每一个：

• 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，您可以将其用作自定义TextPath的参考