Raphael累积与绝对缩放/旋转/平移？

Question

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

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

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

可以进行绝对翻译吗？ 也就是说，是否能够指定对象新中心（通常是路径）的绝对坐标？ 失败了吗，是否要跟踪旧位置，以便当我想将其移动到新位置时可以应用变化量？

还是仅将每个帧重新渲染一遍会更好吗？ （我看到有人建议拉斐尔（Raphael）不擅长复杂图形的转换，因为大多数情况是用Javascript完成的;查看正在生成的SVG，我发现转换似乎已经恢复到路径数据中，这将忍受这个...）

（顺便说一句，FWIW我正在使用GWT Raphael界面进行所有操作。）

Answer 1

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

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

Answer 2

我已经成功使用raphael-zpd插件。 我不确定这是否会插入GWT中-您可以查看其源代码并将其调整为适合您的用例。

• 项目： https ： //github.com/somnidea/raphael-zpd
• 来源： https : //github.com/somnidea/raphael-zpd/blob/master/raphael-zpd.js