HTML5 Canvas + JS 库中的选择/拖放功能？ [关闭]答案

【问题标题】：HTML5 Canvas + select / drag-and-drop features in a JS lib? [closed]HTML5 Canvas + JS 库中的选择/拖放功能？ [关闭]
【发布时间】：2010-05-10 08:56:38
【问题描述】：

我想使用 HTML5 Canvas，但我想在形状、文本和曲线方面使用它，能够附加传统的 DOM 事件，如 onClick 或拖放功能。是否有任何 Javascript 库可以为我做到这一点？我已经看到gwt-canvas接近这种方法，但没有仔细研究。

谢谢，伊斯特万

【问题讨论】：

看看fabric.js，它为您提供了确切的信息——形状、文本对象、图像等——所有这些都可以通过编程方式访问和修改。

标签： javascript drag-and-drop html canvas

【解决方案1】：

看看跨浏览器框架raphaël (js/svg/vml)，this video 显示它正在执行拖放/触摸事件（试用实际演示 here）

【讨论】：

我已经用我的 Mac Safari 进行了检查，它看起来确实很棒！你有 IE7 的性能基准吗？（我关心的最糟糕的浏览器）
我没有任何基准测试结果，但您为什么不尝试一些演示并亲自看看？
这个框架+1。我第一次遇到这个问题空间时，我自己动手了……不完全是火箭科学，但不是小菜一碟。这是一个巨大的节省时间。
+1 但是拉斐尔是使用 HTML5 画布（问题是关于）还是仅适用于 SVG？
@jonas：raphael 使用 svg（旧版本的 IE 使用 vml）。问题本身基本上是在描述 svg。

【解决方案2】：

本教程可能会对您有所帮助。 http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

【讨论】：

【解决方案3】：

http://www.html5canvastutorials.com/advanced/html5-canvas-drag-and-drop-tutorial/ 这是一个非常好的关于 kinetic.js 和 html5 canvas 的教程

【讨论】：

【解决方案4】：

我对 js 领域了解不多，但我倾向于推荐http://processingjs.org/ 但是，请注意，它几乎是一个用 javascript 实现的 java 库。

我认为这可能有助于澄清您是否需要将事件（onClick 等...）附加到特定的绘制对象（形状、文本、曲线等...），或者您是否只需要将事件附加到画布区域本身。

顺便说一句，gwt-canvas 将与 Google Web Toolkit 一起使用，这意味着它根本不是一个真正的 javascript 库（AFAIK，如果我错了，请有人纠正我）。

【讨论】：

事件附件：我并不关心它是否附加到画布上，只要编程模型允许我区分单独的形状即可。 gwt-canvas：我对 GWT 编程很满意。感谢 processingjs.org 的建议，我会深入研究一下。