HTML5 большой холст - перемещение и масштабирование всего контента, включая фон

Question

Моя цель - реализовать приложение типа http://www.crystal.ch/abb/power_systems_landscape/ с использованием html5.

Как видите, нам может потребоваться большой (2000 * 600) холст, но я не уверен.

Может ли кто-нибудь дать мне идею только для того, чтобы вести себя по ссылке выше?

1. все содержимое холста, включая фон, может плавно перемещаться влево-вправо с помощью операции мыши и перемещения мыши
2. все содержимое холста, включая фон, плавно перемещается влево-вправо в соответствии с выбором системы питания
3. Уменьшить масштаб
4. Эффект затухания, как плюс знаковые круги

Любая идея будет оценена.

Answer 1

В основном вы хотите что-то вроде этого

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

тогда, когда вы хотите прокрутить, вы сделаете что-то вроде

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

и масштабирование будет

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

Вы можете поэкспериментировать с setInterval, а также с тем, чтобы прокрутка и масштабирование были плавными и плавными, но это, безусловно, самый быстрый способ получить этот эффект на большом холсте, поскольку не требуется перерисовка.

Answer 2

Я рекомендую, если вы работаете с 2D-холстом js, в котором не используется масштабирование или перемещение элемента холста или любых других html-элементов, лучше написать алгоритм в функции рисования. Масштабирование - это смерть качества и скорости, и оно может быть сложным от масштабирования до масштабирования (не забывайте, что все видимые данные на холсте - это просто изображение). Мне удалось загрузить изображение размером 13000 пикселей и многопользовательские аватары, чтобы показать весь алгоритм в функциях рисования / обновления.

Если вы используете 2 холста, вы можете обрезать код больших изображений, а затем объединить их с визуальной картой.

Если у вас слишком большая ширина изображения> 3000 пс, нужно разделить на более низкий уровень (на устройствах iOS для изображения ~> 3000 пикселов имеет отрицательный масштаб - изображение становится меньше).