KonvaJS：矢印で2つの図形を接続するにはどうすればいいですか？

Question

私は、タスクの下に行うためにKonvajsを使用したい：

1. は、キャンバス上の2つの長方形のグループを描画します。各グループには長方形、テキスト、円が含まれています
2. マウスをドラッグして円からドラッグすると、ドラッグ中に矢印が描画されます。
3. 私は別のグループにある矢印をドロップすると、それは描画停止し、2つのグループは、このよう

何かエッジにエッジ接続します

は、接続をサポートする任意のネイティブな方法があります形の間？ 誰かが私にいくつかの例を教えてもらえますか？

Answer 1

私はKonva.Circlesを接続しました。しかし、画像のロジックも同じです。見つけてくださいplunkr

var width = window.innerWidth; 
    var height = window.innerHeight; 

    var stage = new Konva.Stage({ 
     container: 'container', 
     width: width, 
     height: height 
    }); 

    var layer = new Konva.Layer(); 

    var circle = new Konva.Circle({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 40, 
     fill: 'green', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true 
    }); 

    var circleA = new Konva.Circle({ 
     x: stage.getWidth()/5, 
     y: stage.getHeight()/5, 
     radius: 30, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 2, 
     draggable: true 
    }); 

    var arrow = new Konva.Arrow({ 
     points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()], 
     pointerLength: 10, 
     pointerWidth: 10, 
     fill: 'black', 
     stroke: 'black', 
     strokeWidth: 4 
    }); 

    function adjustPoint(e){ 
     var p=[circle.getX(), circle.getY(), circleA.getX(), circleA.getY()]; 
     arrow.setPoints(p); 
     layer.draw(); 
    } 

    circle.on('dragmove', adjustPoint); 

    circleA.on('dragmove', adjustPoint); 

    layer.add(circleA); 
    // add the shape to the layer 
    layer.add(circle); 
    layer.add(arrow); 

    // add the layer to the stage 
    stage.add(layer);