检测弧内点击

【问题标题】：Detect click inside arc检测弧内点击
【发布时间】：2014-09-17 19:03:53
【问题描述】：

如何检测在 HTML 画布元素中绘制的圆弧内的鼠标点击？

我正在创建这样的弧：

ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, 0, 0, 0, true);
ctx.fill();

我确实尝试为每个绘制的弧关联上下文对象，然后使用 myArc.ctx.isPointInPath(mouseX, mouseY) - 但这不起作用 - 所以我想使用基本三角函数来确定是否鼠标点击是否在边界内。

提前致谢！

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

你应该使用

ctx.isPointInPath(x, y);

我所做的是将beginPath，路径“绘图”移动到一个函数中，我调用它也是为了绘图，也是为了确定鼠标是否击中形状。

function shape() {
    ctx.beginPath();
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
    ctx.arc(250, 250, 0, 0, 0, true);
}

function draw() {
    shape();
    ctx.fill();
}

function checkHit(x, y) {
    shape();
    return ctx.isPointInPath(x, y);
}

如果你像这样构建你的应用程序，那么添加其他形状也很容易

【讨论】：

如果我使用ctx.stroke()怎么办
我也在尝试检测鼠标点击弧。但我中风没有填满弧线。所以，请帮助我做到这一点。