HTML5画布命中测试

Question

6

我在HTML5画布上绘制了一些图像，并希望在鼠标点击时检查它们是否被命中。看起来很容易，因为我有图像的边界，但是这些图像被转换（平移和缩放）。不幸的是，上下文没有方法来获取当前的变换矩阵，也没有矩阵乘法的API。

似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法。

欢迎提出建议。

- Valentin Iliescu

经过更多的思考，我意识到即使上下文有一种获取当前变换矩阵的方法，也没有用处，因为我需要在鼠标点击时获取图像变换矩阵，而此时上下文具有不同的变换矩阵。我可能需要一个场景图，要么实现一个简单的场景图，要么使用类似Cake JS的库。 - Valentin Iliescu

你不需要矩阵来进行平移和缩放。例如，若要平移和缩放鼠标的X坐标，请使用新的坐标点公式：newPointX = event.x * scaleX + translateX。 - Steve Hanov

谢谢，你说得对，在这种情况下我不必实现矩阵乘法。 - Valentin Iliescu

有人开始为Canvas编写场景图： http://gskinner.com/blog/archives/2010/12/easel-js-simplifies-working-with-canvas-in-html5.html - Valentin Iliescu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brainjam · Accepted Answer

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

解决方法是创建一个辅助画布对象（不显示），并将您的图像重新绘制到其中。绘制方式与主画布相同，只是每个元素都以唯一的颜色绘制。然后查找与鼠标选取对应的像素，并读取其颜色，这将给出相应的元素（如果有）。

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

更新： HTML5 canvas规范现在包括命中区域。我不确定浏览器目前支持这些功能的程度。