用于实现场景图的矢量图形的 Javascript API

<分区>

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。

要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决该问题所做的工作。

关闭 9 年前。

我正在寻找用于创建 2D 图形(如 Raphael 或 Fabric)的 JavaScript 框架。我喜欢这两个 API，但我缺少一种面向对象的方法来创建具有复合模式的场景图。

有人知道这样的框架吗？

为了阐明我所说的复合模式的意思:我想像在 GUI 框架(如 swt 或 swing)中所做的那样将绘制的对象排列在树中(我认为 Java3D 也使用它)。你有一个

Component 作为所有绘制对象的父类。它描述了所有绘制对象的常见行为和属性。
Container 从 Component 扩展并包含 Components 列表。因此，Container 的行为类似于单个 Component，并将 Container 上的所有操作委托(delegate)给其所有子组件。

使用这两个类可以很容易地创建场景图...

是否有使用这种模式的 2D 框架？

最佳答案

这不是惯用语(即特定于语言的设计模式)，因此您也可以在 JavaScript 中实现它，但我不明白您为什么想要那样。

一些 JS 框架(或库)提供了一个自以为是的解决方案和结构化的工作流程 - 例如 sceneJS (尽管它本质上是一个3D引擎)或D3.js - 消除了实现此类模式的需要。

您还没有详细说明复合模式如何有助于创建场景图，所以我无法在这方面帮助您，但这里有一些来自人们如何去过那里并活着告诉故事:

Mike Bostock(D3.js 的作者)撰写了 a POC for a canvas scenegraph in the DOM (!)，您可能会觉得这很有趣。
在 Jster 博客上有 a post建议“补充EaselJS与 AtelierJS ”(AtelierJS 实际上将自己描述为 “CreateJS 的场景管理模块”)。
在那篇文章中也提到了 Paper.js将场景图作为核心功能实现，因此值得一看(实际上，它可能正是您所追求的)。
另请查看 CakeJS ，据称是 “HTML5 canvas 标签的 JavaScript 场景图形库”。

关于用于实现场景图的矢量图形的 Javascript API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18391707/