KonvaJS: Wie verbinde ich zwei Formen mit einem Pfeil?

Question

Ich möchte Konvajs verwenden unten Aufgaben:

1. auf Leinwand zwei Rechteck Gruppen zeichnen. Jede Gruppe enthält ein Rechteck, einen Text und einen Kreis.
2. Wenn ich mit der Maus aus dem Kreis ziehe, wird beim Ziehen ein Pfeil gezeichnet.
3. Wenn ich den Pfeil in eine andere Gruppe fallen, ist es nicht mehr zeichnen und verbindet die beiden Gruppen

Etwas Ähnliches Rand an Rand:

es irgendwelche nativen Methoden, die Verbindungen unterstützen zwischen Formen? Könnte mir jemand bitte einige Beispiele zeigen?

Answer 1

Ich habe Konva.Circles verbunden. Aber die Logik für Bilder wird auch dieselbe sein. Finden Sie die 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);