Panorámica/Zoom extremadamente lento en IE8 RaphaelJS

Question

He estado trabajando en obtener esta tabla de asignación de asientos por un tiempo y he creado algunas iteraciones, y el problema que sigo encontrando es cuando llego a IE8 la panorámica de esta es la forma de lento y retrasado

Lo que tengo en este momento para reducir el tiempo de carga se crea una png para reemplazar mis "golpes" ya que supongo que ie8 quería volver a hacer cada vez que arrastré el mapa.

También he añadido controles con la esperanza de obligar a los usuarios de IE8 esta opción, pero todavía hay un retraso en la sartén, y si puedo tener los usuarios con Internet Explorer 8 (e IE7 si es posible) todavía arrastrar/sartén sin los controles y responden el tiempo un poco más rápido sería genial.

Here is my current JSFiddle

estoy todavía un poco verde con JS así que si tienes alguna sugerencia sería muy apreciada. (PS Chrome marco es impresionante, pero no es una opción para mí)

actualización

He eliminado la función de arrastre original y reemplazado el código utilizando la función que pueden arrastrarse de jqueryui. Martin había sugerido simplemente arrastrar el div, y no los elementos de Rafael. Si lo haces, permite que esta cosa vuele en ie6-8, lo que es genial, pero luego me vino la preocupación de escalar. Lo que estaba viendo antes en el zoom mi elemento de papel WxH se mantendría la misma proporción, cortando mi dibujo cuando se acercó. Después de buscar en la documentación de Raphael, encontré paper.setSize. setSize era exactamente lo que necesitaba para permitir que este proyecto se moviera y surcara en ie6-8 y conquistara prácticamente todos los navegadores en su camino.

Así que, en resumen, el uso de jqueryui's draggable y paper.setSize ha curado mi navegador cruzado zoom n 'pan blues.

Answer 1

De lo que se ve en el violín, que está provocando una nueva representación de la imagen llamando .translate() dentro de un manejador mousemove evento:

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

Este enfoque es tóxico para el rendimiento en todos los navegadores, le permiten solo IE8. Al tratar con VML en IE8, debe tener en cuenta que todos y cada uno de los cambios de DOM dentro de la imagen harán que la imagen se represente nuevamente. Hacer eso mientras se realiza el paneo siempre será dolorosamente lento.

Veo que ya está utilizando jQuery en su Fiddle. Si desea aumentar el rendimiento de su encuadramiento, usted debe considerar hacer lo siguiente:

1. representar la imagen en Raphaël exactamente una vez por el nivel de zoom actual. No intente cambiar las transformaciones en su imagen VML/SVG en ningún momento mientras realiza el paneo.
2. Con la implementación de panoramización mousemove que ya tiene, mueva o desplace el contenedor HTML que contiene su imagen VML/SVG. Imagine un <div> con overflow: hidden y simplemente mueva la imagen dentro relativamente, o desplácese a la posición adecuada.

Esto requerirá algún ajuste de sus cálculos de coordenadas, pero mejorará su rendimiento en todos los navegadores.