JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

//У' = У + ку*х;

function shear(c, кх, ку) { с.transform(1, ку, кх, 1, 0, 0); }

// Вращение на theta радиан по часовой стрелке вокруг точки (х,у). Это преобразование

// можно выполнить с помощью последовательности вызовов методов translate,rotate,translate

function rotateAbout(c,theta,x,у) {

var ct = Math.cos(theta),

st = Math.sin(theta);

c.transform(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y);

}

Метод

setTransform

принимает те же аргументы, что и метод

transform,

но вместо преобразования текущей системы координат он выполняет преобразование системы координат по умолчанию и делает результат новой текущей системой координат. Метод

setTransform

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

c.save; // Сохранить текущую систему координат

с.setTransform(1,0,0,1,0,0): // Вернуться к системе координат по умолчанию

// Выполнить операции с использованием координат по умолчанию CSS-пикселов

c.restore; // Восстановить сохраненную систему координат

21.4.4.2. Примеры преобразований

Пример 21.6 демонстрирует мощь, которую дает возможность преобразования системы координат, где за счет рекурсивного применения методов

translate, rotate

и

scale

реализовано рисование фракталов - снежинок Коха. Результат работы этого примера представлен на рис. 21.8, где показаны снежинки Коха с количеством уровней рекурсии 0, 1, 2, 3 и 4.

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

lineTo

. Каждый отдельный сегмент на рис. 21.8 рисуется следующим образом:

с.lineТо(len, 0);

Значение переменной

len

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

Пример 21.6. Рисование снежинок Коха посредством

преобразований системы координат

var deg = Math.PI/180; // Для преобразования градусов в радианы

// Рисует n-уровневый фрактал снежинки Коха в контексте холста с, левый нижний угол

// которого имеет координаты (х,у), а длина стороны равна len.

function snowflake(c, п, х, у, len) {

c.saveO; // Сохранить текущее преобразование

с.translated,у); // Сместить начало координат в начальную точку

с.moveTo(0,0); // Новый фрагмент контура в новом начале координат

leg(n); // Нарисовать первую ветвь снежинки

с.rotate(-120*deg); // Поворот на 120 градусов против часовой стрелки

leg(n); // Нарисовать вторую ветвь

с.rotate(-120*deg); //Поворот

leg(n); // Нарисовать последнюю ветвь

с.closePath; // Замкнуть фрагмент контура

c.restoreO; // Восстановить прежнее преобразование

// Рисует одну ветвь n-уровневой снежинки Коха. Эта функция оставляет

// текущую позицию в конце нарисованной ветви и смещает начало координат так,

// что текущая точка оказывается в позиции (0,0).

// Это означает, что после рисования ветви можно вызвать rotate.

function leg(n) {

c.save; // Сохранить текущее преобразование

if (n == 0) { // Нерекурсивный случай:

с.lineTo(len, 0); // Просто нарисовать горизонтальную линию

} //

else { // Рекурсивный случай: 4 подветви вида: \/

с.scale(1/3,1/3); // Подветви в 3 раза меньше этой ветви

leg(n-1); // Рекурсия для первой подветви

с.rotate(60*deg); // Поворот на 60 градусов по часовой стрелке

leg(n-1); // Вторая подветвь

с.rotate(-120*deg); // Поворот на 120 градусов назад

leg(n-1); // Третья подветвь