拉斐尔累积与绝对缩放/旋转/平移？
我正在尝试用 Javascript 绘制交互式地图，使用 Raphael 来完成繁重的工作。
地图背景是一个相当复杂的东西，包含网格、地图元素、标签等。在此之上，我将绘制用户实际使用的内容。由于背景很复杂，我不想每帧都重新渲染它。因此，在绘制之后，我想重用这些绘图元素，仅在用户平移、缩放等时更改背景的平移、旋转、缩放。
不幸的是，我对 Raphael 的变换基元感到相当困惑：它们的行为不正确正如我所期望的。如果我调用 scale()，缩放似乎会应用于绘图元素的原始大小；但 translate() 是累积的，因此它适用于之前的翻译。 rotate() 可以是其中之一，因为它有一个我可以设置的选项...
是否可以进行绝对翻译？也就是说，能够指定我的对象（通常是路径）的新中心的绝对坐标？如果做不到这一点，那么跟踪旧位置以便当我想将其移动到新位置时可以应用增量是一种合理的方法吗？
或者我最好只是在每一帧重新渲染整个事情？ （我看到有人认为 Raphael 不擅长复杂绘图的转换，因为大部分都是用 Javascript 完成的；查看正在生成的 SVG，我发现翻译似乎已返回到路径数据中，这将证明这一点...）
（顺便说一句，FWIW 我正在使用 GWT Raphael 界面来完成这一切。）
I'm trying to draw an interactive map in Javascript, using Raphael to do the heavy lifting.
The map background is a fairly complicated thing containing a grid, the map elements, labels, etc. On top of this I'm then going to draw the stuff the user is actually working with. Because the background is complex, I don't want to have to rerender it every frame. So, after drawing it I would like to reuse those drawing elements, merely changing the translation, rotation, scaling of the background as the user pans, zooms, etc.
Unfortunately I'm rather confused by Raphael's transformation primitives: they're not behaving as I would expect. If I call scale(), the scaling appears to apply to the original size of the drawing element; but translate() is cumulative, so it applies to the previous translation. rotate() can be either, as it has an option I can set...
Is it possible to do absolute translation? That is, to be able to specify the absolute coordinates of the new center of my objects (which are usually paths)? Failing that, is keeping track of the old location so I can apply a delta when I want to move it to the new location a reasonable way of doing this?
Or would I be better off simply rerendering the whole thing every frame? (I see suggestions that Raphael isn't good at transformations of complex drawings, as most of it is done in Javascript; looking at the SVG that's being produced, I see that the translation appears to be getting backed into the path data, which would bear this out...)
(BTW, FWIW I'm using the GWT Raphael interface for all this.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用 Element.attr 设置绝对位置。只需更改 x 和 y 属性：
You can use Element.attr to set absolute positions. Just change x and y properties:
我已经成功使用 raphael-zpd 插件。我不确定这是否会插入 GWT - 您可以查看他们的源代码并使其适应您的用例。
I've used the raphael-zpd plugin with success. I'm not sure if that will plug into GWT - you could check out their source code and adapt it to your use case.