11

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:

example

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

iggymoran
  • 4,059
  • 2
  • 21
  • 26
Bo Hu
  • 327
  • 1
  • 3
  • 13
  • Related demo: https://konvajs.org/docs/sandbox/Connected_Objects.html – lavrton Apr 05 '19 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 Oct 07 '19 at 02: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? https://stackoverflow.com/q/69842757/7584240 – BATMAN_2008 Nov 05 '21 at 09: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. https://stackoverflow.com/q/69856925/7584240 – BATMAN_2008 Nov 07 '21 at 11:16

1 Answers1

11

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);
Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71
  • 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. – Bo Hu May 31 '16 at 04:44
  • @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? – JG_GJ Aug 12 '19 at 23:28
  • 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://stackoverflow.com/q/69842757/7584240 – BATMAN_2008 Nov 05 '21 at 09:00