在IE8 RaphaelJS中，Pan / Zoom的速度非常慢

Question

我一直在努力获得这个座位映射图表并且已经创建了一些迭代，我一直在寻找的问题是当我到达IE8时，平移是为了减缓和延迟。

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

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

Here is my current JSFiddle

我对JS仍然有点绿色，所以如果您有任何建议，我将不胜感激。 （PS Chrome框架很棒，但不是对我来说是一个选项）

更新

我删除了原始的拖动功能，并使用jqueryui的draggable函数替换了代码。马丁建议只是拖动div，而不是拉斐尔元素。这样做可以让这个东西在ie6-8中飞行，这很棒，但随后又出现了关于缩放的问题。我之前看到的缩放我的纸元素WxH将保持相同的比例，在放大时切断我的绘图。在浏览Raphael文档后，我遇到了paper.setSize。 setSize正是我需要允许这个项目在ie6-8中移动和沟通，并且几乎征服了其路径中的所有浏览器。

所以简而言之，使用jqueryui的draggable和paper.setSize已经治愈了我的跨浏览器zoom n'pan blues。

Answer 1

从小提琴中可以看到，你通过在.translate()事件处理程序中调用mousemove来触发图像的新渲染：

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

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

我看到你已经在你的小提琴中使用了jQuery。如果要提高平移性能，应考虑执行以下操作：

1. 在Raphaël中渲染图像一次，以获得当前缩放级别。在平移时，请勿尝试在任何时间点更改VML / SVG图像中的变换。
2. 通过mousemove实现平移，您已经拥有，移动或滚动包含VML / SVG图像的HTML容器。想象一下<div>与overflow: hidden，只需相对移动图像，或滚动到适当的位置。

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