【发布时间】：2011-03-05 00:16:18
【问题描述】：
我正在尝试用 Javascript 绘制交互式地图，使用 Raphael 来完成繁重的工作。
地图背景是一个相当复杂的东西，包含网格、地图元素、标签等。在此之上，我将绘制用户实际使用的东西。因为背景很复杂，我不想每帧都重新渲染。因此，在绘制完之后，我想重用这些绘图元素，只需在用户平移、缩放等时更改背景的平移、旋转、缩放等。
不幸的是，我对 Raphael 的转换原语感到相当困惑：它们的行为不像我预期的那样。如果我调用scale()，缩放似乎适用于绘图元素的原始大小；但是translate()是累积的，所以适用于之前的翻译。 rotate() 可以，因为它有一个我可以设置的选项...
可以做绝对翻译吗？也就是说，能够指定我的对象（通常是路径）的新中心的绝对坐标？如果做不到这一点，是否会跟踪旧位置，以便在我想将其移动到新位置时应用增量，这是一种合理的做法吗？
或者我最好只在每一帧重新渲染整个东西？ （我看到 Raphael 不擅长转换复杂绘图的建议，因为其中大部分是在 Javascript 中完成的；查看正在生成的 SVG，我发现转换似乎正在返回到路径数据中，这将承担这一点...）
（顺便说一句，FWIW 我正在使用 GWT Raphael 界面来完成所有这些操作。）
【问题讨论】：
-
如果用户不与背景图交互，是否可以将其替换为静态光栅图像？显然，它必须有足够高的分辨率来处理您最放大的状态（这可能太大而无法在浏览器中提供和操作）。这在某些情况下可能会执行得更好，而不是让客户端渲染引擎尝试绘制复杂的矢量路径。我确定有一些我没有解决的警告......
-
不幸的是，用户确实与之交互，我需要即时更新它。事实上，我正在做的是堆叠三层：两个画布和一个背景光栅。我不再使用 SVG，因为它似乎太慢了；与直觉相反，每帧画布和重绘地图似乎更快。 （这两个画布是这样我可以将地图分为需要经常更新的东西和不需要经常更新的东西，效果很好。）
标签： javascript svg raphael vml