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?

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?

• javascript
• html5-canvas
• kineticjs
• konvajs

• Related demo: konvajs/docs/sandbox/Connected_Objects.html – lavrton Commented Apr 5, 2019 at 16:14
• 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? – fes Commented Oct 7, 2019 at 2:32
• 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? stackoverflow./q/69842757/7584240 – BATMAN_2008 Commented Nov 5, 2021 at 9:01
• 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. stackoverflow./q/69856925/7584240 – BATMAN_2008 Commented Nov 7, 2021 at 11:16

1 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);