HTML5 canvas hittesting

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

来源

2010-06-30 Valentin Iliescu

经过了更多的思考，我意识到即使上下文有一个获取当前变换矩阵的方法，它也不会有用，因为我需要鼠标点击时的图像变换矩阵，并且那个时候上下文有不同的转变。我可能需要的是一个场景图，可以实现一个简单的场景或者使用像Cake JS这样的库。 – 2010-07-01 22:40:23

你不需要矩阵来翻译和缩放。例如，要翻译和缩放鼠标的X坐标，请使用newPointX = event.x * scaleX + translateX – 2010-07-02 21:07:24

谢谢，您是对的，在这种情况下，我不必实现矩阵乘法。 – 2010-07-04 00:22:16

这是3D（OpenGL）图形世界中的常见问题。

解决的办法是创建一个辅助画布对象（不显示），并重新绘制图像。该绘制与您的主要画布绘制完全相同，只是每个元素都以独特的颜色绘制。然后，查找与您的鼠标拾取对应的像素，并读取其颜色，这会给您相应的元素（如果有）。

这是OpenGL世界中常用的方法。你可以通过谷歌搜索条款找到它的描述，如"opengl object picking"。这里是one of the many search results。

更新： HTML5 canvas规范现在包含hit regions。我不确定这些浏览器支持的程度如何。

来源

2010-06-30 17:43:38 brainjam

很酷的主意！陈述得很好 – 2010-07-03 07:53:59

天才。如果可以的话，我会赞成10倍！ – 2011-10-16 03:50:28

这里的问题是，画布都做非可选的颜色混合和抗锯齿。当物体彼此邻接时产生颜色。这些颜色之间的距离可能会接近您存储的其他颜色ID，因此可能会将边框区域误判为不同对象的命中。我不确定解决此问题的最佳方法。对每个可检测对象使用单独的画布会浪费太多内存，并且在鼠标移动时单独呈现每个对象，检查似乎会浪费太多性能。 – 2013-03-15 20:48:40

HTML5 canvas hittesting

回答

相关问题