javascript - 拉斐尔累积与绝对缩放/旋转/平移？

Question

我正在尝试用 Javascript 绘制交互式 map ，使用 Raphael 来完成繁重的工作。

map 背景是一个相当复杂的东西，包含网格、 map 元素、标签等。在此之上，我将绘制用户实际使用的东西。因为背景很复杂，我不想每一帧都重新渲染它。因此，在绘制之后我想重用那些绘图元素，只是在用户平移、缩放等时更改背景的平移、旋转、缩放等。

不幸的是，我对 Raphael 的转换原语相当困惑:它们的行为并不像我期望的那样。如果我调用 scale()，缩放似乎适用于绘图元素的原始大小；但是 translate() 是累积的，所以它适用于之前的翻译。 rotate() 可以是其中之一，因为它有一个我可以设置的选项...

是否可以进行绝对翻译？也就是说，能够指定我的对象(通常是路径)新中心的绝对坐标？如果做不到这一点，是否跟踪旧位置以便在我想将其移动到新位置时应用增量是一种合理的方法吗？

或者我是否最好在每一帧都重新渲染整个事物？ (我看到 Raphael 不擅长复杂绘图转换的建议，因为其中大部分是用 Javascript 完成的；查看正在生成的 SVG，我看到转换似乎正在返回到路径数据中，这将忍受这个……)

(顺便说一句，FWIW 我正在使用 GWT Raphael 界面来处理所有这些。)

Answer 1

您可以使用 Element.attr设置绝对位置。只需更改 x 和 y 属性:

myElement.attr("x", myX);
myElement.attr("y", myY);