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

Question

我一直在努力获得这个座位映射图一段时间,并创建了一些迭代,我一直在寻找的问题是当我到达IE8时,平移这是缓慢和延迟的方法.

我在这一点上减少加载时间创建了一个png来替换我的"笔画"因为我假设ie8想要在每次拖动地图时重新渲染.

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

这是我目前的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

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

\n\n

mapContainer.translate(currentMapPosX, currentMapPosY);\nrsrGroupies.translate(currentMapPosX, currentMapPosY);\n

\n\n

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

\n\n

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

\n\n

\n
1. 对于当前缩放级别，在 Rapha\xc3\xabl 中渲染图像一次。平移时，请勿尝试在任何时间点更改 VML/SVG 图像中的转换。
\n
2. 通过mousemove平移的实现，您已经可以移动或滚动保存 VML/SVG 图像的 HTML 容器。想象一下<div>，overflow: hidden只需相对移动内部图像，或滚动到适当的位置。
\n

\n\n

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

\n