Geek Answers Handbook

KonvaJS: How to connect two figures with an arrow?

I would like to use Konvajs to perform the following tasks:

  • draw two strips of rectangle on canvas. Each group contains a rectangle, text and a circle.
  • When I use the mouse to drag from the circle, it draws an arrow when dragging.
  • When I drop the arrow into another group, it stops drawing and connects the edges of the two groups with the edge

Something like that:

example

Are there any built-in methods that support relationships between shapes? Can someone show me some examples?

+5
source share
1 answer

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

More articles:


All Articles