KineticJS：兩個形狀

Question

之間畫出箭頭，這樣，我想創建kineticjs的幫助有限狀態機，可視化/編輯，我有以下情形絆：

我有兩個「節點」，讓我們說在我的舞臺上可拖動的圓形對象（與標籤分組）。現在，我不想單擊一個圓，按住鼠標並移動它，並在兩個圖形之間添加一個連接（箭頭，爲了簡單起見）。

所以，如果有任何提示，我還沒有找到解決方案，這將是非常好的。

指定它：節點本身應保持可拖動狀態。我的想法是：添加一個黑色圓圈和一個半徑稍小的白色圓圈，將它們分組。然後在dragstart白色圓圈 - >拖動節點，在dragstart黑色圓圈 - >繪製箭頭。

問題是如何繪製一個箭頭從一個形狀開始，然後將鼠標指向它的目標（可以是另一個nodegroup =>與該組的連接或者stage的空白點=>打開一個疊加層，用戶選擇另一個節點來繪製或取消繪圖）。

我希望這有點清楚的理解。欲瞭解更多信息，請隨時問我。

最好的問候， 多米尼克

PS：行爲似乎是完全一樣的行爲lucidchart創建圖表時（點com）使用，所以也許你明白我想達到更好的看着他們這裏演示的內容： https://www.lucidchart.com/demo。

Answer 1

首先，爲了簡單起見，這裏是如何與你的鼠標和KineticJS繪製基本路線小提琴：http://jsfiddle.net/projeqht/fF3hh/

比方說，你已經在舞臺上的兩個圓，和你需要畫一條線連接它們。

我們可以使用e.targetNode選擇對每個事件（鼠標按下，鼠標鬆開）的節點，例如：

layer.on("mousedown", function (e) { 
    var nodeDown = e.targetNode; 
} 

layer.on("mouseup", function (e) { 
    var nodeUp = e.targetNode; 
} 

我們需要檢查的nodeDown父是Kinetic.Group 或別的東西。

1. 如果目標節點nodeDown有Kinetic.Group的父母，我們可以用這個組來存儲新行，第二目標節點nodeUp。
2. 如果目標節點nodeUp沒有家長的Kinetic.Group，我們需要查看nodeUp是否有家長組。如果nodeUp有一個父母的Kinetic.Group，那麼我們可以使用該組來存儲新行，並且第一個目標節點爲nodeDown。
3. 如果nodeDown或nodeUp都沒有父母組，那麼我們需要爲他們創建一個新組，並將所有3個形狀（2個圓圈和一行）添加到該新組中。

使用本教程學習如何從1組移動形狀到另一個：http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/

另外，如果你從一個組移動到另一個形狀，你可能要remove()或destroy()額外的組，如果它不再需要。

繪製線條時，必須禁用拖動形狀，以便用鼠標拖動和繪製。你可以通過做一些與此類似：

function stopDrag() { 
    for (var i=0; i<layer.children.length; i++) { 
    layer.children[i].setDraggable(false); 
    } 
} 

function startDrag() { 
    for (var i=0; i<layer.children.length; i++) { 
     layer.children[i].setDraggable(true); 
    } 
} 

這將使層拖動和undraggable的所有孩子，但你可能想通過比選layer.children更具體的限制。我喜歡在這裏使用的一個很好的技巧是將所有可拖動的組命名爲「draggable_shapes」，然後使用var draggableArray = stage.get('.draggable_shapes')選擇允許拖動的所有組，然後您可以循環訪問該數組並且setDraggable()。

另一點需要注意的是，Line的X和Y座標計算起來有點棘手，這取決於它是否具有Group作爲父層或Layer。如果線是分組的，線的座標將相對於組的位置，否則線的座標將相對於階段（左上角）。

這會讓你開始連接兩條不同的圓圈。如果你想讓線條只連接在圓圈的外緣上，那麼你需要做座標邏輯。

也許你可能想在每個圓圈後面添加一個透明的矩形（屬性opacity: 0），以便在帶有矩形的mousedown上，您將調用drawLine()開始繪製一條線。否則，如果用戶點擊該圈子，則會拖動該組。至少它與lucid圖表應用程序具有相似的功能。

自定義命中功能（http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/）可能是一個更乾淨的方式來做到這一點，但我不是100％使用自定義命中功能，別人可能會更好。

讓我知道你是否需要進一步的幫助。祝你好運！