我正在寻找一个框架/库，使我能够在HTML5-Canvas上执行多项任务。
我需要的是在绘制对象后访问对象的机制，以便可以将它们更改并解析为XML。此外，我需要能够使用光标拖放某些对象。
我已经尝试了几个框架，但没有一个框架可以将onDrag-Listeners分配给对象（仅限于画布）。有可能手工实现这种行为，但由于我不得不在画布上处理多个对象，因此这种行为变得复杂。此外，性能是一个重要的标准，因此如果我可以使用优化的库函数而不是我自己的悲惨代码，那将是一件好事。我知道SVG是另一种选择，所以请不要试图用这种方式推动我。我需要用画布来比较两者的表现。
所以我认为，我正在寻找的是一个让我将监听器分配给canvas对象的框架。动画技能并不重要，因为一切都集中在鼠标的用户输入上。
有谁知道这样的框架/库符合我的需求并可以分享一些经验？我很高兴不被迫在那里测试HTML5-Canvas的所有框架和库。
提前致谢。
编辑：有一件事我忘了提到：除了几何对象，我还需要能够绘制路径（即涂鸦）并解析它们。虽然没有必要为他们提供处理程序，但我很高兴，如果我不必在库外实现它。答案 0 :(得分：6)
一个很棒的库，可以通过拖放，调整大小，旋转来模拟对象。 它还可以导入SVG数据，这可以帮助您导入矢量图形。
该库名为fabric.js： https://github.com/kangax/fabric.js
您可以看到一些演示并感受它如何适合您：http://kangax.github.com/fabric.js/demos/index.html
答案 1 :(得分：1)
除了你自己用自定义类描述的任何东西之外，没有真正可以选择的'画布对象'之类的东西。一旦你绘制了它的东西，浏览器就会把它看作一个大的像素集合。
你可以做你所描述的唯一方法是捕捉鼠标事件的坐标，并将它与你知道绘制到画布的所有事物进行比较，同时考虑它们的绘制顺序。
答案 2 :(得分：1)
要更改画布，您需要清除它并重绘。通常每一帧。 cake.js让这很容易。
解决方案A）要进行鼠标交互，您需要保留一组对象和z索引，然后在用户单击时，确定clickX和offsetY以进行单击，并确定他们点击了什么。< / p>
解决方案B）使用z-index添加绝对定位的div并定位镜像您在底层画布上绘制的图像。从这些div中获取您的点击/拖动事件。
答案 3 :(得分：1)
我没有要建议的库，但我使用的一种技术是在画布上添加一个不可见的imagemap。然后我添加了与画布上的对象相对应的area个元素。
区域标签会对浏览器的所有本机鼠标事件做出反应。这可以让您提供丰富的用户交互。每个移动和桌面浏览器也支持图像映射，其性能优于javascript中实现的任何point-in-polygon算法。
确保imagemap中的area元素始终与画布中显示的对象对齐确实会增加一些代码复杂性，但实际上它并不难解决。请注意，如果您要更改已在DOM中的area标记的坐标，则在Chrome中可能会遇到一些issues。
以下是此技术的一个实例：http://xavi.co/drag-shapes
这是代码：https://github.com/Xavi-/Drag-Shapes
希望得到这个帮助。
答案 4 :(得分：1)
我使用kinetic.js在画布上绑定框和碰撞。
可能你必须自己设置一些课程。 http://www.kineticjs.com/