使用 Raphael.js 绘制 ui 元素答案

【问题标题】：Using Raphael.js to draw ui elements使用 Raphael.js 绘制 ui 元素
【发布时间】：2010-10-07 10:25:45
【问题描述】：

了解任何广泛使用 raphaeljs 来制作 ui 元素的示例对于网络应用程序。表单容器/窗口、选项卡式控件等。任何这样做时的建议（比如缓存生成的 svg/rvml 重复使用？）？

【问题讨论】：

【解决方案1】：

一个简单的例子是使用 Raphael 生成的图标。

看看由“拉斐尔先生”自己创建的these 130 icons。它们提供了非常好的缩放，就像所有其他使用 SVG 完成的 UI 小部件一样。

使用的最重要方法之一是 .node()，因此您可以将处理程序附加到关联的元素。使用.node()，Raphael 很容易与其他一些更适合 UI 的库进行交互。

Raphael 现在甚至内置了一些 event handlers。

【讨论】：

【解决方案2】：

我正在为商业智能应用程序开发这些方面的东西。我有一个控制器/工厂类，它在每个仪表板级别而不是在小部件级别缓存生成的 svg/vml。它没有什么神奇之处，真的，只是 raiseDash/lowerDash 方法检查指定的仪表板是否存在，如果不存在则创建它，然后隐藏前一个。

如果您甚至认为您可能希望将某些元素逻辑地组合在一起，请为它们设置一个集合。一开始我还担心性能会受到影响，但是如果您查看 g.raphael 源代码，即使是 raphael 开发人员也使用了很多。

我创建的每个仪表都有一个背景集和一个前景集（由刻度盘、指示器和文本组成），它们都被合并到其父小部件的前景集中，而前景集又被合并到整个仪表板的前景集。这样，我可以隐藏整个仪表板并通过两个方法调用显示另一个仪表板，同时仍保留仪表板对象内的细粒度控制。选项卡式界面的工作方式大致相同。

【讨论】：