HTML5画布对象事件

Question

在 HTML5 画布上绘制的对象中，是否有一种方法可以附加事件处理程序，而无需跟踪每个点？

- ilijaluve

Answer 1

尝试使用Kinetic JS

http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/

- Mik

---

虽然Kinetic可以让您（表面上）将事件处理程序附加到画布元素，但它是为动画设计的，并因此不断重新绘制页面。如果您有一个复杂的（许多对象）画布，则这些重新绘制可能会使您的画布变得非常缓慢，以至于无法使用。 - mikemaccana

从版本3开始，KineticJS现在能够智能地仅绘制移动过的对象。此外，它比早期版本快得多。这是一个使用10,000个形状的工具提示压力测试示例：http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/ - Eric Rowell

Answer 2

你可能还可以看看KineticJS - 它的设计目标是使将事件监听器附加到屏幕上的形状尽可能简单，同时坚持Canvas API模式。你可以在这里查看一个示例：

http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/

- Eric Rowell

Answer 3

我认为答案是（但其他帖子没有使用这个术语），在HTML5画布上绘制的图形基元没有一流的事件支持。这并不意味着不可能编写侦听器，只是如果您想要这样做，您必须使用像Kinetic JS这样的API，如下所示： http://www.html5canvastutorials.com/advanced/html5-canvas-path-mouseover/

- Mishax

Answer 4

看看Cake。它是用于canvas元素的场景图插件。使用它，您应该能够将事件处理程序附加到canvas对象上。

- JoshNaro

Answer 5

我认为，KineticJS应该能够满足您大部分的需求。但请确保将HTML5起源的事件与KineticJS事件分开。我在这方面遇到了一些问题。如果我发现了什么，我会及时更新您。 谢谢

- Piu Sharma