HTML5，在Canvas上绘制的图像添加事件监听器。

Question

我正在尝试使用html5技术, 并创建了一个小的图片下拉菜单，用户选择一张图片后，它会使用drawImage()方法绘制到画布上。

但是，我无法弄清楚如何为画布上新绘制的图像添加事件监听器。

我已经尝试将其放入变量中，如下所示：

var newImg = ctx.drawImage(myImage, 200, 200);

然后添加一个事件监听器，但似乎没有起作用。

newImg.addEventListener('mousedown', onImgClick, false);

这该怎么做才正确呢。

- pfunc

Answer 1

如果你正在寻找这种交互性，那么<canvas>可能不是你想要的。你需要使用SVG。有一个名为Raphaël的绝妙库可以让在所有浏览器上使用SVG变得轻而易举，即使在IE6上也是如此。它还与jQuery完全兼容，所以你可以这样做：

var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);

我相信这将比<canvas>更易于使用，效果也会更好。

注意：Raphaël确实带有一些基本事件的辅助程序，例如“click”和“mousedown”，只需执行img.click(onImgClick)即可。但如果您已经在使用像jQuery这样的库，那么建议保持一致并使用该库的事件处理。

- bcherry

---

啊，好的，知道了。我本以为可能是这样，但我也觉得既然我可以在源代码中看到添加的img，我应该能够操作它。 - pfunc

区别在于，当您绘制图像时，<canvas> 只会添加像素。SVG 是基于标记的，就像 HTML 一样，因此实际上添加了一块标记，类似于任何 HTML DOM 元素，因此您可以与其交互、克隆它、移动它、转换它并监听其事件。但是，与 <canvas> 相比，这有时会带来性能开销，但对于您描述的情况应该非常适用。 - bcherry

很酷。我已经开始使用它了，它非常简单。但是我撤回之前的话，我无法在画布元素中看到源图像，因为我在那里留下了一些以前测试的代码。谢谢。 - pfunc

Answer 2

Canvas不是一个保留模式绘图表面。它只是一张平面图像；里面没有对象来绑定事件，drawImage 不返回任何内容。

你需要手动检测 <canvas> 上的点击事件，并检查它们是否在 [200, 200, 200+w, 200+h] 矩形内。或者，如果你想使用保留模式绘图，请考虑使用 SVG 而不是 canvas。

- bobince

---

我感到困惑，因为似乎有很多关于如何操纵在画布上绘制的对象的教程。甚至有一个使用canvas的JavaScript游戏库。http://www.kesiev.com/akihabara/所以看起来确实可以操作那些放在画布上的图片。 - pfunc

你可以在真正的画布上画一个圆，但之后只剩下颜料。你无法拿起那个圆并将其从画布上取下；你也无法将其移动到绘画的另一部分上方；它只是颜料。你可以将对象（如图像、路径和文本）应用于<canvas>。但一旦你这样做了，这些对象就没有任何身份或存在；它们只是像素。游戏库通常会保留自己的高级对象列表以进行绘制，并在每个新帧上重新绘制它们。 - bobince

Answer 3

如果不使用JS来完成这个任务：

虽然你不能在调用drawImage()的上下文中附加事件监听器，但是你可以将事件监听器附加到Canvas本身。

myCanvasElement = document.getElementById('canvasElement');
myCanvasElement.addEventListener("click", someFunction, false);

如果您需要对每个绘制的图像进行单独处理，您可以将画布对象堆叠起来，并为每个绘制的图像创建一个新的画布对象。

- JTE

---

这里仍然使用的是JS...（“要在没有JS帮助的情况下完成此操作：...”） - Peter