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

Question

[shweps123]

Здравствуйте. Вот нарисовал я несколько объектов, как мне их масштабировать на сцене? Я знаю про метод scale, который масштабирует всю сцену, но мне нужно отдельные группы объектов на одной сцене.
Если нет готовых решений и надо писать логику самому то, как бы вы это сделали? Одно дело масштабировать отдельный примитив, но как быть с группой объектов? Если уменьшать все объекты по отдельности то, как быть с их выравниванием?

Answer 1

[Сергей Новиков]

При работе с обычным канвасом у вас нет возможности менять отдельный объект. Для работы с отдельными объектами воспользуйтесь, например, oCanvas.

Answer 2

[GM2mars]

Допустим у нас сцена из нескольких элементов.
Создаем объект сцены "var DrawScene=function() {}" в котором объявляем все параметры для отрисовки, в приватных функциях делаем разные вспомогательные вычисления.
Потом через "DrawScene.prototype.drawElement1=function() {}" рисуем каждый объект на сцене.
Последней функцией делаем инициализацию, в которой запускаем все функции отрисовки объектов и добавляем вызов в наш конструктор. (так же не забываем про функцию очистки холста)
Пример можете глянуть https://github.com/GM2mars/GM_gauge/blob/master/gm... отрисовка круговой шкалы.

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

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

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