@shweps123

Как организовать масштабирование объектов в HTML5 canvas (JavaScript)?

Здравствуйте. Вот нарисовал я несколько объектов, как мне их масштабировать на сцене? Я знаю про метод scale, который масштабирует всю сцену, но мне нужно отдельные группы объектов на одной сцене.
Если нет готовых решений и надо писать логику самому то, как бы вы это сделали? Одно дело масштабировать отдельный примитив, но как быть с группой объектов? Если уменьшать все объекты по отдельности то, как быть с их выравниванием?
  • Вопрос задан
  • 4052 просмотра
Пригласить эксперта
Ответы на вопрос 2
BOOMER_74
@BOOMER_74
Full-Stack разработчик
При работе с обычным канвасом у вас нет возможности менять отдельный объект. Для работы с отдельными объектами воспользуйтесь, например, oCanvas.
Ответ написан
Комментировать
GM2mars
@GM2mars
Допустим у нас сцена из нескольких элементов.
Создаем объект сцены "var DrawScene=function() {}" в котором объявляем все параметры для отрисовки, в приватных функциях делаем разные вспомогательные вычисления.
Потом через "DrawScene.prototype.drawElement1=function() {}" рисуем каждый объект на сцене.
Последней функцией делаем инициализацию, в которой запускаем все функции отрисовки объектов и добавляем вызов в наш конструктор. (так же не забываем про функцию очистки холста)
Пример можете глянуть https://github.com/GM2mars/GM_gauge/blob/master/gm... отрисовка круговой шкалы.

Так мы получили объект отрисовки сцены, где каждый объект мы может отрисовать со своими параметрами.
Но мы используем canvas, поэтому изображение растровое (выводится по пикселям) и отдельно масштабировать элемент на сцене не получится. Каждый раз придется перерисовывать сцену полностью.

Для динамических сцен лучше использовать svg, там вы можете управлять отдельно каждым объектом, не затрагивая других.

p.s. Или же для каждого элемента создавать отдельный canvas и им манипулировать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы