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

Как отмечалось выше, начало системы координат холста по умолчанию находится в левом верхнем углу, значение координаты X увеличивается в направлении слева направо, а координаты Y - сверху вниз. В этой системе координат по умолчанию координаты точки отображаются непосредственно в CSS-пикселы (которые затем отображаются в один или более аппаратных пикселов). Некоторые операции с холстом и атрибутами (такие как извлечение параметров пикселов и установка смещения теней) всегда используют систему координат по умолчанию. Однако помимо системы координат по умолчанию каждый холст имеет в составе графических свойств «текущую матрицу преобразований». Эта матрица определяет текущую систему координат холста. В большинстве операций с холстом, где указываются координаты точки, используется текущая система координат, а не система координат по умолчанию. Текущая матрица преобразований используется для преобразования указанных вами координат в эквивалентные им координаты в системе координат по умолчанию.

Метод setTransform() позволяет напрямую определять матрицу преобразований холста, но обычно преобразования системы координат проще определять как последовательность операций смещения, вращения и масштабирования. Влияние этих операций на систему координат холста иллюстрируются на рис. 21.7. Программа, с помощью которой был получен этот рисунок, семь раз подряд использовала одно и то же изображение осей координат. Единственное, что изменялось каждый раз, - это текущее преобразование. Обратите внимание, что преобразования оказывают влияние не только на рисование линий, но и на вывод текста.

Метод translate() просто смещает начало системы координат влево, вправо, вверх или вниз. Метод rotate() выполняет вращение осей координат по часовой стрелке на указанный угол. (Прикладной интерфейс объекта Canvas всегда измеряет углы в радианах. Чтобы преобразовать градусы в радианы, необходимо разделить значение в градусах на 180 и умножить на Math.PI.) Метод scale() растягивает или сжимает расстояния по оси X или Y.

Передача отрицательного коэффициента масштабирования методу scale() переворачивает соответствующую ему ось относительно начала системы координат, создавая зеркальное ее отражение. Именно это преобразование можно наблюдать внизу слева на рис. 21.7: вызов метода translate() сместил начало координат в левый нижний угол холста, а вызов метода scale() перевернул ось Y так, что значения координаты Y стали увеличиваться в направлении снизу вверх. Такая перевернутая система координат должна быть знакома вам по школьному курсу алгебры, и она может пригодиться для рисования графиков и диаграмм. Отметьте, однако, что текст после такого преобразования очень трудно читать!