Javascript 如何在形状的边缘/边框/笔划部分进行鼠标点击测试

在我的应用程序中，我需要在形状的边缘/边框/笔划部分检测鼠标事件，而不是在填充部分。我还没有找到这样做的方法

我不知道如何开始，但这里是我试图做的伪代码

shape.on('mousemove', function () {
          if (mouse on the edge of the shape) {
             // change the cursor to a star
          } else {
            // do nothing
          }
        });

---

要仅检测形状边缘上的鼠标点击，请使用属性。这样做的目的是告诉Konva忽略填充-这意味着任何监听形状填充部分的事件都将被关闭。然而，强大的力量带来了巨大的责任，fillEnabled属性也停止了您可能希望显示的任何视觉填充

综上所述，如果只想点击测试形状的笔划部分，则需要在可视形状的顶部绘制另一个透明形状来检测鼠标事件

作为奖励，您可以使用该属性使笔划的命中检测区域更宽-就好像为了鼠标检测而将笔划设置为“更厚”

下面的代码片段显示了在矩形和随机多边形上的这种方法

//设置一个舞台
舞台=新康瓦舞台({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
}),
//添加要绘制的图层
层=新Konva.layer（），
rect=新Konva.rect({
名称：“r1”，
x:220，
y:20，
宽度：100，
身高：40，
笔画：“青色”，
填充：'透明'，
fillEnabled:false
}),
poly=新Konva.线({
分数：[23,20,23,160,70,93,150,109,290,139,270,93]，
填写：“#00D2FF”，
笔画：“黑色”，
冲程宽度：5，
关闭：是的，
fillEnabled:false，
击球宽度：10
});
//将层添加到舞台
阶段。添加（层）；
图层添加（矩形、多边形）
stage.draw（）；
on（'mouseover'，function（）{
$（'#info'）.html（'Rect MouseEnter'））
})
on（'mouseout'，function（）{
$（'#info'）.html（'Rect mouseOut'））
})
poly.on（'mouseover'，function（）{
$（'#info'）.html（'Poly MouseEnter'））
})
poly.on（'mouseout'，function（）{
$（'#info'）.html（'Poly mouseOut'））
})

正文{
保证金：10；
填充：10；
溢出：隐藏；
背景色：#f0；
}

将鼠标移到形状上

事件显示在这里

这不是一种精确的方法，只是一种近似的方法，可以检测光标是否刚好靠近对象的外边缘

stage.on('mousemove', function (e) {

        var deta = 3;

        var node8 = stage.getIntersection({x: e.evt.clientX, y: e.evt.clientY});
        if(node8){
            console.log(node8.getClassName()+"====mouse on object=====");
            return;
        }

        var node = stage.getIntersection({x: e.evt.clientX+deta, y: e.evt.clientY});
        if(node){
            console.log(node.getClassName()+"====mouse on edge=====");
            return;
        }
        var  node1 = stage.getIntersection({x: e.evt.clientX, y: e.evt.clientY+deta});
        if(node1){
            console.log(node1.getClassName()+"====mouse on edge=====");
            return;
        }
        var  node2 = stage.getIntersection({x: e.evt.clientX+deta, y: e.evt.clientY+deta});
        if(node2){
            console.log(node2.getClassName()+"====mouse on edge=====");
            return;
        }
        var node3 = stage.getIntersection({x: e.evt.clientX-deta, y: e.evt.clientY});
        if(node3){
            console.log(node3.getClassName()+"====mouse on edge=====");
            return;
        }
        var node4 = stage.getIntersection({x: e.evt.clientX, y: e.evt.clientY-deta});
        if(node4){
            console.log(node4.getClassName()+"====mouse on edge=====");
            return;
        }
        var node5 = stage.getIntersection({x: e.evt.clientX-deta, y: e.evt.clientY-deta});
        if(node5){
            console.log(node5.getClassName()+"====mouse on edge=====");
            return;
        }

        var node6 = stage.getIntersection({x: e.evt.clientX-deta, y: e.evt.clientY+deta});
        if(node6){
            console.log(node6.getClassName()+"====mouse on edge=====");
            return;
        }

        var node7 = stage.getIntersection({x: e.evt.clientX+deta, y: e.evt.clientY-deta});
        if(node7){
            console.log(node7.getClassName()+"====mouse on edge=====");
            return;
        }

      });

---

你能描述一下你想要实现的目标吗？谢谢你的回答，正如你所说，这将丢失任何关于填充部分的事件，最后，我找到了一种近似的方法，虽然不优雅，但对我来说很有效。我在下面贴出它如果你使用两个对象堆叠，那么没有填充的边缘检测将覆盖有填充的视觉对象，然后可视对象仍然可以在其填充区域上侦听鼠标悬停。这似乎是一个好方法。我修改了下面的答案，以显示如何克隆任何形状，并将克隆堆叠在原始形状上，等等。这种近似方法可以工作，但是，克隆形状并将克隆体堆叠在原始形状上也很容易，从而提供了一种非常精确的方法来处理无需近似的边缘命中检测。