Перемещение начала координат канвы

Перемещение начала координат канвы

Мы можем переместить начало координат канвы в любую другую ее точку. После этого все координаты будут отсчитываться от нового начала координат.

Для перемещения начала координат канвы в другую точку достаточно вызвать метод translate:

<контекст рисования>.translate(<горизонтальная координата>,<вертикальная координата>)

Параметры метода translate определяют координаты точки, в которой должно находиться новое начало координат канвы. Они отсчитываются от текущего начала координат, измеряются в пикселах и задаются в виде чисел. Метод не возвращает результата.

При перемещении начала координат канвы будут учитываться все трансформации, примененные к канве ранее. Значит, если мы ранее переместили начало координат в точку [50,50] и теперь снова перемещаем его, уже в точку [100,50], в результате начало координат окажется в точке [150,100], если отсчитывать от верхнего левого угла канвы (начала системы координат по умолчанию).

Листинг 22.12 иллюстрирует пример.

Листинг 22.12

ctxCanvas.save();

ctxCanvas.translate(100, 100);

ctxCanvas.fillRect(0, 0, 50, 50);

ctxCanvas.translate(100, 100);

ctxCanvas.fillRect(0, 0, 50, 50);

ctxCanvas.restore();

ctxCanvas.fillRect(0, 0, 50, 50);

Web-сценарий из листинга 22.12 делает следующее:

1. Сохраняет текущее состояние канвы.

2. Перемещает начало координат в точку [100,100].

3. Рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в точке начала координат.

4. Опять перемещает начало координат в точку [100,100]. Обратим внимание, что координаты этой точки теперь отсчитываются от нового начала системы координат, установленного предыдущим вызовом метода translate.

5. Опять рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

6. Восстанавливает сохраненное состояние канвы, в том числе и положение начала системы координат (это положение по умолчанию, т. е. верхний левый угол канвы).

7. Рисует третий по счету квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

В результате мы увидим три квадрата, расположенные на воображаемой диагонали, тянущейся от верхнего левого угла канвы вниз и вправо.

ВНИМАНИЕ!

К сожалению, не существует простого способа вернуться к системе координат по умолчанию. Единственная возможность — сохранить состояние системы координат перед любыми трансформациями и потом восстановить его.