在 IE8 RaphaelJS 中平移/缩放非常缓慢

Question

我一直在努力获取这个座位映射图表并创建了一些迭代，我一直发现的问题是当我使用 IE8 时，平移会变慢和延迟。

此时我要减少加载时间的是创建一个 png 来替换我的“笔画”，因为我假设 ie8 想要在每次拖动地图时重新渲染。

我还添加了控件，希望强制 IE8 用户使用此选项，但平移仍然存在延迟，如果我可以让使用 IE8 的用户（如果可能的话，还有 ie7）仍然在没有控件和响应时间的情况下拖动/平移再快一点就好了。

Here is my current JSFiddle

我对 JS 还是有点陌生​​，所以如果您有任何建议，将不胜感激。 （PS Chrome 框架很棒，但不是我的选择）

更新

我已经删除了原来的拖动功能，并使用jqueryui的可拖动功能替换了代码。 Martin 建议只拖动 div，而不是 Raphael 元素。这样做可以让这个东西在 ie6-8 中飞行，这很棒，但后来我担心缩放。我之前在缩放时看到的我的纸元素 WxH 将保持相同的比例，当它放大时会切断我的绘图。在挖掘 Raphael 文档后，我遇到了 paper.setSize。 setSize 正是我需要让这个项目在 ie6-8 中移动和开发并几乎征服其路径中的所有浏览器所需要的。

简而言之，使用 jqueryui 的可拖动和 paper.setSize 治愈了我的跨浏览器缩放和泛蓝。

Answer 1

从 Fiddle 中可以看出，您正在通过在 mousemove 事件处理程序中调用 .translate() 来触发图像的新渲染：

mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);

这种方法对所有浏览器的性能都是有害的，更不用说 IE8 了。在 IE8 中处理 VML 时，您应该考虑到图像中的每一个 DOM 更改都会导致图像再次被渲染。在平移时这样做总是会非常缓慢。

我看到您已经在 Fiddle 中使用了 jQuery。如果您想提高平移性能，您应该考虑执行以下操作：

1. 在 Raphaël 中为当前缩放级别只渲染一次图像。请勿在平移时随时更改 VML/SVG 图像中的转换。
2. 使用您已有的mousemove 平移实现，移动或滚动保存您的VML/SVG 图像的HTML 容器。想象一个<div> 和overflow: hidden，然后简单地相对移动里面的图像，或者滚动到适当的位置。

这将需要对您的坐标计算进行一些调整，但它会提高您在所有浏览器中的性能。