KineticJS TextPath數據屬性

Question

我想要使用KineticJS獲得彎曲的文本。

什麼我的目標是：

• 有無KineticJS對一個TextPath
• 中心創建弧形文字畫布文本
• 有一個字段至極更新弧形文字的onkeyup
• 有一個調整曲線半徑的可能性
• 由KineticJS製作的畫布應該隱藏，但創建一個可見的.png
• 保存在服務器

在.png文件我媒體鏈接已經達到了什麼：

• 有無KineticJS對一個TextPath創建彎曲文本帆布
• 中心的文本
• 有一個字段將更新曲線文字onkeyup
• 由KineticJS製成的畫布已隱藏，但會創建一個可見的.png
• 保存.png文件服務器

所以，我需要的是調整曲線半徑的可能性，這似乎很難，因爲我只是不知道Kinetic.TextPath的數據屬性如何工作。

我發現第一個值（Mxx.xx，xx.xx）是整個路徑的偏移量，但我不明白以下值（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 =水平了lineTo
• V =垂直了lineTo
• C = curveto
• S =平滑曲線至
• Q =二次Bézie ř曲線
• T =平滑二次貝塞爾curveto
• A =橢圓弧
• Z = closepath

後面的每個元素中的數字是該點的座標。

SVG路徑的例子：

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

KineticJS網站提供TextPath example，你可以作爲參考定製textpath使用你。