Методические указания к лабораторной работе №6
4.1. Класс ТCanvas. Delphi позволяет программисту разрабатывать программы, которые могут выводить графику: схемы, чертежи, иллюстрации. Работа с графикой в Delphi предполагает обращение к свойству Canvas компонентов. Конечно, не все компоненты имеют эти свойство. В палитре Additionalрасположен компонент Image, специально предназначенный для рисования, но также свойство Canvasимеют, например, такие компоненты как ListBox, ComboBox, StringGrid, а также и сама Форма, которая размещает компоненты. В свою очередь, свойство Canvas - это объект типа TCanvas. Методы этого типа обеспечивают вывод графических примитивов (точек, линий, окружностей, прямоугольников и т.д.), а свойства позволяют задать характеристики выводимых графических примитивов: цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выводе текстовой информации. Методы вывода графических примитивов рассматривают свойство Canvas как некоторый абстрактный холст, на котором они могут рисовать (Canvas переводится как «поверхность», «холст для рисования»).
Холст состоит из отдельных точек — пикселей. Положение пикселя характеризуется его горизонтальной (X) и вертикальной (Y) координатами. Левый верхний пиксель имеет координаты (0, 0). Координаты возрастают сверху вниз и слева направо (рис. 6). Значения координат правой нижней точки холста зависят от размера холста.
Рис. 6
Свойства класса TCanvas перечислены в табл 13.
Таблица 13
| Свойство | Описание |
| Pen | Перо. Определяет цвет, стиль и толщину линии, которую рисует, например метод Lineto |
| PenPos | Положение (координаты) пера |
| Brush | Кисть. Определяет цвет и стиль закраски области, например прямоугольника, который рисует метод Rectangle. |
| Font | Шрифт. Определяет шрифт, который используется для вывода текста, например методом TextOut. |
| Pixels | Массив пикселей канвы |
Рисование на канве происходит в момент присвоения какой-либо точке канвы заданного цвета. Каждому пикселю может быть присвоен любой доступный для Windows цвет.
Например:
Image1.Canvas.Pixels[100,100]:= clRed;
приведёт к рисованию красной точки с координатами [100,100]. Узнать цвет пикселя можно обратным присвоением
Color:= Image1.Canvas.Pixels[100,100];
Конечно, рисовать попиксельно для работы с графикой в Delphi приходится редко, система Delphi предоставляет мощные средства работы с графикой, облегчающие задачу программиста.
4.2. Класс ТPen. С помощью класса TPen создается объект-перо, служащий для вычерчивания линий. В табл. 14 перечислены свойства класса.
Таблица 14
| Свойство | Описание |
| Color | Цвет вычерчиваемых пером линий |
| Width | Толщина линии (задается в пикселях) |
| Style | Вид линии: psSolid - сплошная; psDash - пунктирная, длинные штрихи; psDot - пунктирная, короткие штрихи; psDashDot - пунктирная, с чередованием длинного и короткого штрихов; psDashDotDot - пунктирная с чередованием одного длинного и двух коротких штрихов; psClear - линия не отображается (используется, если не надо изображать границу области, например, прямоугольника) Стиль учитывается только для линий, толщиной 1 пиксель. Для толстых линий стиль всегда psSolid - сплошная |
| Mode | Способ взаимодействия линий с фоном (см. ниже) |
Свойство Mode определяет, как будет формироваться цвет точек линии в зависимости от цвета точек холста, через которые эта линия прочерчивается. По умолчанию вся линия вычерчивается цветом, определяемым значением свойства Pen.Color, однако программист может задать инверсный цвет линии по отношению к цвету фона. Это гарантирует, что независимо от цвета фона все участки линии будут видны, даже в том случае, если цвет линии и цвет фона совпадают. Свойство Mode может принимать одно из следующих значений:
pmBlack - черный, не зависит от значения свойства Pen.Color;
pmWhite - белый, не зависит от значения свойства Pen.Color;
pmCopy - цвет линии определяется значением свойства Pen.Color;
pmNotCopy - цвет линии является инверсным по отношению к значению свойства Pen.Color;
pmNot - цвет точки линии определяется как инверсный по отношению к цвету точки холста, в которую выводится точка линии;
pmNotXor - сложение с фоном по инверсному исключающему ИЛИ. Если задан этот режим, то повторное рисование той же фигуры на том же месте канвы убирает ранее нарисованное изображение и восстанавливает цвета пикселей, которые были до первого изображения фигуры.
4.3. Класс ТBrush. Объекты класса ТBrush (Кисти) служат для заполнения внутреннего пространства замкнутых фигур. В табл. 15 представлены свойства класса.
Таблица 15
| Свойство | Описание |
| Bitmap | Содержит растровое изображение, которое будет использоваться кистью. Если это свойство определено, свойства Color и Style игнорируются |
| Color | Цвет закраски замкнутой области. |
| Style | Стиль закраски области: bsSolid - сплошная заливка; bsclear – прозрачная заливка; штриховка: bsHorizontal - горизонтальная; bsVertical - вертикальная; bsFDiagonal - диагональная с наклоном линии вперед; bsBDiagonal - диагональная с наклоном линии назад; bsCross - диагональная клетка. |
Область внутри контура может быть закрашена или заштрихована. В первом случае область полностью перекрывает фон, а во втором - сквозь незаштрихованные участки области будет виден фон. Свойство Color определяет цвет узора кисти, но не цвет фона: цвет фона выбирается автоматически так, чтобы линии узора контрастировали с фоном. На рис. 7 представлены стили заполнения областей.
Рис. 7. Стили заполнения областей
4.4. Класс ТFont. С помощью класса ТFont создается объект-шрифт для любого графического устройства. Свойства класса перечислены в табл. 16.
Таблица 16
| Свойство | Описание |
| Name | Шрифт, который используется для отображения текста. В качестве значения следует брать название шрифта, например, Arial. По умолчанию имеет значение MS Sans Serif |
| Height | Высота в пикселях |
| Size | Размер шрифта в пунктах (1/72 дюйма) |
| Style | Стиль начертания символов. Задается с помощью констант: fsBold (полужирный), fsItalic (курсив), fsUnderline (подчеркнутый), fsStrikeOut (перечеркнутый). Свойство Style является множеством, что позволяет комбинировать необходимые стили. Например, инструкция, которая устанавливает стиль «полужирный курсив», выглядит так: Font.Style:= [fsBold, fsItalic] |
| Pitch | Способ расположения букв в слове: fpFixed – моноширинный текст, fpVariable – пропорциональный текст, fpDefault – ширина шрифта по умолчанию |
| Color | Цвет символов. В качестве значения можно использовать константу типа TColor. |
Вывод текста реализуется методом TextOut канвы, которому передаются координаты левого верхнего угла надписи и текст. Инструкция вызова метода TextOut в общем виде выглядит следующим образом:
Объект.Canvas.TextOut(x, у, Текст)
где:
· Объект – имя объекта, на поверхность которого выводится текст;
· х, у –координаты точки графической поверхности, от которой выполняется вывод текста (рис. 8);
· Текст –переменная или константа символьного типа, значение которой определяет выводимый методом текст.
Рис. 8. Координаты области вывода текста
Шрифт, который используется для вывода текста, определяется значением свойства Font соответствующего объекта Canvas. Область вывода текста закрашивается текущим цветом кисти. Поэтому перед выводом текста свойству Brush.Color нужно присвоить значение bsClear или задать цвет кисти, совпадающий с цветом поверхности, на которую выводится текст.
4.5. Свойство Color. Цвет линии (свойство Pen.Color) или цвет закраски области (свойство Brush.Color) можно задать, указав в качестве значения свойства именованную константу типа TColor (табл. 17).
Таблица 17
| Константа | Цвет | Константа | Цвет |
| clBlack | Черный | clSilver | Серебристый |
| clMaroon | Каштановый | clRed | Красный |
| clGreen | Зеленый | clLime | Салатовый |
| clOlive | Оливковый | clBlue | Синий |
| clNavy | Темно-синий | clFuchsia | Ярко-розовый |
| clPurple | Фиолетовый | clAqua | Бирюзовый |
| clTeal | Зелено-голубой | clWhite | Белый |
| clGray | Серый | clYellow | Желтый |
4.6. Методы класса TCanvas представлены в табл. 18.
Таблица 18
| Метод | Действие |
| MoveTo((x,y) | Перемещает точку начала рисования линии в указанные координаты x и y |
| Lineto(x, y) | Рисует линию из текущей точки в точку с указанными координатами (перемещение указателя текущей точки в нужную обеспечивает метод Moveto). Цвет линии определяется свойством Pen.Color. |
| Rectangle(x1,y1,x2, y2) | Рисует прямоугольник. Параметры x1, y1указывают координаты верхней левой точки, а x2, y2 координаты нижней правой точки. Цвет границы прямоугольника определяет свойство Pen.Color, цвет закраски области ― свойство Brush.Color. |
| RoundRect(x1,y1, x2,y2,x3,y3) | Рисует прямоугольник со скругленными углами. Параметры x1, y1 указывают координаты верхней левой точки, x2, y2 - координаты нижней правой точки, а x3, y3 - радиус скругления. Цвет границы прямоугольника определяет свойство Pen.Color, цвет закраски области - свойство Brush.Color. |
| Ellipse(x1, y1, x2, y2) | Рисует эллипс (окружность). Параметры x1, y1указывают координаты верхней левой точки, а x2, y2 координаты нижней правой точки прямоугольника, в который вписан эллипс. Цвет границы прямоугольника определяет свойство Pen.Color, цвет закраски области - свойство Brush.Color (рис. 9, а, б). |
| Arc(x1,y1,x2,y2,x3,y3,x4,y4) | Рисует дугу. Параметры x1, y1, x2 и y2 задают эллипс, частью которого является дуга, параметры x3,y3,x4 и y4 - начальную и конечную точку дуги. Цвет дуги определяет свойство Pen.Color (рис.9, в, г). |
| Pie(x1,y1,x2,y2,x3,y3,x4,y4) | Рисует сектор. Параметры x1, y1, x2 и y2 задают эллипс, частью которого является сектор, параметры x3, y3, x4 и y4 - границы сектора. Цвет границы сектора определяет свойство Pen.Color, цвет закраски сектора - свойство Brush.Color (рис. 9, д, е). |
| FillRect(aRect) | Рисует закрашенный прямоугольник. Параметр aRect (тип TRect) определяет положение и размер прямоугольника. Цвет закраски области определяет свойство Brush.Color. |
| FrameRect(aRect) | Рисует контур прямоугольника. Параметр aRect (тип TRect) определяет положение и размер прямоугольника. Цвет контура определяет свойство Brush.Color. |
| Polyline(points, N) | Рисует ломаную линию. Points - массив типа TPoint. Каждый элемент массива представляет собой запись, поля X и Y, которые содержат координаты точки перегиба ломаной. N - количество звеньев ломаной. Метод Polyline вычерчивает ломаную линию, последовательно соединяя точки, координаты которых находятся в массиве: первую со второй, вторую с третьей, третью с четвертой и т.д. |
| TextOut(X, Y, Text) | Производит вывод строки Text, начиная с (X, Y) - левого верхнего пикселя текста |
| TextWidth(Text) | Содержит длину строки Text в пикселях |
| TextHeight(Text) | Содержит высоту строки Text в пикселях |
Вычерчивание графических примитивов на графической поверхности, например компонента Image выполняют соответствующие методы класса TCanvas.Инструкция, обеспечивающая вычерчивание графического элемента, в общем виде выглядит так
Объект.Canvas.Метод (Параметры);
Объект определяет объект, на поверхности которого нужно нарисовать графический элемент. В качестве объекта можно указать компонент Image1. Метод – это имя метода, который обеспечивает рисование нужного графического элемента.
Параметры, в большинстве случаев, определяют положение графического элемента на графической поверхности и его размер.
Например, в результате выполнения инструкции:
Image1.Canvas.Rectangle(10, 20, 60, 40)
В поле компонента Image1 будет нарисован прямоугольник шириной 50 и высотой 20 пикселей, левый верхний угол которого будет находиться в точке (10,20).
| а |
| б |
| д |
| е |
| г |
| в |
Рис. 9
При записи инструкций, обеспечивающих вывод графики, удобно использовать оператор with, который позволяет сократить количество набираемого кода. Например, вместо
Image1.Canvas.Brush.Color:= clWhite;
Image1.Canvas.Rectangle(20,20,46,70);
Image1.Canvas.Brush.Color:= clBlue;
Image1.Canvas.Rectangle(45,20,71,70);
Image1.Canvas.Brush.Color:= clRed;
Image1.Canvas.Rectangle(70,20,96,70);
Image1.Canvas.Brush.Style:= bsClear;
Image1.Canvas.Font.Name:='Tahoma';
Image1.Canvas.Font.Size:=10;
x:=20+(75- Image1.Canvas.TextWidth('Россия')) div 2;
Image1.Canvas.Textout(x,70+Font.Size,'Россия');
Можно написать вот так
With Image1.Canvas do
Begin
Brush.Color:= clWhite;
Rectangle(20,20,46,70);
Brush.Color:= clBlue;
Rectangle(45,20,71,70);
Brush.Color:= clRed;
Rectangle(70,20,96,70);
Brush.Style:=bsClear;
Font.Name:='Tahoma';
Font.Size:= 10;
x:=20+(75- TextWidth('Россия')) div 2;
Textout(x,70+Font.Size,'Россия');
End;
Результаты работы программы представлены на рис. 10.
Рис. 10
Ниже представлен пример, который рисует случайным образом различные фигуры.
const NUM_SHAPES=50;
procedure TForm1.Button1Click(Sender: TObject);
var i, ShapeLeft, ShapeTop: Integer;
begin
randomize;
for i:= 0 to NUM_SHAPES - 1 do
begin
Canvas.Brush.Color:=
RGB(Random(256), Random(256), Random(256));
ShapeLeft:= Random(ClientWidth);
ShapeTop:= Random(ClientHeight);
// теперь, случайным образом, решаем что рисовать
case Random(3) of
0: Canvas.Rectangle(ShapeLeft, ShapeTop,
ShapeLeft + Random(50),
ShapeTop + Random(50));
1: Canvas.Ellipse(ShapeLeft, ShapeTop,
ShapeLeft + Random(50),
ShapeTop + Random(50));
2: begin Canvas.Font.Size:= 8;
Canvas.TextOut (ShapeLeft, ShapeTop, 'Some text');
end;
end;
end;
end;
Результат работы программы представлен на рис. 11.
Рис. 11
В программе использована функция RGB, представляющая цвет заливки каждой фигуры из трех основных составляющих: красного, зелёного и синего (значения от 0 до 255) и возвращающая цвет в виде TColor.
Особенность режима pmNotXor (сложение с фоном по инверсному исключающему ИЛИ), т.е. повторное рисование той же фигуры на том же месте канвы убирает ранее нарисованное изображение и восстанавливает цвета пикселей, можно использовать для создания простой анимации. Достаточно нарисовать что-либо, затем стереть нарисованное, перерисовать немного измененным – и рисунок будет представляться ожившим.
Для создания простой мультипликации – движущейся окружности, необходимо в раздел Implementation вставить объявление переменных
var X,Y: integer;
В обработчик события формы OnPaint надо вставить операторы:
Canvas.Brush.Color:= clWhite;
Color:= clWhite;
Canvas.Pen.Mode:= pmNotXor;
Первый из этих операторов задает белый цвет кисти Brush. Следовательно, окружность будет закрашена внутри белым цветом. Второй оператор задает белый цвет фона поверхности формы. Третий оператор устанавливает режим пера pmNotXor, который позволит стирать прежнее изображение прежде, чем нарисовать новое.
Даже самая простая мультипликация нуждается в синхронизации, иначе скорость движения будет определяться быстродействием компьютера. Поэтому надо перенести на форму компонент Timer – таймер с палитры System, задать его свойство Interval равным, например, 30 и установить свойство Enabled равным False (это означает, что таймер не будет запускаться автоматически в момент запуска приложения).
В обработчик события этого компонента OnTimer необходимо вставить операторы:
Canvas.Ellipse(Х-5, Y, X+5, Y-10); // Стирание прежнего изображения
Inc(X);
Canvas.Ellipse(Х-5, Y, X+5, Y-10); // Рисование нового изображения
If (X >= ClientWidth-20) Then // Останов при достижении конца формы
Timer1.Enabled:= False;
Первый из этих операторов рисует окружность в том месте, где она была нарисована ранее, т.е. стирает прежнее изображение. Далее увеличивается на единицу функцией Inc текущая координата X и изображение окружности рисуется в новой позиции. Последний оператор останавливает изображение у края формы.
Далее надо перенести на форму кнопку Button1 и в обработчик щелчка на ней поместить операторы:
Х:=10; Y:=100;
Canvas.Ellipse(X-5, Y, X+5, Y-10);
Timer1.Enabled:=True;
Первые два оператора задают начальные координаты окружности. Третий оператор рисует окружность в ее начальном положении, а четвертый – запускает таймер.
Результатом работы программы является изображение окружности, перемещающееся по форме слева направо.
4.7. Рисование мышкой. Достаточно часто представляет интересобычное рисование мышкой на форме или каком-либо компоненте, например, Image.
Для организации рисования мышкой на компоненте Image1 требуется три последовательных события и, соответственно три обработчика этих событий.
Первое событие «Нажать кнопку мыши». В обработчике события onMouseDown надо записать следующие операторы:
Drug:=True; //Устанавливанием, что движение должно быть
Image1.Canvas.MoveTo(X,Y); //Устанавливаем координаты начала рисования
В этом обработчике
procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
имеются параметры X и Y типа Integer – это координаты текущего указателя мыши на форме. Именно они передаются в метод MoveTo(X,Y) объекта Canvas, т.е. данным методом устанавливаются координаты, с которых начнется рисование на компоненте Image1.
Второе событие «Движение мыши». В обработчике события onMouseMove надо записать следующие операторы:
If Drug Then Image1.Canvas.LineTo(X,Y);
LineTo(X,Y) рисует линию от предыдущей точки к текущей, здесь передаваемые X и Y будут уже другими, т.к. указатель мыши уже на другой точке компонента Image1 после перемещения.
Третье событие «Отпускаем кнопку мыши». В обработчике события onMouseUp надо записать следующие операторы:
Drug:=False; //Устанавливаем, что движения не должно быть
Переменная Drug должна быть описана как глобальная для всего модуля в интерфейсной части в разделе Var следующим образом: Drug:Boolean. Эта переменная принимает значение True, если движение есть, и False в противном случае.
4.8. Компонент Shape (класс TShape, палитра Additional) предназначен для отображения одной из простейших геометрических фигур: прямоугольника, квадрата, скругленного прямоугольника, скругленного квадрата, эллипса, окружности (рис. 12). Любая из перечисленных геометрических фигур выводится в прямоугольник, задаваемый свойствами Left, Top (координаты левого верхнего угла прямоугольника) и Width, Height (размеры прямоугольника). Фигура полностью занимает все пространство компонента. Если задан квадрат или круг, а размеры элемента по горизонтали и вертикали отличаются, фигура чертится с размером меньшего измерения.
Рис. 12
Свойства компонента Shape приведены в табл. 19 и рис. 13.
Таблица 19
| Свойство | Описание |
| Brush | Кисть, определяющая способ заливки области фигуры: |
| Pen | Перо, определяющее способ рисования границ фигуры |
| Shape | Вид геометрической фигуры, которая вписана в прямоугольную область компонента. Возможны следующие значения: stCircle – окружность; stEllipse – эллипс; stRectangle - прямоугольник; stRoundRect – прямоугольник со скругленными углами; stSquare – квадрат; stRoundSquare – квадрат со скруглёнными углами. |
Рис. 13
4.9. Компонент Chart (класс TChart, палитра Additional) предназначен для графического представления числовых данных (в последних версиях Delphi этот компонент находится в палитре Tee Chart Std).
Пример. Построить график функции Y = Х2 на отрезке [-30,30].
Сначала необходимо поместить компонент Chart1 на форму (рис.14).
Рис. 14
После щелчка на нем правой кнопкой мыши вызывается контекстное меню компонента, которое в числе прочих содержит команду Edit Chart – с помощью этой команды вызывается многостраничное окно редактора компонента. Вкладка Series этого окна открывает доступ к так называемым сериям – объектам класса TChartSeries, которые и будут отображать наборы чисел в графическом виде. Чтобы отобразить данные, нужно создать как минимум одну серию – для этого следует в окне редактора щелкнуть на кнопке Add и выбрать подходящий тип диаграммы (рис. 15).
Рис. 15
После выбора типа диаграммы и закрытия окна редактора в компоненте Chart1 на форме отображается ее вид с занесенными в нее условными данными (см. рис. 16), поэтому сразу можно наблюдать результат применения различных опций к приложению, что очень удобно. Страница Series, также имеющая ряд вкладок, дает возможность выбрать дополнительные характеристики отображения серии:
· Titles - определяет заголовок диаграммы;
· Legend - определяет внешний вид и содержание легенды;
· Axis - регулируют настройку координатных осей, заголовков, их масштаб, шаг пунктирной сетки и многое другое;
· Panel - задает оформление панели основы: цвет и форму границы панели (можно сделать так, что диаграмма будет расположена на панели имеющей градиентную заливку);
· Walls - определяет цвет и границы диаграммы;
· 3d - разрешает или запрещает трехмерное отображение диаграммы.
Рис. 16
Для построения параболы Y = Х2 целесообразно снять флажок с пункта 3 Dimension для того, чтобы убрать трехмерное отображение графика. Затем надо перейти к вкладке Legend и снять флажок с пункта Visible. На вкладке Titles в текстовом поле надо набрать следующее: «Парабола Y = х*х» и установить нужный цвет, размер и начертание заголовка.
Для задания отображаемых значений используются методы серии Series. Остановимся только на трех основных методах.
· Метод Clear очищает серию от занесенных ранее данных.
· Метод Add:
Add(Const AValue: Double; Const ALabel: String; AColor: TColor)
позволяет добавить в диаграмму новую точку. Параметр AValue соответствует добавляемому значению, параметр ALabel - название, которое будет отображаться на диаграмме и в легенде, AColor - цвет. Параметр ALabel - не является обязательным, его можно задать пустым: ''.
· Метод AddXY:
AddXY(Const AXValue, AYValue: Double;Const ALabel: String; AColor: TColor)
позволяет добавить новую точку в график функции. Параметры AXValue и AYValue соответствуют аргументу и функции. Параметры ALabel и AColor те же, что и в методе Add.
Таким образом, процедура, предназначенная для построения графика, может иметь вид:
procedure TForm1.Button1Click(Sender: TObject);
var x: integer;
begin
Series1.clear; //Очистка
for x:=-30 to 30 do
Series1.AddXY(x, x*x, '', clBlue);
end;
Результат работы программы представлен на рис. 17.
Рис. 17
Чтобы сделать программу более универсальной, можно задавать левую и правую границы отрезка, а также шаг вычисления функции с использованием компонента Edit.
Построенный график можно сохранить в графический файл. Для этого надо в коде процедуры записать:
Chart1.SaveToBitmapFile('graphic.bmp');
После запуска процедуры с данным оператором в папке проекта будет файл с указанным именем. Этот файл можно открыть с помощью какого-либо графического редактора, например, Paint.
Компонент Chart является контейнером объектов Series типа TChartSeries - серий данных, характеризующихся различными стилями отображения. Каждый компонент Chart может включать несколько серий. При выборе диаграммы типа Line, каждая серия будет соответствовать одной кривой на графике. Для добавления новой серии надо нажать кнопку Add в окне Editting Chart1, а для ввода названия серии - кнопку Title.