Javascript 交互式多边形形状

我有一些坐标点，比如 [0,0]、[30,0]、[30,20]、[60,20]、[60,40]、[0,40]、[0,0]

将这些点作为输入，需要生成具有可单击角的形状。 边缘相互重叠。第一次鼠标单击时，第一段覆盖第二段。第二次单击时，第二段覆盖第一段，第三次单击时，它会产生斜接效果

[可能的多边形交互效果][1] [1]: https://i.stack.imgur.com/Ok0iM.png

我可以在拐角处放置不透明度为0的矩形以进行单击检测，但问题是如何检测在拐角处放置矩形的确切位置

其次，将这些点转换为直线或路径的最佳方式是什么？。 生成的线条应足够粗，但不能穿过笔划宽度

我以前尝试过使用strokewidth的路径，所以线连接斜接没有效果。 有什么建议吗

示例代码中的线条和矩形位于拐角处，它没有给我完美的结果，可能是因为笔划宽度：

---

我希望这就是你要问的：为了绘制角矩形，我使用了每条路径的边界线。其中两个是重叠的：第一个和最后一个。但这并不重要，因为您需要鼠标交互。少了一个。这可以通过使用包含路径的组的边界框来绘制

对于鼠标交互，我使用的是

cursor:pointer适用于每个角落


const SVG\u NS=”http://www.w3.org/2000/svg";
让pathsRy=Array.from（document.querySelectorAll（“path”）；
设rectsRy=[]；
pathsRy.forEach（p=>{
设pbbox=p.getBBox（）；
直推(
drawRect(
{
x:pbbox.x，
y:pbbox.y，
宽度：5，
身高:5,，
班级：“角落”
},
svg
)
);
});
设gbbox=group.getBBox（）；
直推(
drawRect(
{
x:gbbox.x+gbbox.width-5，
y:gbbox.y+gbbox.height-5，
宽度：5，
身高:5,，
班级：“角落”
},
svg
)
);
函数drawRect（o，父级）{
var rect=document.createElements（SVG_NS，“rect”）；
for（o中的变量名称）{
如果（o.hasOwnProperty（名称））{
rect.setAttributeNS（null，name，o[name]）；
}
}
parent.appendChild（rect）；
返回矩形；
}
.corner{
填充：rgba（255,0,0,0.5）；
光标：指针；
}
svg{
溢出：可见；
}
路径{
填充：无；
笔画：黑色；
笔划线条连接：圆形；
}

我建议使用canvas完成这项任务，SVG适合静态图标，但很难使它们具有交互性。在不同的浏览器中，尤其是safari和IE中，很有可能会出现问题。我需要从这些来自JSON的坐标数据生成多个形状。你可以100%使用canvas。你能给我看一个小示例吗，这对SVG和canvas来说是非常新的。我尝试使用线条代替路径。当我拿着bbox并放置矩形时。它们不会被放置在准确的位置。我给线条增加了笔划宽度，让它们看起来很粗。我怎样才能使它们定位正确？在矩形上，鼠标的交互应该像一层在另一层上一样发生，反之亦然..甚至是斜接效应。我在问题中添加了示例代码。请看一看@enxanetaGreat，我想这会解决问题，因为我对x:x-strokeWidth/2，y:y-strokeWidth/2的数学计算是错误的，我使用了相同的x&y。我现在可以看到，在鼠标点击rect时，我如何改变它的颜色，从相邻的线条中选取它，使它看起来像一条没有rect的线条。我很高兴它对你有用。在这种情况下，请考虑接受我的回答。