I would like to use Konvajs to do below tasks:
- draw two rectangle groups 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 while dragging.
- 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 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);