Javascript 当事件发生时，获取HTML5画布图形（Arc）的尺寸

我的问题是：我应该如何做逻辑和数学部分，以便在发出事件时计算每个弧的位置：“单击”、“鼠标悬停”等

需要考虑的要点：

线宽

它们是圆线

弧长百分比

哪个元素是第一个，ej:z索引位置

谢谢您的时间。

最好是“记住”您绘制的对象，而不是绘制它们并试图从您绘制的对象中收集它们。例如，您可以存储渲染信息：（我不知道typescript）

然后，渲染它：

ctx.fillStyle = curve.color;
ctx.arc(CENTER_X, CENTER_Y, RADIUS, percentToRadians(curve.start), percentToRadians(curve.start + curve.length));

然后，要检索信息，只需参考

曲线

。

z

值取决于渲染队列的顺序（

曲线

）

当然，您可能可以从画布上收集数据，但我不推荐这样做。

有一种方便的方法，就是这样

要考虑z索引，只需按与绘制相反的顺序进行检查：

const ctx=canvas.getContext（'2d'）；
const centerX=canvas.width/2；
const centerY=canvas.height/2；
const rad=数学最小值（centerX，centerY）*0.75；
常量路径=[
{
a:Math.PI/4，
颜色：“白色”
},
{
a:数学，PI/1.5，
颜色：“青色”
},
{
a:Math.PI，
颜色：“紫罗兰色”
},
{
a:数学，PI*2，
颜色：“灰色”
}
];
paths.forEach（obj=>{
常数p=新路径2d（）；
p、 圆弧（centerX，centerY，rad，-Math.PI/2，obj.a-Math.PI/2）；
obj.path=p；
});
ctx.lineWidth=12；
ctx.lineCap='圆形'；
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
//因为我们先排序=>更高的z指数
for（设i=paths.length-1；i>=0；i--）{
设p=paths[i]；
ctx.strokeStyle=p.悬停？'green'：p.颜色；
ctx.行程（p.path）；
};
}
函数检查悬停（evt）{
const rect=canvas.getBoundingClientRect（）；
const x=evt.clientX-rect.left；
const y=evt.clientY-rect.top；
让发现=错误；
paths.forEach（obj=>{
如果（找到）{
obj.hovered=false；
}
否则{
found=obj.hovered=ctx.isPointInStroke（obj.path，x，y）；
}
});
draw（）；
}
draw（）；
canvas.onmousemove=canvas.onclick=checkhover；

canvas{背景：浅灰色}

---

谢谢你的建议，你是对的，我也会避免在每次迭代中创建新对象，但这只是一个简单的示例，它们被收集起来，因为我添加了一个“z-index”属性，我将在正确的时间绘制它们。我会尽量简化我需要解决的问题。@Hume我想我不明白你的意思，但是是的，你也可以存储一个

zIndex

属性并对数组进行排序，但是那样做。请原谅我的英语，我们谈论的是同一个问题，如果你看代码，那就是函数“drawArcs”的目标，创建一个名为“索引”，但我还没有完成创建功能，这就是为什么我一个接一个地绘制它们，哈哈。

ctx.fillStyle = curve.color;
ctx.arc(CENTER_X, CENTER_Y, RADIUS, percentToRadians(curve.start), percentToRadians(curve.start + curve.length));