可拖拽，使用KineticJS沿着拱形路徑的可調整文本

Question

我已經使用KineticJS開始了一個項目，到目前爲止，除了沿着拱形（圓形）路徑的文本之外，我已經能夠完成我想要的任何事情。我需要的是一個大小可拖動的圓形文本，我需要能夠跟蹤對象。 TextPath對象不適用於我，但我已經能夠使用此示例中的代碼開始使用http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/

我已經能夠完成的是取得此代碼並移動圖層（使用滑塊控件）和調整屬性（字體，半徑，角度）以獲得我期待的效果。我想要做的是能夠創建多個圖層，拖動圖層，並通過使selectab.e跟上每個圖層。由於我是HTML 5（和KineticJS）的新手，並沒有完全理解圖層對象，所以我有幾個問題可以幫助我解決問題。 1.）我可以拖動圖層嗎？即使使圖層可拖動，我似乎無法完成該工作。 2.）圖層可以像組一樣使用，它可以具有大小，還是默認爲舞臺（畫布）對象的完整大小？

而且別人不得不問一個問題simular在這個網站，但已經很老了，並沒有解決方案：

How to make dragable texts with curve using Kinetic js in canvas?

任何想法或建議，將不勝感激。

Answer 1

1. 是的，你可以拖動圖層。但是您需要在圖層拖動之前在圖層中添加一個「透明圖像」矩形。就像這樣：

   var layer = new Kinetic.Layer({draggable: true}); 
   
   var bg = new Kinetic.Rect({ 
       width: stage.getWidth(), 
       height: stage.getHeight() 
   }); 
   
   layer.add(bg); 
   

2. 是層可用於像一組，但我會建議使用組來組，而不是對象層。圖層比組更昂貴，所以使用圖層&組，它使感。圖層&組都可以設置大小，我相信它們都默認爲包含在其中的對象的大小。

   有關更多信息，請參見本主題：What are the differences between group and layer in KineticJs

3. Textpath應該爲你的工作需要，但你需要學習如何使用SVG Path Data

這裏有一對夫婦的其他頁面可能對你有用：

使用錨來調整文本大小：Drag and zoom text with Kineticjs

選擇使用e.targetNode節點：http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

將&降&調整大小：http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/