画布内元素中的事件答案

【问题标题】：Events in elements within a canvas画布内元素中的事件
【发布时间】：2011-05-19 02:32:57
【问题描述】：

我在画布标签内绘制了一张图片。我怎么能添加事件呢？当用户点击该图像时，我想做一些事情。

character.addEventListener('click', function() { alert('foo'); }, true);
/* character is a var (image object) within a canvas */

谢谢。

【问题讨论】：

如果你使用像 Fabric.js 这样的画布库，它会处理底层的形状点击检测。例如：canvas.add(myImg); myImg.on('click', function(){ console.log('image was clicked') })

【解决方案1】：

查看链接，有示例

查看页面来源

【讨论】：

【解决方案2】：

get click event of each rectangle inside canvas?

此外，我发现这个答案在 Mozilla 中不起作用。

使用 clientX 而不是 offsetX。

例如，我在 github 上创建了一个动态画布图片库：https://github.com/michaelBenin/fi-test

每次调整窗口大小时，我都会重新计算绘制的每个图像的 x、y，然后在单击画布时从那里运行碰撞函数。

基本上，您会从 click 事件中获取 x、y 值，然后检查画布上在这些坐标处是否有任何东西。

【讨论】：

【解决方案3】：

无法将事件处理程序添加到画布上的实际绘图。您可以处理整个画布的事件 - 就是这样。

此时您的选择是在画布上添加抽象，并根据画布点击事件的坐标查找那里的绘图 - 或者完全放下画布并使用例如svg。 Raphaël 库 (http://raphaeljs.com/) 可以帮助您处理后者。

【讨论】：