Javascript KonvaJS：如何在鼠标移动的基础上画一条线来连接两个形状？

我试图画一条线来连接两个基于鼠标移动的形状。我知道如何通过使用本地画布来重温它。但是我不知道如何使用KonvaJS来实现它。 请帮我做这个

此图显示了结果i和内容：

这就是我想要实现的代码。但它不起作用

            stage.on('mousedown', function(e) {
                const a = e.target instanceof Konva.Rect;
                if (!a) {
                    return;
                } else {
                    
                    group.draggable(false);
                    group2.draggable(false);
                    
                    clickdot1 = e.target;
                    drawingLine = true;
                    }
            });

            stage.on('mousemove', function(e) {
                if (!drawingLine) {
                    return;
                }else{
                    if(clickdot1!=null&&drawingLine){
                        let lastLine = new Konva.Line({
                            stroke: '#df4b26',
                            strokeWidth: 5,
                            lineCap: 'round',
                            lineJoin: 'round',
                            points: [e.target.x(), e.target.y()],
                        });
                        connections.push(lastLine);
                        drawthings();
                    }
                }   
            });
            
            function drawthings(){
                for(let i = 0;i<connections.length;i++){
                    animLayer.add(connections[i]);
                    animLayer.batchDraw();
                }
            }

stage.on（'mousedown'，函数（e）{
常数a=e.Konva.Rect的目标实例；
如果（！a）{
返回；
}否则{
可拖动组（假）；
组2.可拖动（假）；
点击dot1=e.target；
绘制线=真；
}
});
stage.on（'mousemove'，函数（e）{
如果（！绘制线）{
返回；
}否则{
if（clickdot1！=null&&drawingLine）{
让lastLine=新的Konva.Line({
笔划：“#df4b26”，
冲程宽度：5，
线头：“圆形”，
lineJoin:'圆形'，
要点：[e.target.x（），e.target.y（）]，
});
连接。推（最后一行）；
画东西（）；
}
}   
});
函数drawthings（）{
对于（设i=0；i有许多方法可以做到这一点。基本思想是：

在源对象上的
mousedown
上创建一行
在
mousemove
事件上更新行位置
检查鼠标上的目标形状。如果是“可连接”的东西，请保留一条线，否则将其销毁
const stage=新Konva.stage({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
添加（newKonva.Text（{Text:'尝试将绿色源拖动到任何红色目标'，填充：10}））
常数源=新Konva.圆({
x:20，
y:50，
半径：10，
填充：“绿色”
});
层。添加（源）；
const target1=新Konva.圆({
x:20，
y:220，
半径：10，
填充：“红色”，
名称：“目标”
});
层。添加（target1）；
const target2=新Konva.圆({
x:120，
y:220，
半径：10，
填充：“红色”，
名称：“目标”
});
层。添加（target2）；
设drawingLine=false；
让线；
source.on（'mousedown'，（）=>{
绘制线=真；
const pos=stage.getPointerPosition（）；
line=新Konva.line({
笔画：“黑色”，
//从命中图中删除直线，以便检查交点
听：错，
要点：[source.x（），source.y（），pos.x，pos.y]
});
图层。添加（行）；
});
舞台上（'mouseover'，（e）=>{
if（例如target.hasName（'target'））{
e、 目标。笔划（“黑色”）；
layer.draw（）；
}
});
舞台上（'mouseout'，（e）=>{
if（例如target.hasName（'target'））{
e、 目标笔划（空）；
layer.draw（）；
}
});
stage.on（'mousemove'，（e）=>{
如果（！行）{
返回；
}
const pos=stage.getPointerPosition（）；
常量点=line.points（）.slice（）；
点[2]=位置x；
点[3]=位置y；
线。点（点）；
layer.batchDraw（）；
});
舞台上（'mouseup'，（e）=>{
如果（！行）{
返回；
}
如果（！e.target.hasName（'target'））{
line.destroy（）；
layer.draw（）；
行=空；
}否则{
行=空；
}
});
layer.draw（）；

有很多方法可以做到这一点。基本思想是：

在源对象上的
mousedown
上创建一行
在
mousemove
事件上更新行位置
检查鼠标上的目标形状。如果是“可连接”的东西，请保留一条线，否则将其销毁
const stage=新Konva.stage({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
添加（newKonva.Text（{Text:'尝试将绿色源拖动到任何红色目标'，填充：10}））
常数源=新Konva.圆({
x:20，
y:50，
半径：10，
填充：“绿色”
});
层。添加（源）；
const target1=新Konva.圆({
x:20，
y:220，
半径：10，
填充：“红色”，
名称：“目标”
});
层。添加（target1）；
const target2=新Konva.圆({
x:120，
y:220，
半径：10，
填充：“红色”，
名称：“目标”
});
层。添加（target2）；
设drawingLine=false；
让线；
source.on（'mousedown'，（）=>{
绘制线=真；
const pos=stage.getPointerPosition（）；
line=新Konva.line({
笔画：“黑色”，
//从命中图中删除直线，以便检查交点
听：错，
要点：[source.x（），source.y（），pos.x，pos.y]
});
图层。添加（行）；
});
舞台上（'mouseover'，（e）=>{
if（例如target.hasName（'target'））{
e、 目标。笔划（“黑色”）；
layer.draw（）；
}
});
舞台上（'mouseout'，（e）=>{
if（例如target.hasName（'target'））{
e、 目标笔划（空）；
layer.draw（）；
}
});
stage.on（'mousemove'，（e）=>{
如果（！行）{
返回；
}
const pos=stage.getPointerPosition（）；
常量点=line.points（）.slice（）；
点[2]=位置x；
点[3]=位置y；
线。点（点）；
layer.batchDraw（）；
});
舞台上（'mouseup'，（e）=>{
如果（！行）{
返回；
}
如果（！e.target.hasName（'target'））{
line.destroy（）；
layer.draw（）；
行=空；
}否则{
行=空；
}
});
layer.draw（）；

您真正的问题似乎是如何在鼠标移动或向上移动时检查鼠标下是否有形状

Konva有一种命中检测方法，我会让@lavarton来解释。如果你处理的是纯矩形，而不是圆形，你可以使用形状位置和运行一些简单的数学检查来做你自己的命中测试。请看我对这个问题的解决方案，关于哪个涉及相同的领域
stage.on('mouseup', (e) => {
  if (!line) {
    return;
  }
  
  if (!e.target.hasName('target')) {
    line.destroy();
    
    layer.draw();
    line = null;
  } else {
    let pos = e.target.getClientRect();
    const points = line.points().slice();
    points[2] = pos.x + (e.target.width()/2);
    points[3] = pos.y + (e.target.height()/2);;
    line.points(points);
    layer.batchDraw();
   
    line = null;
  }
  
});