Лабораторная работа №10

Лабораторная работа № 10.
Тема: Использование графических объектов в программе. Примитивы.
Основные вопросы:

Графические объекты в прикладных программах.

Управление свойствами графических объектов с помощью Инспектора объектов и программным
путѐм.

Графические примитивы. Методы рисования сложных объектов.
Теоретическая часть.
Delphi позволяет программисту разрабатывать программы, которые могут выводить графику: схемы, чертежи,
иллюстрации.
Программа выводит графику на поверхность объекта (формы или компонента Image). Поверхности объекта
соответствует свойство Canvas. Для того чтобы вывести на поверхность объекта графический элемент
(прямую линию, окружность, прямоугольник и т. д.), необходимо применить к свойству Canvas этого объекта
соответствующий метод. Например, инструкция Form1.Canvas.Rectangle (10,10,100,100)
вычерчивает в окне программы прямоугольник.
Художник в своей работе использует карандаши и кисти. Методы, обеспечивающие вычерчивание на
поверхности холста графических примитивов, тоже используют карандаш и кисть. Карандаш применяется для
вычерчивания линий и контуров, а кисть — для закрашивания областей, ограниченных контурами.
Карандашу и кисти, используемым для вывода графики на холсте, соответствуют свойства Pen (карандаш) и
Brush (кисть), которые представляют собой объекты типа TPen и TBrush, соответственно. Значения
свойств этих объектов определяют вид выводимых графических элементов.
Примитивы
Для использования простейших геометрических фигур (примитивов) в палитре компонентов Additional
необходимо выбрать компонент класса TShape. При добавлении компонента в форму автоматически
создается прямоугольник. Для задания типа фигуры в свойствах компонента используется свойство Shape.
Для всех фигур, кроме квадрата и окружности, размеры (ширину и высоту) компонента можно задавать
произвольно. Для квадратов и окружности размеры определяют размеры контейнера, в который помещѐн
данный объект, а действительный размер фигуры определяется наименьшим размером.
Свойство
Назначение
Определяет тип фигуры:

stRectangle – прямоугольник;
stSquare – квадрат;

stRoundRect – прямоугольник со скруглѐнными углами;

stRoundSquare – квадрат со скруглѐнными углами;

stEllipse – эллипс;
 stCircle – окружность.
Определяет цвет (Color) и стиль (Style) заливки фигуры. Стиль заливки

Shape
Brush
фигуры определяется

bsSolid – сплошная, одноцветная;

bsClear – прозрачная;

bsHorizontal – горизонтальная штриховка;

bsVertical – вертикальная штриховка;

bsFDiagonal – наклонная штриховка (ЮВ–СЗ);

bsBDiagonal – наклонная штриховка (ЮЗ–СВ);

bsCross – крестообразная;

bsDiagCross – крестообразная по диагонали;
2
Свойство
Назначение
Определяет свойства контура: цвет (Color), стиль линии контура (Style),
ширину линии контура в пикселях (Width), цвет контура (Mode).
Стиль линии контура Style:

psSolid – сплошная линия

psDash – пунктирная линия, длинные штрихи

psDot – пунктирная линия, короткие штрихи

psDashDot – пунктирная линия, чередование длинного и короткого
штрихов

psDashDotDot – пунктирная линия, чередование одного длинного
и двух коротких штрихов

psClear – линия не отображается (используется, если не надо
изображать границу области, например, прямоугольника)
Свойство Mode влияет на цвет контура:

pmBlack – черный, не зависит от значения свойства Pen.Color;

pmWhite – белый, не зависит от значения свойства Pen.Color;

pmCopy – цвет линии определяется значением свойства
Pen


Pen.Color;
pmNotCopy – Цвет линии является инверсным по отношению к
значению свойства Pen.Color;
pmNot – Цвет точки линии определяется как инверсный по
отношению к цвету точки холста, в которую выводится точка линии
Рисование примитивов
Для создания нарисованных объектов многие компоненты имеют свойство Canvas – холст. Данное
свойство не является визуальным свойством (оно не отображается в Инспекторе объектов), но оно
присутствует в качестве свойства во многих других компонентах, которые должны уметь нарисовать
себя и отобразить какую-либо информацию.
На форме или в других объектах, где возможно рисование, единицей измерения координат является
пиксель, началом координат является левый верхний угол компонента.
Для рисования канва включает в себя шрифт, перо (карандаш) и кисть. Кроме того, можно рисовать и
поточечно, получив доступ к каждому пикселю.
Метод
procedure Arc (X1,
Y1, Х2, Y2, ХЗ, Y3,
Х4, Y4:Integer);
procedure Chord (XI,
Yl, X2, Y2, X3, Y3,
X4, Y4: Integer);
procedure Ellipse
(XI, Yl, X2, Y2 :
Integer);
procedure LineTo(X,
Y: Integer);
procedure MoveTo
(X,Y: Integer);
procedure Pie (XI,
Yl, X2, Y2, X3, Y3,
X4, Y4: Integer);
procedure Polygon
(const Points: array
of TPoint);
procedure Polyline
(const Points: array
of TPoint);
procedure Rectangle
(XI, Yl, X2, Y2:
Integer);
Описание
Метод рисует сегмент эллипса. Эллипс определяется описывающим
прямоугольником (X1,Y1)— (Х2, Y2); его размеры должны лежать в
диапазоне от 2 до 32 767 точек. Начальная точка сегмента лежит на
пересечении эллипса и луча, проведенного из его центра через точку (ХЗ,
Y3). Конечная точка сегмента лежит на пересечении эллипса и луча,
проведенного из его центра через точку (Х4, Y4). Сегмент рисуется против
часовой стрелки.
Рисует хорду и заливает отсекаемую ею часть эллипса. Эллипс, начальная и
конечная точки определяются, как в методе Arc
Рисует и закрашивает эллипс, вписанный в прямоугольник (Х1, Y1) - (Х2,
Y2)
Проводит линию текущим пером из текущей точки в (X, Y)
Перемещает текущее положение пера (свойство
PenPos) в точку (X, Y)
Рисует сектор эллипса, описываемого прямоугольником (Х1, Y1) — (Х2, Y2).
Стороны сектора лежат на лучах, проходящих из центра эллипса через
точки (ХЗ, Y3) и (Х4, Y4)
Строит многоугольник, используя массив координат точек Points. При
этом последняя точка соединяется с первой и внутренняя область
закрашивается
Строит ломаную линию, используя массив координат точек Points
Рисует прямоугольник с верхним левым углом в (Х1, Y1) и нижним правым в
(Х2, Y2)
3
Метод
Описание
Рисует прямоугольник с закругленными углами. Координаты вершин — те
же, что и в методе Rectangle. Закругления рисуются как сегменты
эллипса с размерами осей по горизонтали и вертикали ХЗ и Y3
procedure RoundRect
(XI, Yl, X2, Y2, X3,
Y3: Integer) ;
function TextHeight
(const Text: string):
Integer;
function TextWidth
(const Text: string):
Integer;
procedure TextOut (X,
Y: Integer; const
Text: string) ;
procedure TextRect
(Rect : TRect; X, Y:
Integer; const Text:
string);
Задает высоту строки
Text в пикселях
Задает ширину строки
Text в пикселях
Производит вывод строки
канвы (X, Y)
Text. Левый верхний угол помещается в точку
Производит вывод текста с отсечением. Как и в TextOut, строка Text
выводится с позиции (X, Y); при этом часть текста, лежащая вне пределов
прямоугольника Rect, отсекается и не будет видна
Для рисования многих фигур необходимо задать координаты ограничивающих точек.
Рисование окружностей и эллипсов.
(x1, y1)
(x1, y1)
(x2, y2)
(x2, y2)
Для рисования окружности и эллипса используется единый метод Ellipse . Параметрами метода
являются координаты левого верхнего и нижнего правого углов прямоугольника, в который вписана
окружность или эллипс.
Например, для рисования окружности в канве на форме можно использовать следующую команду:
//рисование окружности радиусом 90 пикселей
Form1.Canvas.Ellipse(10, 10, 100, 100);
Рисование дуги окружности и эллипса
(x1, y1)
(x3, y3)
(x1, y1)
(x3, y3)
(x4, y4)
(x4, y4)
(x2, y2)
(x2, y2)
Для рисования дуги используется метод Arc. Точки с координатами (x3, y3) и (x4, y4) – это
произвольные (не обязательно лежащие на эллипсе!) точки, лежащие на луче из центра эллипса к
этим точкам.
Очевидно, что центр эллипса определяется точкой с координатами ((x2 – x1)/2, (y2 – y1)/2).
Рисование происходит против часовой стрелки.
4
Для рисования изображений на практике часто применяются объекты Form и PaintBox , свойствами
которых является компонент Canvas .
Для рисования в компоненте PaintBox используется событие onPaint . Это событие наступает
каждый раз при отображении компонента PaintBox . Перед выводом изображения соответствующим
методом можно задать параметры свойств Pen (карандаш) и Brush (кисть). В свою очередь их
свойства, как компонентов, задаются аналогично тому, как это делается для объекта Shape .
Пример рисования эллипса в компоненте
PaintBox .
PaintBox1.Canvas.Pen.Color := clGreen;//цвет контура
PaintBox1.Canvas.Pen.Width := 3; //толщина контура
PaintBox1.Canvas.Brush.Color := clRed;//цвет заливки
PaintBox1.Canvas.Ellipse(10, 10, 100, 150);//рисование эллипса
При выполнении целой группы действий с одними и теми же объектами часто приходится повторять
целые последовательности команд, содержащие наименование одних и тех же объектов, а так же их
свойств. Это аналогично тому, как в большом математическом выражении в каждом слагаемом
используется общий множитель, который можно вынести за скобку и это во многом упрощает и
написание и понимание выражения. В языке Pascal и Delphi для записей и объектных
компонентов используется оператор доступа или группировки with (с, вместе с).
Оператор доступа служит для удобной и быстрой работы с составными частями объектов, в том числе с
полями записей. Для обращения к полю записи необходимо указывать имя записи и имя этого поля,
разделенные точкой. Аналогичным путем образуется имя составной части какого-либо объекта, например,
формы или кнопки. Оператор доступа имеет следующий основной формат:
with <Имя объекта> do <Оператор>
В операторе, расположенном после слова do, для обращения к составной части объекта можно не указывать
имя этого объекта, которое уже задано после слова with. Оператор может быть составным оператором, т.е.
содержать несколько компонентов, относящихся к компоненту верхнего уровня. Данный пример с
использованием оператора доступа может иметь следующий вид:
With PaintBox1.Canvas do
begin
Pen.Color := clGreen;
Pen.Width := 3;
Brush.Color := clRed;
Ellipse(10, 10, 100, 150);
end;
Допускается вложение операторов with друг в друга. Например, внутри составного оператора для
настройки свойств объекта Pen использовано два оператора. С вложением ещѐ одного оператора
with этот фрагмент кода может быть следующим:
With PaintBox1.Canvas do
begin
with Pen do
begin
Color := clGreen;
Width := 3;
end;
Brush.Color := clRed;
Ellipse(10, 10, 100, 150);
end;
В данном случае выигрыш в объѐме программного кода скорее отсутствует, но наг лядность этого
примера в том, что он иллюстрирует принцип использования вложения.
Для задания цвета контура и заливки можно использовать собственное название именованного цвета
(см. Приложение 4. Обозначения цветов в шестнадцатеричной кодировке). Кроме того, цвет можно
задавать, используя шестнадцатеричный код цвета.
Для большинства систем программирования порядок цветов задаѐтся в виде RGB, т.е. на первом месте
(старший байт) стоит компонент красного цвета (Red), на втором – зелѐного (Green), на третьем – голубого
(Blue). В Delphi этот порядок – обратный, т.е. BGR. Следовательно, там, где в обычной ситуации, например в
HTML, красный цвет обозначается как $FF0000, то в Delphi – $0000FF.
5
Ещѐ один вариант, использовать функцию Delphi – RGB(<красный>, <зелѐный>, <голубой>), где
параметры функции <красный>, <зелѐный>, <голубой> – это десятичные числа от 0 до 255, обозначающие
интенсивность каждого из основных цветов, используемых в палитре.
Для любого компонента, где предусматривается использование цвета (шрифт, заливка фигуры, цвет контура
и т.д.) свойству Цвет можно задать значение любым из перечисленных способов. Например, для одного и
того же компонента задать красный цвет (или любой другой) можно следующим образом:
PaintBox1.Canvas.Brush.Color := clRed;//именованный цвет
или
PaintBox1.Canvas.Brush.Color := $0000FF;//шестнадцатеричный код
или
PaintBox1.Canvas.Brush.Color := RGB(255, 0, 0);//интенсивность каждого
компонента
Результат выполнения каждой из трѐх команд будет абсолютно одинаковым.
Задание свойства Color через диалоговое окно Цвет
Для задания цвета любого объекта, где предусмотрено свойство Color, вместо задания определѐнного цвета
можно использовать стандартную для Windows палитру компонентов в виде диалогового окна.
Для этого в проект необходимо добавить компонент ColorDialog из палитры компонентов Dialogs.
Данный компонент не является визуальным в проекте, он только лишь используется для вызова диалогового
окна Цвет. Для вызова диалогового окна используется метод Execute()
Для открытия диалогового окна цвет можно использовать процедуру, выполняющуюся по щелчку на
кнопке. При этом, например, выбранный цвет из диалогового окна Цвет должен быть назначен
заливке объекта Shape1. Программный код процедуры может иметь следующий вид:
ColorDialog1.Execute(); //открываем диалог Цвет
Shape1.Brush.Color := ColorDialog1.Color;
//объекту Shape1, его свойству Кисть (Brush) задаѐтся
//цвет, совпадающий с выбранным в ColorDialog1
6
Рисование многоугольников.
Для рисования двух объектов – многоугольника и ломаной линии (незамкнутый многоугольник) в
качестве точек используются объекты класса TPoint – стандартного для Delphi класса Точка. Этот
класс объектов для каждого своего объекта использует два параметра – координата X (абсцисса) и Y
(ордината). Для вычерчивания многоугольника по его вершинам в соответствующей процедуре
необходимо в качестве переменной объявить массив точек – одномерный массив, компонентами
которого являются объекты класса TPoint .
Например,
var
a: array [1..10] of TPoint;
В процедуре обращение к элементам этого массива производится с указанием имени массива и
компонента (свойства) – координаты. Например,
a[5].X := 250; //пятой точке присваивается абсцисса равная 250
a[5].Y := 120; //пятой точке присваивается ордината равная 120
После задания координат точек вычерчивание замкнутого многоугольника или незамкнутой ломаной
линии выполняется аналогично вызову метода рисования любого примитива, но параметром этого
метода будет имя массива точек. Например,
PaintBox1.Canvas.Polyline(a);//вычерчивание ломаной
Для вычерчивания замкнутых или незамкнутых контуров проще использовать эти два метода, однако,
не в каждой системе программирования может для этого оказаться подходящий метод. Более общим
является метод вычерчивания линейных контуров с помощью отдельных отрезков. Для рисования
каждого отдельного звена можно рисовать отрезок. Для этого используются два метода, выполняемых
последовательно для рисования одного отрезка:
MoveTo(X0, Y0); //помещает курсор в начальную точку для рисования отрезка
LineTo(X1, Y1); //рисует отрезок из точки с координатами (X0, Y0) в точку
с координатами (X1, Y1)
Для вычерчивания отдельных отрезков, концы которых не совпадают, эти два метода выполняются
последовательно попарно. Т.е. для каждого отдельного отрезка необходима пара таких команд.
Например, в форме или компоненте PaintBox для вычерчивания координатной сетки через
заданный шаг.
for j := 1 to k do
begin
with Canvas.Pen do
begin
Width := 1;
Color := clGreen;
Style := psDot;//штриховая линия
end;
with Canvas do
begin
MoveTo(5, dy*j); //рисование вертикальной линии
LineTo(PaintBox8.Width, dy*j); // с шагом dy
end;
end;
7
Метод базовой точки
При программировании сложных изображений, состоящих из множества элементов, используется
метод, который называется методом базовой точки. Суть этого метода заключается в следующем:
1. Выбирается некоторая точка изображения, которая принимается за базовую.
2. Координаты остальных точек отсчитываются от базовой точки.
В виде команд это может выглядеть следующим образом:
//Вычерчивание контура методом базовой точки
x0 := 10; y0 := 50;//задаѐм координаты базовой точки
with PaintBox.Canvas do
begin
Pen.Width := 2;
Pen.Color := clGreen;
MoveTo(x0, y0); //установка пера в начальную (базовую) точку
LineTo(x0 + 100, y0);//на 100 единиц по X, по Y – без изменений
LineTo(x0 + 200, y0 + 100);
LineTo(x0 + 200, y0 + 200);
LineTo(x0 + 300, y0 + 200);
LineTo(x0 + 400, y0 + 300);
LineTo(x0 + 400, y0 + 400);
LineTo(x0, y0);
end;
x
(x0, y0)
1
(x0 + 100, y0)
2
(x0 + 200, y0 + 100)
3
(x0 + 200, y0 + 200)
4
(x0 + 300, y0 + 200)
5
(x0 + 400, y0 + 300)
6
(x0 + 400, y0 + 400)
y
Метод
Pixels
Для рисования графиков функций можно использовать метод Pixels .
Поверхности, на которую программа может осуществлять вывод графики, соотве тствует объект
Canvas . Свойство Pixels , представляющее собой двумерный массив типа TColor , содержит
информацию о цвете каждой точки графической поверхности. Используя свойство Pixels , можно
задать требуемый цвет для любой точки графической поверхности, т. е. «нарисовать» точку.
Например, инструкция
Form1.Canvas.Pixels[10,10]:=clRed;
окрашивает точку поверхности формы с координатами X = 10, Y = 50 в красный цвет.
Используя уравнение функции, можно вычислить положение точки в произвольной системе
координат. Если считать исходную систему координат с осями OX и OY, используемую в компонентах,
базовой системой, то любая новая система координат с осями O’X’ и O’Y’ может быть использована
как относительная система координат. Относительную систему координат всегда выбирают таким
8
образом, чтобы вычисления координат точек в ней были максимально просты. Но построение точек в
любом случае необходимо выполнить в базовой системе координат. Для этого необходимо
координаты точки М в относительной (новой) системе координат преобразовать в координаты в
базовой (старой) системы. Если координаты начала новой системы координат в базовой системе
координат равны (x 0 , y 0 ), то связь между координатами можно выразить следующими уравнениями:
 x  x0  x

 y  y0  y
O
x
X
Y’
y0
y'
y
M(x, y)
M(x’, y’)
x0
x'
O’
X’
Y
В случае задания новой системы координат, в которой оси не будут параллельны осям базовой
системы координат, то уравнения преобразования будут иметь другой вид.
Вывод точечных изображений.
Для вывода точечных изображений в приложении используется компонент Image из палитры компонентов
Additional. Для вывода изображения в свойствах компонента Image используется свойство Pictures,
щелчком по которому вызывается диалоговое окно Picture Editor.
Кнопка Load позволяет в дальнейшем в окне проводника выбрать соответствующий диск, папку и файл
изображения.
9
Для использования в приложениях Delphi доступны точечные изображения в формате GIF, JPG, BMP, файлы
ярлыков ICO и векторные метафайлы в формате EMF и WMF.
В свойствах объекта Image для отображения изображения целиком необходимо задать два свойства,
которые позволяют автоматически масштабировать изображение:
Proportional – при значении True изображение автоматически масштабируется для отображения в
пределах компонента Image. При этом пропорциональность исходного изображения сохраняется при любом
изменении размера компонента Image.
Если размер изображения превышает размеры охватывающего прямоугольника компонента, а свойство
Stretch имеет значение False, то изображение будет урезано. Для контроля пропорционального
изменения ширины и высоты изображения при растяжении предусмотрено свойство Proportional,
указывающее, следует ли (значение True) сохранять изначальное соотношение ширины и высоты: Если
данная возможность используется, то изображение увеличивается до того момента, когда его ширина либо
высота достигнут, соответственно, ширины или высоты охватывающего прямоугольника компонента.
При перемещении проекта Delphi с использованием изображений на другой компьютер необходимо чтобы
графические файлы находились в той же папке, что и файлы проекта (или во вложенной папке).
10
Практическая часть.
Ход работы.
1. Создать новый проект.
2. Для окна проекта задать следующие свойства:

Размер формы: ширина – 700 пикселей, высота – 500 пикселей.

Заголовок формы – Лабораторная работа № 10.

Для предотвращения изменения размера окна указанные размеры задать в свойстве Constraints
формы.
3. С использованием компонентов сконструировать интерфейс программы.
В форме использовать элемент управления
PageControl с тремя вкладками.
Задание 1.
На вкладке Примитивы разместить объект Shape в свойствах которого задать: тип фигуры – прямоугольник,
положение, ширину и высоту прямоугольника задать самостоятельно в конструкторе. Ширину задать больше,
чем высоту.
Для изменения параметров фигуры использовать группы переключателей, кнопки и счѐтчик.
Для изменения цвета контура и цвета заливки использовать диалоги ColorDialog. По щелчку по
соответствующей кнопке процедура может иметь соответствующий вид:
ColorDialog1.Execute();
Shape1.Brush.Color := ColorDialog1.Color;
Задание 2.
11
Во вкладке Точечные изображения необходимо вставить точечное изображение в компоненте Image и
настроить его свойство для отображения всего изображения в целом. Для примера использовать изображение
небольшого размера в пикселях – 200–300 точек. Для задания размеров изображения в программе
необходимо с помощью группы переключателей задать 3–4 различных размера, но с пропорцией,
соответствующей пропорции исходного изображения. Например, размер исходного изображения 300*200
пикселей, тогда размеры в списке группы переключателей могут быть 150*100, 75*50 и т.д.
12
Задание 3.
Используя метод базовой точки, а так же рисование контуров в виде окружностей, прямоугольников, во
вкладке Метод базовой точки создать сложный контур, состоящий из 12–15 точек. Для рисования добавить
компонент PaintBox и использовать его событие onPaint.
Пример процедуры рисования контура методом базовой точки.
procedure TForm1.PaintBox1Paint(Sender: TObject);
var x0, y0: integer;
begin
x0 := 15; y0 := 15;
//Метод базовой точки для
//сложного контура
with PaintBox1.Canvas do
begin
Pen.Color := RGB(200,
Pen.Width := 2;
MoveTo(x0, y0);
LineTo(x0 + 40, y0);
LineTo(x0 + 140, y0 +
LineTo(x0 + 180, y0 +
LineTo(x0 + 220, y0 +
LineTo(x0 + 180, y0 +
LineTo(x0 + 140, y0 +
LineTo(x0 + 140, y0 +
LineTo(x0 + 100, y0 +
LineTo(x0 + 100, y0 +
LineTo(x0 , y0 + 40);
LineTo(x0 , y0);
Ellipse(x0 + 15, y0 +
рисования
100, 50);
100);
100);
140);
140);
180);
220);
180);
140);
15, x0 + 30, y0 + 30);
end;
end;
В результате построения получается контур следующего вида:
Для изменения положения контура в целом достаточно в процедуре изменит координаты базовой точки.