2

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

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

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

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

或者我会更好地每帧重新渲染整个东西吗?(我看到 Raphael 不擅长转换复杂绘图的建议,因为其中大部分是在 Javascript 中完成的;查看正在生成的 SVG,我发现转换似乎正在返回到路径数据中,这将承担这一点...)

(顺便说一句,FWIW 我正在使用 GWT Raphael 界面来完成这一切。)

4

2 回答 2

1

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

myElement.attr("x", myX);
myElement.attr("y", myY);
于 2012-06-06T07:28:35.830 回答
0

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

于 2011-05-05T20:11:17.147 回答