在 Canvas 中检测形状坐标答案

【问题标题】：Detecting shape coordinates in Canvas在 Canvas 中检测形状坐标
【发布时间】：2010-10-17 17:22:06
【问题描述】：

我正在我的 HTML5 Canvas 应用程序中编写拖放功能，并且想知道如何检测我是否单击了矩形或正方形以外的形状，在这种情况下，我会在我的 ' mousedown' 事件处理程序：

如果 (evt._x > 13 && evt._x

我不知道如何用这样的弧线轻松地做这样的事情：

ctx.arc(25, 25, 20, 0, (Math.PI/180)*360);

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：