如何用kineticjs沿Kinetic.TextPath居中文本

有沒有辦法在Kineticjs中使用Kinetic.TextPath沿着路徑居中文本。如何用kineticjs沿Kinetic.TextPath居中文本

如果沒有，是否有人知道解決方法？我已經探索了svg textpath選項，但不知道如何將這個svg轉換爲kineticjs。

我也嘗試過使用頭髮空間手動空間文本，但kineticjs似乎將字符轉換爲正常空間，例如。 text.setText(String.fromCharCode(8202))

2013-04-15 cugreen

我剛剛在這裏檢查了源代碼：https：//github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js並且API中沒有任何內容允許沿着路徑對文本進行居中。是否看到你已經嘗試了添加領先空間的不滿意方法。 KineticJS有一些**非常好的** getXY-length-on-path函數，您可以使用它自己做。路徑文本變得更加複雜，因爲您必須考慮角色的旋轉 - 根據曲線如何需要「K」旋轉，「K」會在路徑上佔用不同的寬度。不是一件容易的事情！ – markE

謝謝@ markE。你能告訴我哪些getXY-at-length-on-path函數可用嗎？ – cugreen

當然，我發佈了一個信息答案 - 主要是因爲材料的數量不適合評論。良好的編碼！ – markE

標準textpath沒有文字的中心沿

我這裏檢查的源代碼路徑：github.com/ericdrowell/KineticJS/blob/master/src/plugins/...並沒有什麼在API中允許文本沿着路徑居中。是否看到你已經嘗試了添加領先空間的不滿意方法。 KineticJS有一些非常好的getXY-at-length-on-path函數，你可以用它自己做。路徑文本變得更加複雜，因爲您必須考慮角色的旋轉 - 根據曲線如何需要「K」旋轉，「K」會在路徑上佔用不同的寬度。

看看它是如何在這裏現有textpath完成：https://github.com/ericdrowell/KineticJS/blob/master/src/plugins/TextPath.js

的findSegmentToFitCharacter功能（起始線177）是最有啓發性。

這些相關的功能可以被用來編寫一個做自己動手中心textpath

Kinetic.Path.getLineLength 
Kinetic.Path.getPointOnEllipticalArc 
Kinetic.Path.getPointOnCubicBezier 
Kinetic.Path.getPointOnQuadraticBezier

所以你必須做的是：

確定的中心XY路徑。
確定文本的中心（按寬度或字符計數）
從路徑的中心點向前繪製文本的後半部分。
從路徑的中心點向後繪製文本的前半部分（以相反順序）。

findSegmentToFitCharacter很好地展示瞭如何以適當的角度旋轉每個字符。

好的編碼！ ...如果你想分享你的成績，我會很感興趣。另外，每當我進入KineticJS源代碼時，我總是對它們的代碼印象深刻。

來源

2013-04-16 14:39:33 markE

謝謝@ markE，我之前從未擴展KineticJS，所以對此非常感興趣，謝謝。我爲自己http://jsfiddle.net/sEtzy/提出了一個可接受的解決方案，雖然可能可以改進。 – cugreen

+1非常不錯的擴展！你介意我是否也爲我的工具包抓取它？ – markE

沒有probs。去吧！ – cugreen

如何用kineticjs沿Kinetic.TextPath居中文本

回答

相關問題