我们如何在RaphaelJS中保存和恢复转换状态

Question

我正在使用RaphaelJS来处理需要使用矢量绘图进行某些数据可视化的项目。

我无法弄清楚如何推送和弹出转换状态。 （context.save（）和HTML5画布context.restore（）的等价物）

有人能指出我在正确的方向？

谢谢。

Answer 1

你能否解释为什么你需要推送和弹出转换状态？

在svg中，你并不需要这么做，浏览器会为你做。如果你想要一个特定的变换应用于一个元素，那么只需添加一个transform attribute它。您可以通过使用<g>元素（在Raphaël中有Paper.set，它可以像<g>元素一样使用，并且您有Element.transform方法来设置变换）将变换应用于许多元素。

更新：

context.save() - 在SVG而言，这将是取件的当前变换矩阵（CTM）在给定时间和存储它的地方，在拉斐尔我想这可能是Element.transform()（我不是100％确定它是否包含整个转换堆栈，无论如何，纯粹的svg中CTM可以通过所有元素上可用的getCTM()方法获取）。这样做的一种方法是在你想要的转换中插入一个<g>元素。

context.restore() - 在svg中，这相当于从变换列表中删除变换，但请注意，在svg中，兄弟姐妹不会“继承”变换（这不同于html5画布或OpenGL，其中当前设置的矩阵是只是应用于设置变换后绘制的任何东西）。如果要将变换应​​用于多个元素，则创建一个<g>，该变换将应用于该元素的所有子元素，并且还原您只需将元素插入到<g>的父元素中。 Raphaël没有任何对<g>元素的内置支持（除非你计算Element.set，这是一个类似的概念），猜测为什么Raphaël这样做是为了防止人们尝试做这样的事情，在没有意识到的情况下膨胀DOM变得非常容易（请记住，与canvas和OpenGL不同，SVG是一种retained mode图形格式）。