我想使用 Konvajs 来完成以下任务:
- 在 Canvas 上绘制两个矩形组。每组包含一个矩形、文本和一个圆
- 当我用鼠标从圆圈中拖动时,它在拖动的同时绘制了一个箭头。
- 当我将箭头放到另一个组中时,它停止绘制并将两个组边对边连接起来
像这样:
是否有支持形状之间连接的原生方法? 谁能给我一些例子吗?
最佳答案
我已连接 Konva.Circles。但是图像的逻辑也是一样的。请查找 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);
关于javascript - KonvaJS:如何用箭头连接两个形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37265654/