HTML5 canvas lớn - di chuyển và phóng to toàn bộ nội dung bao gồm nền

Question

Mục tiêu cuối cùng của tôi là triển khai ứng dụng như http://www.crystal.ch/abb/power_systems_landscape/ bằng cách sử dụng html5.

Như bạn thấy, chúng tôi có thể cần một canvas lớn (2000 * 600), nhưng tôi không chắc chắn.

Có ai có thể cho tôi ý tưởng chỉ vì hành vi sau của liên kết ở trên không?

1. nội dung canvas toàn bộ bao gồm cả nền có thể di chuyển trái-phải trơn tru bằng MouseMove và mousedown hoạt động
2. toàn bộ nội dung bạt di chuyển bao gồm cả nền trái-phải suôn sẻ theo hệ thống lựa chọn điện
3. Phóng to thu nhỏ
4. Hiệu ứng mờ dần như cộng với vòng tròn mang tính biểu tượng

Bất kỳ loại ý tưởng nào cũng sẽ được đánh giá cao.

Answer 1

về cơ bản bạn muốn một cái gì đó như thế này

<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;> 
    <canvas id='canvas' width='2000' height='600'></canvas> 
<div> 

sau đó khi bạn muốn di chuyển bạn sẽ làm điều gì đó như

document.getElementById('wrapper').scrollTo(x, y); 

và zoom sẽ

document.getElementById('canvas').style.width = 2000 * zoom; 
document.getElementById('canvas').style.height = 600 * zoom; 

Bạn có thể chơi xung quanh với setInterval và những gì không có để cuộn và thu phóng đẹp và mượt mà, nhưng điều đó chắc chắn là cách nhanh nhất để có được hiệu ứng đó trên canvas lớn vì không có vẽ lại liên quan.

Answer 2

Tôi khuyên bạn nếu bạn đang làm việc trong canvas js 2D, không sử dụng thu phóng hoặc di chuyển phần tử canvas hoặc bất kỳ phần tử html nào khác, bạn nên viết một thuật toán trong hàm vẽ. Zoom là cái chết của chất lượng và tốc độ và có thể phức tạp từ zoomin để phóng to (Đừng quên tất cả dữ liệu có thể nhìn thấy trên vải chỉ là một hình ảnh). Tôi đã quản lý để tải lên hình ảnh gồm 13000 px và nhiều hình đại diện để hiển thị tất cả thuật toán trong các chức năng vẽ/cập nhật.

Nếu bạn sử dụng 2 canvas, bạn có thể cắt từ mã hình ảnh lớn và sau đó tổng hợp thành bản đồ trực quan.

Nếu bạn có quá nhiều chiều rộng hình ảnh> 3000 ps phải được chia cho mức độ thấp hơn (trên thiết bị iOS cho hình ảnh ~> 3000px có kích thước âm - hình ảnh nhỏ hơn).