Преобразования системы координат

Преобразования – это различные действия (изменение масштаба, поворот и перемещение точки начала координат), которые мы можем выполнить над системой координат канвы.

При выполнении преобразования изменяется только система координат канвы. Рисуемая после этого графика будет создаваться в измененной системе координат, а нарисованная графика остается неизменной.

Сохранение и загрузка состояния

Первое, что нам нужно рассмотреть применительно к преобразованиям, – сохранение и загрузка состояния канвы. Эти возможности нам очень пригодятся в дальнейшем.

При сохранении состояния канвы сохраняются:

• все заданные трансформации (будут описаны далее);

• значения свойств 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 пикселов.