KonvaJS: How to connect two shapes with an arrow?

Question

I would like to use Konvajs to do below tasks:

1. draw two rectangle groups on canvas. Each group contains a rectangle, text, and a circle
2. When I use the mouse to drag from the circle, it draws an arrow while dragging.
3. When I drop the arrow into another group, it stops drawing and connects the two groups edge to edge

Something like this:

Are there any native methods that support connections between shapes? Could anyone show me some examples please?

Manofwar

Related demo: konvajs.org/docs/sandbox/Connected_Objects.html – Condyloid

Were you able to solve this problem with the hotspots? Any chance you can share how it's done? When both shapes are linked, can you move both shapes and the arrow around? – Generous

Hi, Is there a way to create the shapes dynamically? In this answer you have created the shapes using predefined values but is there a way to create using the button click event and create as many shapes as the user wants? I have posted the question here if you get a chance can you please have a look and suggest something? https://mcmap.net/q/1018619/-create-konvajs-shapes-and-connections-creating-dynamically-based-on-button-click-events/7584240 – Locris

Hi, I am looking to build something similar dynamically rather than using static values. Can you please look into this question and provide some answers? Any help would be really appreciated. https://mcmap.net/q/1018620/-konvajs-vue-konva-connect-the-shapes-using-the-connector-dynamically/7584240 – Locris

Answer 1

I have connected Konva.Circles. But the logic for images will also be the same. Please find the 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);

Carbolize

thank you, this example solve my another question for moving connected objects. I have also successfully use mouse to drew a line between two objects from their "hotspot" area and link them together. – Manofwar

@BoHu I am trying to connect 2 objects via a line, that is, using the mouse, select object 1 and then dragging generate a line that will connect with object 2. How to do this? – Weaverbird

Hi, Is there a way to create the shapes dynamically? In this answer you have created the shapes using predefined values but is there a way to create using the button click event and create as many shapes as the user wants? I have posted the question here if you get a chance can you please have a look and suggest something? https://mcmap.net/q/1018619/-create-konvajs-shapes-and-connections-creating-dynamically-based-on-button-click-events/7584240 – Locris