Pan/Zoom boleśnie wolno w IE8 RaphaelJS

Question

Od pewnego czasu pracuję nad uzyskaniem tego wykresu mapowania siedzeń i stworzyłem kilka iteracji, a problem, który ciągle znajduję, polega na tym, że kiedy dostaję się do IE8, przesuwanie jest sposobem na powolny i opóźniony.

To, co mam w tym momencie, aby skrócić czas ładowania, tworzy png, który zastępuje moje "uderzenia", ponieważ zakładam, że 8 chciał ponownie wyświetlić za każdym razem, gdy przeciągnąłem mapę.

Dodałem również kontrole, które mają na celu wymuszenie na użytkownikach IE8 tej opcji, ale nadal występuje opóźnienie w panoramie, a jeśli mogę mieć użytkowników z IE8 (i, jeśli to możliwe, to jest to 7), nadal przeciągam/przesuwanie bez kontroli i odpowiedzi czas trochę szybciej, byłoby świetnie.

Here is my current JSFiddle

jestem jeszcze trochę zielony z JS, więc jeśli masz jakieś sugestie byłoby mile widziane. (Ramka PS Chrome jest niesamowite ale nie jest opcja dla mnie)

Aktualizacja

Usunąłem oryginalną funkcję przeciągania i zastąpić kod za pomocą Draggable funkcję jQueryUI użytkownika. Martin zasugerował, by po prostu przeciągnąć div, a nie elementy Rafaela. Dzięki temu możemy latać w ie6-8, co jest świetne, ale potem pojawiła się moja obawa o skalowanie. To, co widziałem przedtem na zbliżeniu, mój element papierowy WxH pozostałby w tym samym stosunku, odcinając mój rysunek po powiększeniu. Po przejrzeniu dokumentacji Raphaela natknąłem się na paper.setSize. setSize było dokładnie tym, czego potrzebowałem, aby pozwolić projektowi na poruszanie się i żłobienie w ie6-8 i prawie podbić wszystkie przeglądarki na swojej ścieżce.

Krótko mówiąc, za pomocą przeciągania i paper.setSize wyleczyłem mój krzyżowy zoom przeglądarki n 'pan blues.

Answer 1

Z tego, co można zobaczyć na skrzypcach, jesteś wyzwalania nowy rendering obrazu poprzez wywołanie .translate() wewnątrz uchwytu mousemove zdarzeń:

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

Takie podejście jest toksyczny dla wydajności we wszystkich przeglądarkach, niech sam IE8. Podczas pracy z VML w IE8 należy wziąć pod uwagę, że każda zmiana DOM w obrazie spowoduje ponowne wyświetlenie obrazu. Wykonanie tego podczas panoramowania zawsze będzie boleśnie powolne.

Widzę, że już używasz jQuery w skrzypcach. Jeśli chcesz zwiększyć wydajność panoramowanie, należy rozważyć następujący sposób:

1. Renderowanie obrazu w Raphaël dokładnie raz na obecnym poziomie powiększenia. Nie próbuj zmieniać transformacji w obrazie VML/SVG w dowolnym momencie podczas panoramowania.
2. W przypadku korzystania z funkcji panoramowania, którą już masz, przenieś lub przewiń kontener HTML zawierający obraz VML/SVG. Wyobraź sobie <div> z overflow: hidden i po prostu przesuń obraz wewnątrz względnie lub przewiń do odpowiedniej pozycji.

Będzie to wymagało korekty obliczeń współrzędnych, ale poprawi to wydajność we wszystkich przeglądarkach.