我正在尝试用 Javascript 绘制交互式地图,使用 Raphael 来完成繁重的工作。
地图背景是一个相当复杂的东西,包含网格、地图元素、标签等。在此之上,我将绘制用户实际使用的东西。因为背景很复杂,我不想每帧都重新渲染。因此,在绘制之后,我想重用这些绘图元素,只需在用户平移、缩放等时更改背景的平移、旋转、缩放等。
不幸的是,我对 Raphael 的转换原语感到相当困惑:它们的行为不像我预期的那样。如果我调用scale()
,缩放似乎适用于绘图元素的原始大小;但是translate()
是累积的,所以它适用于之前的翻译。rotate()
可以是任何一个,因为它有一个我可以设置的选项......
可以做绝对翻译吗?也就是说,能够指定我的对象(通常是路径)的新中心的绝对坐标?如果做不到这一点,是否会跟踪旧位置,以便在我想将其移动到新位置时应用增量,这是一种合理的做法吗?
或者我会更好地每帧重新渲染整个东西吗?(我看到 Raphael 不擅长转换复杂绘图的建议,因为其中大部分是在 Javascript 中完成的;查看正在生成的 SVG,我发现转换似乎正在返回到路径数据中,这将承担这一点...)
(顺便说一句,FWIW 我正在使用 GWT Raphael 界面来完成这一切。)