Question

我正在尝试用Javascript绘制一个交互式地图，使用Raphael进行繁重的工作。

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

不幸的是，我对Raphael的变形原语感到困惑：他们的行为并不像我期望的那样。如果我调用scale()，则缩放似乎适用于绘图元素的原始大小;但translate()是累积的，因此适用于之前的翻译。 rotate()也可以，因为它有一个我可以设置的选项......

是否可以进行绝对翻译？也就是说，为了能够指定我的对象的新中心的绝对坐标（通常是路径）？如果不这样做，就是跟踪旧位置，以便在我想以合理的方式将其移动到新位置时应用delta？

或者我会更好地简单地重新渲染每一帧的整个事物？（我看到拉斐尔不擅长复杂绘图转换的建议，因为大多数都是用Javascript完成的;看看正在生成的SVG，我看到翻译似乎得到了路径数据的支持，忍受这个......）

（顺便说一句，FWIW我正在使用GWT Raphael界面。）

Answer 1

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

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

Answer 2

我成功使用了raphael-zpd插件。我不确定是否会插入GWT - 你可以查看他们的源代码并根据你的用例进行调整。