在Canvas中检测形状坐标

Question

我正在写拖累和放大器删除我的HTML5 Canvas应用程序中的功能，我想知道如何检测我是否点击了一个矩形或正方形以外的形状，在这种情况下我会在我的'mousedown'事件处理程序中执行类似的操作：

if（evt._x＆gt; 13＆amp;＆amp; evt._x＆lt; 202 ....）{}

我不知道如何使用这样的弧来轻松做类似的事情：

ctx.arc（25,25,20,0，（Math.PI / 180）* 360）;

我希望这很清楚，谢谢你。

Answer 1

只需使用isPointInPath，它会检查给定点是否在当前绘图路径中。如果你要在画布上绘制多个形状，那么一个好的技巧是将每个形状与“隐藏”画布相关联，将每条路径绘制到各自的画布，而不是针对每个形状测试isPointInPath，从而抵消目标/鼠标根据需要坐标。没有理由为此进行自己的计算。

Answer 2

首先检查点击是否在形状的边界框内（完全包围形状的最小矩形）。如果是，则执行更复杂的数学运算，以确定点击是否在形状内。你必须自己实现这个数学，因为我认为它没有任何内置的东西。

Answer 3

您将获得所需的公式here以及维基百科的Polygon文章。

Answer 4

这可能听起来很愚蠢，但您可以在<map>上使用<area>标签，而不是<img>来创建交互式多边形形状。他们有自己的onclicks / mouseovers /等。已经被所有浏览器实现。