KonvaJS: Comment connecter deux formes avec une flèche?

Question

Je voudrais utiliser Konvajs faire ci-dessous les tâches:

1. dessiner deux groupes rectangle sur toile. Chaque groupe contient un rectangle, du texte et un cercle
2. Lorsque j'utilise la souris pour faire glisser le cercle, il dessine une flèche tout en faisant glisser.
3. Lorsque je laisse tomber la flèche dans un autre groupe, il arrête le dessin et relie les deux groupes, bord à bord

Quelque chose comme ceci:

Existe-t-il des méthodes natives qui prennent en charge les connexions entre les formes? Quelqu'un pourrait-il me montrer quelques exemples s'il vous plaît?

Answer 1

J'ai connecté Konva.Circles. Mais la logique des images sera également la même. S'il vous plaît trouver le 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);