KineticJS TextPath数据属性

Question

我正在尝试使用KineticJS获得弯曲的文本。

我的目标是：

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

我已经达成的目标：

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

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

我发现第一个值（Mxx.xx，xx.xx）是整个Path的偏移量，但我不明白以下值（cxx.xx，xx.xx和sxx.xx，xx） .xx）工作。

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

我真的很感激任何帮助。

Answer 1

您可能已经注意到，在Kinetic.TextPath中，您将拥有text和data等属性。在text中指定要在文本路径中显示的字符串，在data中，您可以定义将形成文本路径的SVG数据字符串。

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

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

• M = moveto
• L = lineto
• H =水平线
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q =二次Bézier曲线
• T =平滑二次Bézier曲线到
• A =椭圆弧
• Z = closepath

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

SVG路径示例：

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

KineticJS网站提供了一个TextPath example，您可以将其用作自定义文本路径的参考。