html - HTML5 画布命中测试

Question

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

Answer 1

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

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

这是OpenGL世界中常用的方法。您可以通过谷歌搜索诸如“opengl object pick”之类的术语找到它的描述。这是众多搜索结果之一。

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