HTML5:画布上的拖放框架/库

Question

我正在寻找一个框架/库，它能让我在HTML5-Canvas上执行几个任务。

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

我已经尝试了几个框架，但它们都不能将onDrag-Listeners分配给对象(仅分配给画布)。手动实现这样的行为可能是可能的，但这会变得复杂，因为我必须在画布上处理多个对象。此外，性能是一个重要的标准，所以如果我可以使用优化的库函数而不是我自己糟糕的代码，那就更好了。我确实知道SVG是一种替代方案，所以请不要试图将我推向那个方向。我需要用canvas来比较两者的性能。

所以我想，我要找的是一个框架，让我把监听器分配给canvas-objects。动画技巧并不那么重要，因为一切都集中在用户的鼠标输入上。

有没有人知道这样一个框架/库，既能满足我的需求，又能分享一些经验？我很高兴不用被迫测试HTML5-Canvas的所有框架和库。

提前谢谢。

编辑:我忘了提到的一件事是:除了几何对象，我还需要能够绘制路径(即scribbles)并解析它们。虽然没有必要为它们提供处理程序，但如果我不需要自己在库之外实现它，我会很高兴。

Answer 1

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

该库名为fabric.js：https://github.com/kangax/fabric.js

您可以看到一些演示并感受它是如何适合您的：http://kangax.github.com/fabric.js/demos/index.html

Answer 2

除了你用自定义类来描述自己的任何东西之外，实际上并没有像“画布对象”这样的东西可以选择。一旦你绘制了一些东西，浏览器就会把它看作一个很大的像素集合。

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

Answer 3

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

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

解决方案B)使用z-index添加绝对定位的div，并定位镜像您在底层画布上绘制的图像。从这些div中获取您的单击/拖动事件。