Pan/Zoom đau đớn chậm trong IE8 RaphaelJS

Question

Tôi đã làm việc để có được sơ đồ bản đồ chỗ ngồi này một thời gian và đã tạo ra một vài lần lặp lại, và vấn đề mà tôi tiếp tục tìm là khi tôi truy cập IE8. chậm và chậm.

Những gì tôi có vào thời điểm này để giảm thời gian tải được tạo ra để thay thế "đột quỵ" vì tôi giả định ie8 muốn hiển thị lại mỗi khi tôi kéo bản đồ.

Tôi cũng thêm điều khiển hy vọng sẽ buộc người dùng IE8 tùy chọn này, nhưng vẫn có sự chậm trễ trong chảo và nếu tôi có thể có người dùng với IE8 (và ie7 nếu có thể), hãy kéo/kéo mà không cần điều khiển và phản hồi thời gian nhanh hơn một chút sẽ tuyệt vời.

Here is my current JSFiddle

tôi vẫn là một chút màu xanh lá cây với JS vì vậy nếu bạn có bất cứ đề nghị nó sẽ được nhiều đánh giá cao. (Khung PS Chrome là tuyệt vời nhưng không phải là một lựa chọn cho tôi)

Cập nhật

Tôi đã gỡ bỏ chức năng kéo gốc và thay thế các mã sử dụng chức năng kéo jQueryUI của. Martin đã đề nghị chỉ cần kéo div, chứ không phải các yếu tố Raphael. Làm như vậy cho phép điều này bay trong ie6-8 đó là rất tốt, nhưng sau đó đến mối quan tâm của tôi về mở rộng quy mô. Những gì tôi đã nhìn thấy trước đây trên phóng to phần tử giấy của tôi WxH sẽ ở lại cùng một tỷ lệ, cắt bản vẽ của tôi khi nó phóng to. Sau khi đào qua tài liệu Raphael, tôi đã xem qua paper.setSize. setSize là chính xác những gì tôi cần để cho phép dự án này di chuyển và rãnh trong ie6-8 và khá nhiều chinh phục tất cả các trình duyệt trong đường dẫn của nó.

Vì vậy, trong ngắn hạn, sử dụng jqueryui của draggable và paper.setSize đã chữa khỏi trình duyệt chéo của tôi zoom n 'pan blues.

Answer 1

Từ những gì có thể được nhìn thấy trong Fiddle, bạn đang gây ra một hình mới mẻ của hình ảnh bằng cách gọi .translate() bên trong một handler mousemove sự kiện:

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

Cách tiếp cận này là độc hại cho thực hiện trong tất cả các trình duyệt, chúng ta hãy một mình IE8. Khi giao dịch với VML trong IE8, bạn nên xem xét rằng mỗi và mọi thay đổi DOM bên trong hình ảnh sẽ dẫn đến hình ảnh được hiển thị lại. Làm điều đó trong khi panning sẽ luôn luôn là đau đớn chậm.

Tôi thấy rằng bạn đã sử dụng jQuery trong Fiddle của bạn. Nếu bạn muốn tăng hiệu suất của panning của bạn, bạn nên xem xét làm như sau:

1. Làm cho hình ảnh trong Raphaël chính xác một lần cho mức thu phóng hiện tại. Không cố gắng thay đổi các biến đổi trong hình ảnh VML/SVG của bạn tại bất kỳ thời điểm nào trong khi quét.
2. Với việc triển khai mousemove panning bạn đã có, hãy di chuyển hoặc cuộn vùng chứa HTML chứa hình ảnh VML/SVG của bạn thay thế. Hãy tưởng tượng một <div> với overflow: hidden và chỉ cần di chuyển hình ảnh bên trong tương đối hoặc cuộn đến vị trí thích hợp.

Điều này sẽ yêu cầu một số điều chỉnh tính toán tọa độ của bạn, nhưng nó sẽ cải thiện hiệu suất của bạn trong tất cả các trình duyệt.