HTML5 画布命中测试答案

【问题标题】：HTML5 canvas hittestingHTML5 画布命中测试
【发布时间】：2010-06-30 04:09:49
【问题描述】：

我在 HTML5 Canvas 上绘制了一些图像，我想检查它们是否被鼠标点击。看起来很简单，我有图像的界限，但是图像被转换（翻译和缩放）。不幸的是，上下文没有获取当前变换矩阵的方法，而且也没有用于矩阵乘法的 API。似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法。欢迎提出建议。

【问题讨论】：

经过更多的思考，我意识到即使上下文有一个方法来获取当前的变换矩阵，它也没有用，因为我需要鼠标点击时的图像变换矩阵，到那个时候上下文有不同的变换。我可能需要的是一个场景图，要么实现一个简单的，要么使用像 Cake JS 这样的库。
您不需要矩阵来翻译和缩放。例如，要平移和缩放鼠标 X 坐标，请使用 newPointX = event.x * scaleX + translateX
谢谢，你是对的，在这种情况下我不必实现矩阵乘法。
有人开始为 Canvas 编写场景图：gskinner.com/blog/archives/2010/12/…

【解决方案1】：

这也是 3D (OpenGL) 图形世界中的常见问题。

解决方案是创建一个辅助画布对象（不显示），并将图像重新绘制到其中。绘制与您的主画布绘制完全相同，只是每个元素都使用独特的颜色绘制。然后查找与鼠标选择对应的像素，并读取其颜色，这将为您提供相应的元素（如果有）。

这是 OpenGL 世界中常用的方法。您可以通过谷歌搜索诸如"opengl object picking" 之类的术语找到它的描述。这里是one of the many search results。

更新：HTML5 画布规范现在包括hit regions。我不确定浏览器在多大程度上支持这些。

【讨论】：

这里的问题是画布都做了非可选的颜色混合和抗锯齿。当物体彼此邻接时导致颜色之间的变化。这些颜色之间的颜色可能与您存储的其他颜色 ID 足够接近，以至于边界区域可能会被误认为是对不同对象的命中。我不确定解决这个问题的最佳方法。每个可检测对象使用单独的画布会浪费太多内存，并且在鼠标移动和检查时单独渲染每个对象似乎会浪费太多性能。