我在
HTML5 Canvas上绘制了一些图像,我想检查它们是否在鼠标点击时被点击.看似简单,我有图像的边界,但图像被转换(翻译和缩放).不幸的是,上下文没有获取当前变换矩阵的方法,而且,没有用于矩阵乘法的API.
似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法.
欢迎提出建议.
似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法.
欢迎提出建议.
解决方法
这也是3D(OpenGL)图形世界中的常见问题.
解决方案是创建辅助画布对象(不显示),并将图像重绘为其中.绘制与主画布绘制完全相同,只是每个元素都使用唯一颜色绘制.然后,您可以查找与鼠标选择对应的像素,并读取其颜色,这将为您提供相应的元素(如果有).
这是OpenGL世界中常用的方法.你可以通过谷歌搜索术语来找到它的描述,例如“opengl object picking”.这里是one of the many search results.
更新：HTML5画布规范现在包含hit regions.我不确定浏览器支持这些程度的程度.
