HTML5画布测试

Val*_*scu 6 html5 canvas hittest

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

bra*_*jam 17

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

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

这是OpenGL世界中常用的方法.您可以通过谷歌搜索术语"opengl object picking"找到它的描述.这是众多搜索结果中的一个.

更新: HTML5画布规范现在包括命中区域.我不确定浏览器支持这些程度的程度.