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

HTML5: Framework/Library for Drag-and-Drop on Canvas

本文关键字：框架拖放 HTML5 更新时间：2023-09-26

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

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

我已经尝试了几个框架，但没有一个提供了将onDrag-Listeners分配给对象(仅对画布)的可能性。也许可以手工实现这样的行为，但这会变得复杂，因为我必须处理画布上的多个对象。此外，性能也是一个重要的标准，所以如果我能使用优化的库函数而不是我自己的蹩脚代码，那就更好了。我确实知道SVG是另一种选择，所以请不要强迫我这么做。我需要用canvas来比较两者的性能。

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

有没有人知道这样一个框架/库，适合我的需要，可以分享一些经验?我很高兴不用被迫测试HTML5-Canvas的所有框架和库。

提前感谢。

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

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

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

您可以看到一些演示，并感觉如何适合您:http://kangax.github.com/fabric.js/demos/index.html

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

Area标签对浏览器的所有本地鼠标事件作出反应。这让您可以提供丰富的用户交互。Imagemaps也被所有移动和桌面浏览器支持，并且比javascript中实现的任何多边形点算法都要好。

确保imagemap中的area元素始终与画布中显示的对象对齐确实增加了一些代码复杂性，但在实践中这并不太难克服。注意，在Chrome你可能会遇到一些问题，如果你改变一个area标签的坐标，已经在DOM。

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

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

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

为了改变画布，你需要清除它并重新绘制。通常是每一帧。

解决方案A)为了实现鼠标交互，你需要保持一个对象数组和z索引，然后当用户点击时，确定点击的偏移量x和偏移量y，并确定他们点击了什么。

解决方案B)添加绝对定位div与z-index和定位镜像的图像，你已经在底层画布上绘制。从这些div中获取点击/拖动事件

我在画布上使用了kinetic.js来制作边界框和碰撞。

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