Преобразования системы координат
Преобразования – это различные действия (изменение масштаба, поворот и перемещение точки начала координат), которые мы можем выполнить над системой координат канвы.
При выполнении преобразования изменяется только система координат канвы. Рисуемая после этого графика будет создаваться в измененной системе координат, а нарисованная графика остается неизменной.
Сохранение и загрузка состояния
Первое, что нам нужно рассмотреть применительно к преобразованиям, – сохранение и загрузка состояния канвы. Эти возможности нам очень пригодятся в дальнейшем.
При сохранении состояния канвы сохраняются:
• все заданные трансформации (будут описаны далее);
• значения свойств globalAlpha, globalCompositeOperation (будет описано далее), fillStyle, lineCap, lineJoin, lineWidth, miterLimit и strokeStyle;
• все заданные маски (будут описаны далее).
Сохранение состояния канвы выполняет метод save. Он не принимает параметров и не возвращает результата.
Состояние канвы сохраняется в памяти компьютера и впоследствии может быть восстановлено. Более того, сохранять состояние канвы можно несколько раз; при этом все предыдущие состояния остаются в памяти и их также можно восстановить.
Восстановить сохраненное ранее состояние можно вызовом метода restore. Он не принимает параметров и не возвращает результата.
При вызове этого метода будет восстановлено самое последнее из сохраненных состояний канвы. При последующем его вызове будет восстановлено предпоследнее сохраненное состояние и т. д. Этой особенностью часто пользуются для создания сложной графики.
Перемещение начала координат канвы
Мы можем переместить начало координат канвы в любую другую ее точку. После этого все координаты будут отсчитываться от нового начала координат.
Для перемещения начала координат канвы в другую точку достаточно вызвать метод translate:
<контекст рисования>.translate(<горизонтальная координата>,<вертикальная координата>)
Параметры метода translate определяют координаты точки, в которой должно находиться новое начало координат канвы. Они отсчитываются от текущего начала координат, измеряются в пикселах и задаются в виде чисел. Метод не возвращает результата.
При перемещении начала координат канвы будут учитываться все трансформации, примененные к канве ранее. Значит, если мы ранее переместили начало координат в точку [50,50] и теперь снова перемещаем его, уже в точку [100,50], в результате начало координат окажется в точке [150,100], если отсчитывать от верхнего левого угла канвы (начала системы координат по умолчанию).
Листинг 22.12 иллюстрирует пример.

Web-сценарий из листинга 22.12 делает следующее:
1. Сохраняет текущее состояние канвы.
2. Перемещает начало координат в точку [100,100].
3. Рисует квадрат размерами 50×50 пикселов, верхний левый угол которого находится в точке начала координат.
4. Опять перемещает начало координат в точку [100,100]. Обратим внимание, что координаты этой точки теперь отсчитываются от нового начала системы координат, установленного предыдущим вызовом метода translate.
5. Опять рисует квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
6. Восстанавливает сохраненное состояние канвы, в том числе и положение начала системы координат (это положение по умолчанию, т. е. верхний левый угол канвы).
7. Рисует третий по счету квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
В результате мы увидим три квадрата, расположенные на воображаемой диагонали, тянущейся от верхнего левого угла канвы вниз и вправо.
ВНИМАНИЕ!
К сожалению, не существует простого способа вернуться к системе координат по умолчанию. Единственная возможность – сохранить состояние системы координат перед любыми трансформациями и потом восстановить его.
Поворот системы координат
Метод rotate позволяет повернуть оси системы координат на произвольный угол вокруг точки начала координат; при этом поворот будет выполняться по часовой стрелке:
<контекст рисования>.rotate(<угол поворота>)
Единственный параметр метода задает угол поворота системы координат в виде числа в радианах; этот угол отсчитывается от горизонтальной оси. Метод не возвращает результата.
При повороте системы координат будут учитываться все трансформации, примененные к канве ранее. Так, если мы ранее переместили начало системы координат в другую точку и теперь поворачиваем систему координат на какой-то угол, она будет повернута вокруг нового начала координат. А если мы после этого снова повернем систему координат на какой-то угол, она будет повернута относительно текущего положения горизонтальной оси – уже повернутой ранее.
Листинг 22.13 иллюстрирует пример.

Web-сценарий из листинга 22.13 сдвигает начало координат в центр канвы (точку [200,150]), после чего трижды поворачивает систему координат на π/6 радиан (30°) и рисует в центре канвы квадрат без заливки. Обратим внимание, что каждый последующий поворот системы координат выполняется с учетом того, что она уже была повернута ранее.
Изменение масштаба системы координат
Метод scale дает возможность изменить масштаб системы координат канвы в бóльшую или меньшую сторону:
<контекст рисования>.scale(<масштаб по горизонтали>, <масштаб по вертикали>)
Параметры этого метода задают масштаб для горизонтальной и вертикальной оси системы координат в виде чисел. Числа меньше 1.0 задают уменьшение масштаба, а числа больше 1.0 – увеличение; если нужно оставить масштаб по какой-то из осей неизменным, достаточно указать значение 1.0 соответствующего параметра. Метод scale не возвращает результата.
При изменении масштаба координат канвы будут учитываться все трансформации, примененные к канве ранее: перемещения начала координат, повороты и изменения масштаба.
Листинг 22.14 иллюстрирует пример.

Web-сценарий из листинга 22.14 делает следующее:
1. Сохраняет текущее состояние канвы.
2. Рисует квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
3. Увеличивает масштаб горизонтальной координатной оси в 3 раза.
4. Рисует второй квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
5. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.
6. Увеличивает масштаб вертикальной координатной оси в 3 раза.
7. Рисует третий квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
8. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.
9. Увеличивает масштаб обоих координатных осей в 3 раза.
10. Рисует четвертый квадрат размерами 50×50 пикселов, верхний левый угол которого находится в начале координат.
11. Восстанавливает сохраненное ранее состояние канвы.
В результате мы увидим четыре прямоугольника с реальными размерами 50×50, 150×50, 50×150 и 150×150 пикселов.
|