Phóng to giao diện người dùng trên vải HTML

Question

Điều xảy ra là tôi đã phải đối mặt với một nhiệm vụ để tạo một ZUI (giao diện người dùng phóng to) trên HTML Canvas. Các ví dụ về các giao diện như vậy là Deep Zoom và Seadragon của Microsoft.

Tôi đang cố gắng tìm một số thư viện cho phép tôi tạo ZUI mà không cần viết nó từ đầu (mặc dù tôi đã thực hiện nó cho Mac và iOS).

---

Các tính năng quan trọng mà thư viện nên có:

1. Có một số loại 'views' như các yếu tố cơ bản và sắp xếp chúng theo thứ bậc
2. Vẽ đồ họa vector, văn bản và hình ảnh (không bắt buộc) về lượt xem
3. Phóng to lên đến lần 200x
4. chuột sự kiện được xử lý bởi quan điểm (lên/xuống, di chuyển, cuộn)

Bất kỳ đề xuất nào (ngay cả khi chúng không phù hợp với các điều kiện trên) sẽ rất được hoan nghênh vì tôi không tìm thấy gì về ZUI trên canvas.

Answer 1

Bạn đã xem Zoomooz chưa?

Zoomooz là một plugin jQuery để làm cho các yếu tố trang web thu phóng. Nó có thể được sử dụng để làm Prezi như trình chiếu và để phóng to hình ảnh hoặc các chi tiết khác.

http://janne.aukia.com/zoomooz

Bạn có thể sử dụng nó để phóng to với bất kỳ phần tử DOM. Hoạt động tốt hơn với SVG so với Canvas mặc dù, vì Canvas sẽ hiển thị pixelated khi phóng to.

Answer 2

Bạn đã xem Piccolo2d dường như đáp ứng hầu hết các yêu cầu của bạn. Hãy xem video từ Geneaquilts cho biết cách họ sử dụng video đó cho giao diện đó.

Answer 3

Điều này có thể giúp bạn bắt đầu: https://github.com/florianguenther/zui53

ZUI53 là một thư viện JavaScript để tạo Zoomable giao diện người dùng dựa trên web mạnh mẽ (ZUIs) với công nghệ mới như HTML5 và CSS3.

Ngoài ra còn có OpenSeadragon, nhưng tôi không chắc liệu nó có sử dụng Canvas hay không.

Answer 4

Ngoài ra còn có Taaspace.js sử dụng HTML và CSS3 chứ không phải Canvas. Taaspace cố gắng trừu tượng hóa tất cả các phương thức nhập khác nhau, làm cho nó tương thích với các thiết bị màn hình cảm ứng ví dụ. Bạn có thể xem this example application.