Javascript HTML5：画布上拖放的框架/库

我正在寻找一个框架/库，它使我能够在HTML5画布上执行多个任务

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

我已经尝试过几种框架，但没有一种框架能够将onDrag侦听器分配给对象（仅分配给画布）。手动实现这种行为可能是可能的，但这会变得复杂，因为我必须处理画布上的多个对象。而且，性能是一个重要的标准，所以如果我可以使用优化的库函数而不是我自己的糟糕代码，那就太好了。我确实知道SVG是一种替代方案，所以请不要这样逼我。我需要用canvas来比较两者的性能

所以我想，我要找的是一个框架，让我把监听器分配给画布对象。动画技能并不那么重要，因为一切都将集中于用户通过鼠标输入

有人知道这样一个框架/库适合我的需要，可以分享一些经验吗？我很高兴没有被迫测试HTML5画布的所有框架和库

提前谢谢

---

编辑：有一件事我忘了提：除了几何对象，我还需要能够绘制路径（即涂鸦）并解析它们。尽管没有必要让它们使用处理程序，但如果我不必自己在库之外实现它，我会很高兴的。

除了您用自定义类之类的描述自己之外，没有真正可以选择的“画布对象”之类的东西。一旦你画了某样东西，浏览器就会把它看作一个大的像素集合

---

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

要更改画布，您需要清除它并重新绘制。通常每一帧。js使这变得简单

解决方案A）要进行鼠标交互，您需要保留一组对象和z索引，然后当用户单击时，确定单击的偏移量x和偏移量，并确定他们单击了什么

---

解决方案B）添加绝对定位的div，并使用z索引和定位镜像在基础画布上绘制的图像。从这些div中获取您的单击/拖动事件。

我没有可以建议的库，但我使用的一种技术是在画布上添加一个不可见的。然后，我添加了与画布上的对象相对应的

area

元素

区域标记对浏览器的所有本机鼠标事件作出反应。这使您能够提供丰富的用户交互。Imagemaps还受到每个移动和桌面浏览器的支持，其性能优于javascript中实现的任何算法

确保imagemap中的

区域

元素始终与画布中显示的对象对齐确实增加了一些代码复杂性，但实际上这并不太难克服。请注意，在Chrome中，如果要更改已在DOM中的

区域

标记的坐标，可能会遇到一些问题

下面是这项技术的一个工作示例：
下面是代码：

---

希望能有所帮助。

我使用kinetic.js在画布上创建边界框和碰撞

也许你必须自己设置一些课程。

---

一个很棒的库，可以通过拖放、调整大小和旋转来模拟对象。 它还可以导入SVG数据，这可以帮助您导入矢量图形

该库称为fabric.js：

---

您可以看到一些演示并感觉它如何适合您：

这是正确的，但是已经有一些库提供了能够在浏览器中保存绘制对象的数据结构。我在找一个能帮我查坐标的。同时，我发现jcotton（）可以这样做。问题是，似乎无法使用该库创建路径（如用铅笔画线），所以我仍在搜索。这正是我所寻找的。同时，我还发现了其他一些看起来很有前途的图书馆。它们是jCanvaScript、cakejs、EaselJS和Processing.js。