Изменение масштаба системы координат

Изменение масштаба системы координат

Метод scale дает возможность изменить масштаб системы координат канвы в б?льшую или меньшую сторону:

<контекст рисования>.scale(<масштаб по горизонтали>,<масштаб по вертикали>)

Параметры этого метода задают масштаб для горизонтальной и вертикальной оси системы координат в виде чисел. Числа меньше 1.0 задают уменьшение масштаба, а числа больше 1.0 — увеличение; если нужно оставить масштаб по какой-то из осей неизменным, достаточно указать значение 1.0 соответствующего параметра. Метод scale не возвращает результата.

При изменении масштаба координат канвы будут учитываться все трансформации, примененные к канве ранее: перемещения начала координат, повороты и изменения масштаба.

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

Листинг 22.14

ctxCanvas.save();

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

ctxCanvas.scale(3, 1);

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

ctxCanvas.restore();

ctxCanvas.save();

ctxCanvas.scale(1, 3);

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

ctxCanvas.restore();

ctxCanvas.save();

ctxCanvas.scale(3, 3);

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

ctxCanvas.restore();

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 пикселов.