KonvaJS: come connettere due forme con una freccia?

Question

Vorrei utilizzare Konvajs fare sotto compiti:

1. disegnare due gruppi rettangolo su tela. Ogni gruppo contiene un rettangolo, un testo e un cerchio
2. Quando uso il mouse per trascinare dal cerchio, disegna una freccia durante il trascinamento.
3. Quando lascio cadere la freccia in un altro gruppo, si smette di disegnare e collega i due gruppi bordo a bordo

Qualcosa di simile a questo:

Esistono metodi nativi che supportano le connessioni tra le forme? Qualcuno potrebbe mostrarmi qualche esempio, per favore?

Answer 1

Ho collegato Konva.Circles. Ma la logica per le immagini sarà anche la stessa. Si prega di trovare il 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);