Лабораторная работа № 6 Графика на основе канвы

Цель работы: изучение стандартных средств Delphi по программному синтезу статических и динамических графических изображений.

Введение

Все пространство формы представляет графическое полотно (канву) бесконечного размера, состоящее из отдельных пикселей. Это полотно является объектом класса TCanvas. У данного класса есть свои свойства и методы, с помощью которых можно создавать графические изображения. Для этого каждый пиксель может принимать один из 2²⁴ возможных цветовых оттенков.

Свойствами канвы являются карандаш Pen (для вычерчивания контуров), и кисти Brush (для закрашивания областей). Свойства этих инструментов полностью соответствуют их аналогам для компонентов Shape.

Рисование производится с помощью невидимого графического маркера, который перемещается по объекту рисования с помощью команды Canvas.MoveTo(x, y), где x, y – координаты точки, в которую перемещается маркер. Текущее положение маркера можно определить с помощью свойств PenPos.x и PenPos.y.

В се программные проекты в среде Delphi создаются на пространстве формы, которая является двумерным массивом пикселей с координатной системой, представленной на рисунке 6.1. Плотность пикселей на единицу длины (разрешение) устанавливается вне системы Delphi через свойства монитора, т.е. один и тот же программный проект на мониторах с разным разрешением будет иметь разные абсолютные размеры. Сама же форма может иметь размеры, превышающие пространство экрана терминала. Тогда для просмотра всего содержимого проекта на поле формы автоматически появляются линейки прокрутки. Размер холста можно получить, обратившись к свойствам к свойствам формы: ClientHeight и Clientwidth.

Средства Delphi позволяют задавать цвет каждого пикселя с помощью команды Canvas.Pixels[x, y] := <цвет>, где <цвет> может быть задан числом, символьным названием или переменной.

Вычерчивание прямой линии производится инструкцией Canvas.LineTo(x, y). При этом линия вычерчивается из текущего положения курсора в точку с координатами х и у. Все параметры линии определяются предварительно установленными значениями свойств инструмента Pen.

Инструкция PolyLine(<массив точек>: TPoint) вычерчивает ломаную линию, в которой <массив> содержит точки перегиба. Каждая точка характеризуется двумя координатами: x и y, которые можно указать явно

Canvas.PolyLine([Point(10, 30), Point(20, 70), …]);

или неявно через сформированный ранее массив

…

var

…

m: array[1..10] of TPoint;

…

begin

…

m[1].x := 10;

m[1].y := 30;

m[2].x := 20;

m[2].y := 70;

…

m[10].x := 160;

m[10].y := 130;

Canvas.PolyLine(m)

…

На основе инструкции Canvas.Ellipse(x1, y1, x2, y2) создаются окружности или эллипсы (рис. 6.2) в зависимости от соотношения координат левого верхнего угла х1, у1 и нижнего правого – х2 и у2. Очевидно, что равенство х2 – х1 = у2 – у1 обеспечивает создание окружности. Параметры контура фигуры задаются значениями свойства Pen, а параметры заливки области внутри фигуры - значениями свойства Brush.

Дуга вычерчивается инструкцией Canvas.Arc(x1, y1, x2, y2, x3, y3, x4, y4). Координаты х1, у1, х2, у2, как и в предыдущем случае, определяют параметры эллипса или окружности (рис. 6.3), параметры х3, у3 определяют начальную точку дуги, а параметры х4, у4 – конечную. Эти точки определяются путем пересечения контура эллипса и прямой, проведенной из центра эллипса в точку с указанными координатами. Параметры дуги задаются значениями свойства Pen той же канвы, на которой рисуется дуга.

С оответственно инструкция Can-vas.Rectanle(x1, y1, x2, y2) позволяет отобразить на пространстве канвы прямоугольник, а инструкция Canvas.RoundRec(x1, y1, x2, y2, x3, y3) – прямоугольник со скругленными углами (рис. 6.4). При этом координаты х1, у1, х2, у2, как и прежде, определяют координаты левого верхнего и правого нижнего углов описывающего прямоугольника, а параметры х3 и у3 задают размер эллипса, одна четверть которого используется для вычерчивания скругленного угла.

Д ва предыдущих варианта прямоугольника используют для вычерчивания контура инструмент Pen, а для закраски области – Brush. Но Delphi позволяет создавать прямоугольники на основе только кисти Brush. Инструкция FillRect(<прямоуголь-ник>: TRect) вычерчивает только закрашенный прямоугольник без контура, а инструкция FrameRect(<прямоугольник>: TRect) отображает кистью контур без закраски. Обе инструкции используют в качестве параметра структуру типа TRect, предстваляющую массив из четырех целых значений, задающих соответственно координаты х1, у1, х2,у2, назначение которых определено ранее. Ниже приведен пример задания таких прямоугольников

…

var

…

rec1, rec 2: Trect; {определение двух прямоугольников}

…

begin

rec1 := Rect(10, 10, 100, 100); {задание координат первого прямоугольника}

rec2 := Rect(110, 10, 200, 100); {задание координат второго прямоугольника}

Form1.Canvas.Brush.Color := clGreen; {задание цвета кисти}

FiilRect(rec1); {создание закрашенного зеленым цветом прямоугольника без контура}

FrameRect(rec2); {создание прямоугольника c контуром зеленого цвета без закраски }

…

На основе инструкции Polygon(<массив точек>: TPoint) создается закрашенный многоугольник. Ее действие аналогично рассмотренной ранее команде PolyLine, но в данном случае первая точка массива соединяется с последней и замкнутая область закрашивается в соответствии с параметрами свойства Brush.

С ектор эллипса или круга (рис. 6.5) может быть создан с помощью инструкции Can-vas.Pie(x1, y1, x2, y2, x3, y3, x4, y4). Значения координат аналогичны инструкции Canvas.Arc, поэтому здесь не рассматриваются.

На поверхность канвы можно также выводить текст (рис. 6.6) с помощью команды Canvas.TextOut(x, y, <текст>). Координаты х, у задают положение левого верхнего угла прямоугольника, внутри которого выводится <текст>. После отображения текстовой строки графический курсор фиксируется в правом верхнем углу данного прямоугольника. Параметры шрифта для отображаемого текста определяются свойством Font канвы.

Необходимо помнить, что фон прямоугольника с текстом закрашен в соответствии со значением свойства Color инструмента Brush.

В се вышеперечисленные средства могут отображаться непосредственно на канву формы или на канву компонента Image (страница Additional). Данный компонент создает на пространстве формы окно с локальной системой координат и собственными инструментами Color и Brush. Его использование имеет свои достоинства:

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

• уменьшение формы с созданным изображением до размеров, меньших, чем само изображение, приводит к тому, что возврат к исходному размеру формы влечет потерю части изображения, т.е. требуется его регенерация. Использование компонента Image устраняет данный недостаток.

Использование канвы формы или компонента Image предполагает, что название используемого объекта указывается в префиксе графического инструмента проекта, например:

Form1.Canvas.Pen.Color := clRed; {изображение создается на канве формы}

или

Form1.Image1.Canvas.Pen.Color := clRed; {изображение создается на канве компонента Image}

Выполнение лабораторной работы

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

1. Красное солнце поднимается из-за моря и перемещается вверх и вправо. Запуск движения – двойной щелчок мыши. Солнце останавливается само при достижении правого верхнего угла, а затем возвращается в исходное состояние.

2. Секундная стрелка часов совершает полный оборот. Пуск движения – нажатие кнопки.

3. Два пузырька в стакане всплывают за 55 сек один за другим. Запуск движения – команда верхнего меню.

4. Солнце с 10 лучами вращается против часовой стрелки с дискретом 10⁰/сек. Длина цикла 30 сек. Запуск движения – команда контекстного меню.

5. Один шар из связки поднимется вверх, а второй - с удвоенной скоростью опускается вниз. Запуск движения – щелчок мыши.

6. Крюк крана двигается по стреле вправо и опускается вниз с удвоенной скоростью. Запуск движения – клавиша «Пуск», остановка – щелчок мыши.

7. Колесо с шестью разноцветными спицами вращается 25 сек с дискретом 0.5 сек, поворачиваясь на каждом шаге на 10^о. Запуск – команда главного меню.

8. Знак дорожного движения «Кирпич» постепенно (за 20 сек с дискретом 0.4сек на каждом шаге) прячется за горизонт. Пуск – двойной щелчок мыши.

9. С дискретом 1.7 сек. меняется цвет светофора. Данная процедура повторяется три раза. Пуск движения – контекстное меню.

10. Один шар на бильярдном столе движется вверх, а второй с удвоенной скоростью вправо. Движение заканчивается при достижении края стола. Запуск движения – двойной щелчок мыши.

11. Показания термометра изменяются от -10⁰ до 40⁰, а затем в два раза медленней до 0⁰. Запуск движения – щелчок мыши.

12. Окна дома разного цвета движутся навстречу друг другу и в конечном итоге меняются местами за 20 сек. Запуск движения – нажатие клавиши «Пуск».

13. Лестница перемещается справа налево, а утолщенная (в два раза) нижняя перекладина - за это же время – вверх. Запуск перемещения – команда главного меню.

14. К парашюту подвешено слово «КГТУ». Все изображение опускается вниз и сносится влево с удвоенной скоростью. Запуск движения – двойной щелчок мыши.

15. Диск телефона поворачивается на пять цифр с дискретом 2 сек. Запуск движения – щелчок мыши.

16. На верху арки фонарь. Арка перемещается по экрану справа налево, при этом меняется цвет фонаря. Запуск движения – команда главного меню, а остановка – двойной щелчок мыши.

17. Стилизованное изображение шашки проходит по главной диагонали доски с дискретом 1.7 сек; Запуск движения – команда контекстного меню.

18. Горизонтальный спидометр до 200 км/час. Максимальная скорость достигается за 20 с., а затем падает до 80 км/час за 15 с. Запуск – нажатием любой клавиши клавиатуры.

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

20. По экрану движется справа налево стилизованная стрелка <= высотой в 50 пикселей, причем скорость начала в два раза выше скорости хвоста. Запуск и остановка движения – через клавиши клавиатуры.

21. По экрану движется справа налево стилизованная стрелка <= высотой в 50 пикселей, причем скорость начала в два раза выше скорости хвоста. Запуск и остановка движения – через клавиши клавиатуры.

22. По экрану движется справа налево со скоростью 5 пикселей/сек. столбик шириной

40 пикселей и начальной высотой 10 пикселей. На каждом шаге высота столбика увеличивается на 1 пиксель и меняется цвет. Запуск – команда главного меню, остановка – щелчок мыши.

23. На форме нарисован квадрат со стороной 300 пикселей. Внутри квадрата по периметру движутся друг за другом против часовой стрелки со скоростью 40 пикселей/сек. три квадратика (красный, зеленый и желтый) со стороной 20 пикселей. Управление движением – команды контекстного меню.

24. На форме нарисован квадрат со стороной 400 пикселей. Внутри квадрата по периметру движется по часовой стрелки со скоростью 50 пикселей/сек. окружность синего цвета с диаметром 50 пикселей. Управление движением – команды главного меню.

25. Трехцветный мяч начальным диаметром 100 пикселей поднимается вверх со скоростью 5 пикселей/сек. и уменьшается на каждом шаге в диаметре на 1 пиксель. Запуск движения – щелчок мыши. Остановка – при уменьшении диаметра до 4 пикселей.

26. На форме нарисован квадрат со стороной 400 пикселей. Два квадрата со стороной 20 пикселей и разного цвета первоначально находятся в левом и правом нижних углах. По нажатию кнопки «Старт» они начинают двигаться по диагоналям до полного перекрытия со скоростью 30 пикселей/сек., после чего меняют направление движения: вверх и вниз по вертикали. Остановка – достижение границ квадрата.

27. Н – образная фигура высотой 60 пикселей и шириной 30 пикселей совершает 4 оборота против часовой стрелки со скоростью 30⁰/сек. относительно левой нижней точки. Запуск движения – кнопка на форме.

28.  - образная фигура перемещается сверху вниз на 400 пикселей со скоростью 25 пикселей/сек., а прямая в это время вращается по часовой стрелке со скоростью 20⁰/сек. относительно собственного центра. Запуск движения – двойной щелчок мыши.

29. На пространстве формы изображен календарь за январь с горизонтальным расположением недель. Рамка красного цвета в виде квадрата с толщиной линии в 1 пиксель движется по датам с дискретом времени 0.4 сек. Запуск движения – кнопка «Пуск», остановка – кнопка «Стоп», что приводит к установке рамки на первую дату.

30. На пространстве формы изображена шахматная доска. Шашка красного цвета движется по периметру доски по часовой стрелке с дискретом 0.8 сек. Запуск движения – команда главного меню, остановка – кнопка «Пуск», что приводит к установке шашки на левую верхнюю клетку.

31. На пространстве формы изображена шахматная доска. Шашка зеленого цвета движется по главной диагонали доски взад-вперед с дискретом 0.5 сек. Запуск движения – команда контекстного меню, остановка – кнопка «Стоп», что приводит к установке шашки на правую нижнюю клетку.

32.  - образная фигура вращается против часовой стрелки относительно нижнего угла со скоростью 20⁰/сек. Запуск и остановка движения - изменение размера формы.

33. На пространстве формы изображен квадрат размером 250х250. По часовой стрелке по периметру движется окружность диаметром 40 пикселей По верхней стороне движение идет со скоростью 200/сек. Далее на каждой стороне скорость уменьшается в два раза. Запуск движения – команда главного меню, остановка – кнопка «Пуск», что приводит к установке окружности в левый верхний угол квадрата.

34. В  - образной фигуре внешний квадрат вращается по часовой стрелке со скоростью 15⁰/сек, а внутренний - против часовой стрелки со скоростью в два раза больше.

35. Z - образная за 30 сек. распрямляется и превращается в горизонтальную линию, а затем возвращается за такое же время в исходное состояние.

36. N - образная за 30 сек. распрямляется и превращается в вертикальную линию, а затем возвращается за такое же время в исходное состояние

Содержание отчета:

1. Задание на выполнение лабораторной работы;

2. Структура проекта;

3. Листинг программы.

Контрольные вопросы

1) Можно ли закрасить четырехугольник, созданный из четырех отдельных линий?

2) В чем преимущество использования компонента Image при работе с графикой?

3) Сколько параметров необходимо задать для изображения окружности средствами канвы?

4) Где находится начало координатной системы канвы?

5) Как можно перемещать графический курсор по пространству формы?

60