我在HTML5画布上绘制了一些图像,并希望在鼠标点击时检查它们是否被命中。看起来很容易,因为我有图像的边界,但是这些图像被转换(平移和缩放)。不幸的是,上下文没有方法来获取当前的变换矩阵,也没有矩阵乘法的API。
似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法。
欢迎提出建议。
我在HTML5画布上绘制了一些图像,并希望在鼠标点击时检查它们是否被命中。看起来很容易,因为我有图像的边界,但是这些图像被转换(平移和缩放)。不幸的是,上下文没有方法来获取当前的变换矩阵,也没有矩阵乘法的API。
似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法。
欢迎提出建议。
这也是3D (OpenGL)图形世界中的一个常见问题。
解决方法是创建一个辅助画布对象(不显示),并将您的图像重新绘制到其中。绘制方式与主画布相同,只是每个元素都以唯一的颜色绘制。然后查找与鼠标选取对应的像素,并读取其颜色,这将给出相应的元素(如果有)。
这是OpenGL世界中常用的方法。您可以通过谷歌搜索诸如“opengl object picking”之类的术语来找到其描述。 这里是众多搜索结果之一。
更新: HTML5 canvas规范现在包括命中区域。 我不确定浏览器目前支持这些功能的程度。