HTML5：用于Canvas拖放的框架/库

Question

我正在寻找一个框架/库，使我能够在HTML5-Canvas上执行多个任务。

我需要的是访问绘制后的对象的机制，以便可以更改它们并解析为XML。此外，我需要能够使用光标拖放某些对象。

我已经尝试了几个框架，但没有一个可以将onDrag-Listeners分配给对象（只能分配到画布）。虽然可能手动实现这种行为，但由于我必须处理画布上的不止一个对象，所以这会变得复杂。另外，性能是一个重要的标准，因此最好使用优化的库函数而不是自己可怜的代码。我知道SVG作为一种替代方案，所以请不要试图推销它。我需要使用画布来比较两者的性能。

因此，我认为我正在寻找一个框架，让我可以将监听器分配给画布对象。动画技能并不那么重要，因为一切都将集中在鼠标用户输入上。

有人知道符合我的需求的这样的框架/库，并且可以分享一些经验吗？我很高兴不被迫测试所有HTML5-Canvas的框架和库。

提前致谢。

编辑：我忘记提到的一件事：除了几何对象之外，我还需要能够绘制路径（即涂鸦）并解析它们。虽然不需要为它们编写处理程序，但如果我不得不在库外实现它们，我会很高兴。

- j0ker

Answer 1

一个很棒的图书馆，可以通过拖放、调整大小和旋转来模拟对象。它还可以导入SVG数据，帮助您导入矢量图形。 这个库叫做fabric.js： https://github.com/kangax/fabric.js 您可以查看一些演示，感受它如何适合您：http://kangax.github.com/fabric.js/demos/index.html

- Variant

---

那正是我正在寻找的。同时，我还发现了一些其他看起来非常有前途的库，包括jCanvaScript、cakejs、EaselJS和Processing.js。 - j0ker

Answer 2

我没有图书馆可以推荐，但我使用的一种技术是在画布上添加一个不可见的图片地图。然后我添加了与画布上的对象对应的area元素。

区域标签对所有浏览器原生鼠标事件做出反应。这使您能够提供丰富的用户交互。图片地图也被每个移动和桌面浏览器支持，并且比任何在JavaScript中实现的点-多边形算法表现更好。

确保图片地图中的area元素始终与画布中显示的对象对齐确实增加了一些代码复杂性，但在实践中并不太难克服。请注意，在Chrome中，如果要更改已经存在于DOM中的area标记的坐标，可能会遇到一些问题。

这是该技术的一个可工作示例：http://xavi.co/drag-shapes
这是代码：https://github.com/Xavi-/Drag-Shapes

希望这能有所帮助。

- Xavi

Answer 3

实际上并没有所谓的“画布对象”可以被选择，除非你使用自定义类等方式来描述它们。一旦你绘制了某些东西，浏览器就会将其视为一个像素的大集合。

你所描述的唯一方法是捕获鼠标事件的坐标，并将其与你知道已经绘制到画布上的所有内容进行比较，考虑到它们被绘制的顺序。

- beeglebug

---

没错，但是已经有一些库提供了数据结构，能够在浏览器中保存绘制的对象。我正在寻找一个可以为我查找坐标的库。与此同时，我发现jcotton（http://jcotton.sourceforge.net/）可以做到这一点。问题是，使用该库似乎无法创建路径（例如用铅笔画线），所以我仍在寻找。 - j0ker

Answer 4

为了更改画布，您需要清除它并重新绘制。通常每帧都要这样做。cake.js使这变得容易一些。

解决方案A）为了进行鼠标交互，您需要保留一个对象和z-index的数组，然后当用户单击时，确定单击的offsetX和offsetY，并确定他们单击了什么。

解决方案B）添加绝对定位的div，其z-index和定位与您在底层画布上绘制的图像相同。从这些div中获取您的单击/拖动事件。

- circusdei

Answer 5

我在画布上使用kinetic.js来设置边界框和碰撞。

可能你需要自己设置一些类。 http://www.kineticjs.com/

- Mirko