html - 带有缩放/鼠标平移/旋转/文本/事件的javascript图形引擎？

Question

是否有一个开源 javascript 库能够开箱即用地创建类似http://www.marcelbeumer.com/media/main/demos/ngen/index.html的东西，或者最多使用一个非常简单的插件？

请注意，您可以： - 缩放 - 用鼠标平移 - 旋转 - 渲染文本 - 单击项目

如果它适用于 android/iOS，则加倍积分。

Answer 1

也许您正在寻找Raphaël。一个适用于 SVG 和 VML 的 JavaScript 框架。它有几个功能和助手，其中包括缩放（用于缩放）、平移、旋转、发短信。

从主页：

Raphaël 是一个小型 JavaScript 库，可以简化您在 Web 上使用矢量图形的工作。例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用此库简单轻松地实现它。Raphaël ['ræfeɪəl] 使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Raphaël 的目标是提供一个适配器，使绘图矢量艺术跨浏览器兼容且容易。

使用示例：

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

希望能帮助到你。

PS：忘了说，首页有很多例子，看是必须的。

编辑：前段时间提出了一个类似的问题，这里有没有好的 Javascript 图形库？

Answer 2

哈！问了作者，它在 Github 上！

https://github.com/marcelbeumer/ngen-demo

Polymaps 看起来也像一个竞争者 - http://polymaps.org/

Answer 3

我正在寻找类似的东西，我遇到了这个 Jquery javascript 插件 http://arborjs.org/

它本身并没有缩放和平移（它实现它的方式有点不同），但自从我看到这个话题后，我很想分享它。