【发布时间】：2012-03-13 17:05:56
【问题描述】：
我正在将RaphaelJS 用于需要矢量绘图以可视化某些数据的项目。
我无法弄清楚如何推送和弹出转换状态。 （相当于 html5 画布中的 context.save() 和 context.restore()）
有人能指出正确的方向吗？
谢谢。
【问题讨论】：
【发布时间】：2012-03-13 17:05:56
【问题描述】：
您能解释一下为什么需要推送和弹出转换状态吗？
在 svg 中，您实际上不需要这样做，浏览器会为您完成。如果您希望将特定转换应用于元素，则只需向其添加 transform attribute。您可以使用 <g> 元素将变换应用于许多元素（在 Raphaël 中有 Paper.set，可以像 <g> 元素一样使用，并且您可以使用 Element.transform 方法来设置变换）。
更新：
context.save() - 在 svg 术语中，这将是在给定时间获取元素的当前转换矩阵 (CTM) 并将其存储在某个地方，在 Raphaël 我猜这可能是 Element.transform()（我不是 100 % 确定它是否包含整个转换堆栈，无论如何，在纯 svg 中，可以通过 getCTM() 方法获取 CTM，该方法适用于所有元素）。一种方法是插入一个 <g> 元素，其中包含您想要的转换。
context.restore() - 在 svg 中，这相当于从变换列表中删除变换，但请注意，在 svg 中，兄弟姐妹不会“继承”变换（这与 html5 画布或 OpenGL 不同，其中当前设置的矩阵仅应用于设置变换后绘制的任何内容）。如果您希望将转换应用于许多元素，那么您创建一个 <g>，它具有应该应用于该元素的所有子元素的转换，并且您只需将元素插入到 <g> 的父元素中即可。 Raphaël 没有对 <g> 元素的任何内置支持（除非您计算 Element.set，这是一个类似的概念），Raphaël 这样做的猜测是为了防止人们尝试做类似的事情这是因为它很容易在没有意识到的情况下使 DOM 膨胀（请记住，SVG 是一种retained mode 图形格式，与画布和 OpenGL 不同）。
【讨论】：
-
我需要 save() 和 restore() 功能，因为我想编写易于理解的代码。可以说，我想画一个矩形，然后想在相对于矩形 (0, 50) 的偏移处画一个圆。但后来，我想在 (50,0) 的某个位置相对于同一个矩形绘制另一个圆。我无法说回到我绘制矩形时的状态。 Push() 和 Pop() 会帮助我。
-
有一些 opengl 编程或 HTML5 canvas 编程的人会知道为什么像 save() 和 restore() 这样的转换状态是我们不能没有的东西。不知道为什么默认情况下这在 Raphael 中不可用。我希望有人实现这一点。