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

Моя последняя цель — реализовать приложение типа http://www.crystal.ch/abb/power_systems_landscape/ с помощью HTML5.

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

Может ли кто-нибудь дать мне представление о том, как следовать приведенной выше ссылке?

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

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


javascript html css html5-canvas
person Shahdat    schedule 25.02.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

<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 и с чем-то еще, чтобы прокрутка и масштабирование были красивыми и плавными, но это, безусловно, самый быстрый способ получить этот эффект на большом холсте, поскольку перерисовка не требуется.

person hobberwickey    schedule 25.02.2012
comment
Привет, спасибо за ваш ответ. Согласно моему тесту, концепция прокрутки может быть реализована. но запутался с масштабированием пока. изменение ширины и высоты холста не влияет на содержимое рисования внутри холста. Может быть, нам нужно перерисовать все на основе изменения ширины и высоты. В любом случае, все еще ищу идею позади 4. Эффект затухания, такой как плюс знаковые круги - person Shahdat; 25.02.2012
comment
изменяя ширину/высоту CSS холста, вы увеличиваете его, не перерисовывая. Что касается небольших плюсов, лучше всего просто расположить некоторые элементы div или небольшие холсты поверх большего холста, и вы можете просто использовать стандартные анимации свойств javascript/CSS для достижения постепенного появления/исчезновения или расширения/свертывания эффекта. На такие темы полно ресурсов. - person hobberwickey; 26.02.2012
comment
Изменяя ширину/высоту холста в CSS, переполнение обрезается, а остальное содержимое становится невидимым. Я имею в виду не увеличивать его. С уважением, исчезают, я хотел бы проверить на маленьком холсте по большому холсту. Спасибо - person Shahdat; 26.02.2012

arrow_upward
0
arrow_downward

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

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

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

person Nikola Lukic    schedule 17.04.2013