Phóng to và thu phóng hình ảnh svg bằng raphael.js hoặc một số thư viện js khác

Question

Tôi cần một tập lệnh nhỏ sẽ hiển thị SVG (hình ảnh vector) trong khung có 2 chức năng;

1. Những hình ảnh có thể được trích gay gắt (di chuyển xung quanh để nhìn vào các phần khác nhau của hình ảnh svg với con trỏ) simmilar vào Google Maps.

2. Hình ảnh SVG có thể được phóng to và thu nhỏ trên cũng tương tự như google bản đồ ngoại trừ sẽ không cần tải hình ảnh mới làm hình ảnh là một vectơ.

Đối với một kịch bản simmilar tôi đã thấy rằng làm việc với các định dạng hình ảnh bình thường thấy http://jibbering.com/routeplanner/

Answer 1

Nếu ai đó vẫn còn quan tâm: Tôi chỉ tìm thấy thi này của Pan và Zoom cho Raphael. Vẫn là một dự án rất trẻ, nhưng thú vị đủ tôi nghĩ:

https://github.com/escobar5/raphael-pan-zoom

bản demo trực tuyến ở đây: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

Answer 2

Trước tiên, bạn cần phải tìm hiểu làm thế nào để cài đặt một hàm mở rộng Raphael để hỗ trợ phóng to ... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

Tiếp theo, bạn muốn triển khai plugin phóng to của Wout ... http://github.com/wout/raphael-zoom

Answer 3

Bạn có thể thử tập lệnh từ trang kiểm tra IE9 http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Yêu cầu một chút chỉnh sửa với id nhưng làm việc tốt cho tôi.

Answer 4

Raphael là tốt, nhưng không đủ tốt.

Kiểm tra trang này: http://code.google.com/p/svgpan/. Nó thực hiện chính xác những gì bạn yêu cầu.

Answer 5

Tôi đã có nguồn gốc SVGPan Andrea thành một (hy vọng) thân thiện hơn Raphäel plugin :)

Answer 6

tôi đã kết thúc bằng cách sử dụng svg-pan-zoom mà có nguồn gốc từ SVGPan, nhưng cho phép zoomin/panning của một tùy ý svg phần tử trong HTML của bạn và có thể thêm điều khiển.

SVGPan hoạt động tuyệt vời nếu trang hoàn chỉnh của bạn chỉ là một SVG đã tải (như ví dụ về hình con hổ), nhưng không phải nếu svg của bạn ở đâu đó sâu hơn trong html.