使用Raphael.js绘制ui元素

Question

了解广泛使用raphaeljs制作ui元素的任何例子 用于Web应用程序。形成容器/窗口，标签控件等。任何 这样做的建议（比如缓存生成的svg / rvml）  重用？）？

Answer 1

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

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

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

拉斐尔现在有一些内置 event handlers 。

Answer 2

我正在研究商业智能应用程序。我有一个控制器/工厂类，它在每个仪表板级别上缓存生成的svg / vml，而不是在小部件级别。真的，只有raiseDash / lowerDash方法可以查看指定的仪表板是否存在，如果不存在则创建它，并隐藏前一个。

如果你甚至认为你可能想要在逻辑上将一些元素组合在一起，那就为它们做一个集合。我一开始害怕性能损失，但是如果你看看g.raphael的来源，即使raphael开发人员也会使用很多。

我创建的每个量表都有一个背景设置和一个前景集（由表盘，指示符和文本组成），这两个都被合并到其父窗口小部件的前景集中，而后者又被合并到整个仪表板的前景集。这样我就可以隐藏整个仪表板并显示另一个带有两个方法调用的仪表板，同时仍然在仪表板对象中保留细粒度控制。标签式界面的工作方式大致相同。