Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Something like this:

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

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);
                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, 2016 at 4: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, 2019 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?  stackoverflow.com/q/69842757/7584240
– BATMAN_2008
                Nov 5, 2021 at 9:00
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.