Графика в Делфи
Цель работы:
Ознакомление с графическими средствами среды программирования Delphi и разработка в ней простейших графических программ. Ознакомление с работой таймера.
Порядок выполнения работы:
Изучить теоретический материал по теме.
Рассмотреть и изучить приведенные в Приложении примеры программ с использованием графики («Заставка», «Луна», «Диаграмма»).
Доработать приложения-примеры в соответствии с вариантом, который укажет преподаватель или по своему усмотрению.
Оформить отчет.
Содержание отчета:
Отлаженные приложения со всеми необходимыми комментариями.
Набор тестов, выполнение которых подтверждено копиями выходных документов.
В результате выполнения лабораторной работы студент должен продемонстрировать преподавателю готовый проект, файл формы и исходный код модуля.
Примечание: домашние и/или лабораторные задания предъявляются в указанный срок в виде отчета и оцениваются. При неготовности в срок выставляется неудовлетворительная оценка, которая не может быть исправлена. Работа оценивается по защите отчета. К отчету должен быть приложен файл со всеми разработанными программами, процедурами, главной программой и модулем. Все предъявляемые программы должны быть работоспособными. Защита не может состояться как без наличия отчета, так и файла. Отчет и файл должен быть сохранен до экзамена. Все текущие оценки учитываются при определении формы и содержания экзамена студента.
Теоретические сведения
Свойство Canvas
Поверхности, на которую программа может выводить графику, соответствует свойство Canvas. Например, свойство Canvas имеют компоненты Form и PaintBox. В свою очередь, свойство canvas – это объект типа TCanvas. Методы этого типа обеспечивают вывод графических примитивов (точек, линий, окружностей, прямоугольников и т. д.), а свойства позволяют задать характеристики выводимых графических примитивов: цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выводе текстовой информации.
Методы вывода графических примитивов рассматривают свойство Canvas как некоторый абстрактный холст, на котором они могут рисовать (canvas переводится как "поверхность", "холст для рисования"). Канва состоит из отдельных точек – пикселей. Положение пикселя характеризуется его горизонтальной (X) и вертикальной (Y) координатами. Левый верхний пиксель имеет координаты (0, 0). Координаты возрастают сверху вниз и слева направо. Значения координат правой нижней точки холста зависят от размера холста.
Размер канвы можно получить, обратившись к свойствам Height и Width области иллюстрации (image) или к свойствам формы: ClientHeight и Clientwidth.
Для рисования на Canvas геометрических фигур используются методы, приведённые в следующей таблице:
Наименование |
Рисование |
Arc |
Дуги |
Chard |
Хорды эллипса |
Ellipse |
Эллипса |
FillRect |
Заполненного прямоугольника |
FrameRect |
Незаполненного прямоугольника |
MoveTo |
Перемещение пера без прорисовки линии |
LineTo |
Линии |
Poligon |
Заполненного многоугольника |
PolyLine |
Незаполненного многоугольника |
Rectangle |
Заполненного прямоугольника |
RoundRect |
Заполненного прямоугольника со скруглёнными краями |
Вид выводимых на канву графических элементов определяется свойствами канвы Pen (карандаш) и Brush (кисть). Свойство Pen отвечает за внешний вид вычерчиваемых линий и контуров, свойство Brush – за заливку областей, ограниченных контурами.
На канву можно также загрузить изображение из файла либо вывести на неё текст. Канва имеет свойство Pixels. Это свойство представляет собой двумерный массив, который отвечает за цвета канвы. Например, Canvas.Pixels[10,20] соответствует цвету пикселя, 10-го слева и 20-го сверху. С массивом пикселей можно обращаться как с любым свойством: изменять цвет, задавая пикселю новое значение, или определять его цвет по хранящемуся в нем значению. Например, Canvas.Pixels[10,20] := 0 или Canvas.Pixels[10,20] := clBlack – это задание пикселю черного цвета.
Свойство Pixels можно использовать для рисования на канве.
Pen (карандаш)
Карандаш используется для вычерчивания точек, линий, контуров геометрических фигур. Вид линии, которую оставляет карандаш на поверхности холста, определяют свойства, которые перечислены в следующей таблице:
Свойство |
Назначение |
Color |
Цвет линии |
Width |
Толщину линии |
Style |
Вид линии |
Mode |
Режим отображения |
Свойство Color задает цвет линии, вычерчиваемой карандашом. Существуют именованные константы, которые можно использовать в качестве значения свойства Color.
Свойство Width задает толщину линии (в пикселях). Например, инструкция Canvas. Pen. Width: =2 устанавливает толщину линии в 2 пикселя.
Свойство Style определяет вид (стиль) линии, которая может быть непрерывной или прерывистой, состоящей из штрихов различной длины. Толщина пунктирной линии не может быть больше 1. Если значение свойства Pen.Width больше единицы, то пунктирная линия будет выведена как сплошная. В следующей таблице перечислены именованные константы, позволяющие задать стиль линии:
Константа |
Вид линии |
psSolid |
Сплошная линия |
psDash |
Пунктирная линия, длинные штрихи |
psDot |
Пунктирная линия, короткие штрихи |
psDashDot |
Пунктирная линия, чередование длинного и короткого штрихов |
psDashDotDot |
Пунктирная линия, чередование одного длинного и двух коротких штрихов |
psClear |
Линия не отображается (используется, если не надо изображать границу области, например, прямоугольника) |
Свойство Mode определяет, как будет формироваться цвет точек линии в зависимости от цвета точек холста, через которые эта линия прочерчивается. По умолчанию вся линия вычерчивается цветом, определяемым значением свойства Pen.Color.
Однако программист может задать инверсный цвет линии по отношению к цвету фона. Это гарантирует, что независимо от цвета фона все участки линии будут видны, даже в том случае, если цвет линии и цвет фона совпадают.
В следующей таблице перечислены некоторые константы, которые можно использовать в качестве значения свойства Pen.Mode:
Константа |
Цвет линии |
pmBlack |
Черный, не зависит от значения свойства Pen. Color |
pmWhite |
Белый, не зависит от значения свойства Pen. Color |
pmCopy |
Цвет линии определяется значением свойства Pen. Color |
pmNotCopy |
Цвет линии является инверсным по отношению к значению свойства Pen. Color |
pmNot |
Цвет точки линии определяется как инверсный по отношению к цвету точки холста, в которую выводится точка линии |
Brush (кисть)
Кисть используется методами, обеспечивающими вычерчивание замкнутых областей, например геометрических фигур, для заливки (закрашивания) этих областей. Кисть обладает двумя свойствами, представленными в следующей таблице:
Свойство |
Назначение |
Color |
Цвет закрашивания замкнутой области |
Style |
Стиль (тип) заполнения области |
Область внутри контура может быть закрашена или заштрихована. В первом случае область полностью перекрывает фон, а во втором - сквозь незаштрихованные участки области будет виден фон.
В качестве значения свойства Color можно использовать некоторые именованные константы, перечисленные в следующей таблице:
Константа |
Тип заполнения (заливки) области |
bsSolid |
Сплошная заливка |
bsClear |
Область не закрашивается |
bsHorizontal |
Горизонтальная штриховка |
bsVertical |
Вертикальная штриховка |
bsFDiagonal |
Диагональная штриховка с наклоном линий вперед |
bsBDiagonal |
Диагональная штриховка с наклоном линий назад |
bsCross |
Горизонтально-вертикальная штриховка, в клетку |
bsDiagCross |
Диагональная штриховка, в клетку |
Вывод текста
Для вывода текста на поверхность графического объекта используется метод TextOut. Инструкция вызова метода TextOut в общем виде выглядит следующим образом: Объект.Canvas.TextOut(x, у, Текст), где:
объект – имя объекта, на поверхность которого выводится текст;
х, у – координаты точки графической поверхности, от которой выполняется вывод текста;
текст – переменная или константа символьного типа, значение которой определяет выводимый методом текст.
Шрифт, который используется для вывода текста, определяется значением свойства Font соответствующего объекта Сanvas. Свойство Font представляет собой объект типа TFont. В следующей таблице перечислены свойства, позволяющие задать характеристики шрифта, используемого методами TextOut и TextRect для вывода текста:
Свойство |
Назначение |
Name |
Используемый шрифт. В качестве значения следует использовать название шрифта, например Arial |
Size |
Размер шрифта в пунктах (points). Пункт – это единица измерения размера шрифта, используемая в полиграфии. Один пункт равен 1/72 дюйма |
Style |
Стиль начертания символов. Может быть: нормальным, полужирным, курсивным, подчеркнутым, перечеркнутым. Стиль задается при помощи следующих констант: fsBold (полужирный), fsltalic (курсив), fsUnderline (подчеркнутый), fsStrikeOut (перечеркнутый). Свойство Style является множеством, что позволяет комбинировать необходимые стили. Например, инструкция программы, устанавливающая стиль "полужирный курсив", выглядит так: Объект. Canvas . Font : = [fsBold, fs Italic] |
Color |
Цвет символов. В качестве значения можно использовать именованную константу |
Область вывода текста закрашивается текущим цветом кисти. Поэтому перед выводом текста свойству Brush.Color нужно присвоить значение bsClear или задать цвет кисти, совпадающий с цветом поверхности, на которую выводится текст.
Компонент Chart
Компонент Chart позволяет строить различные диаграммы и графики.
Chart является контейнером объектов Series типа TChartSeries – серий данных, характеризующихся различными стилями отображения. Каждый компонент может включать несколько серий. Если отобразить график, то каждая серия будет соответствовать одной кривой на графике. Если нужно отображать диаграммы, то для некоторых видов диаграмм можно наложить друг на друга несколько различных серий. Всегда можно задать для одного компонента Chart несколько серий одинаковых данных с разным типом диаграммы. Тогда, делая в каждый момент времени активной одну из них, можно предоставить пользователю выбор типа диаграммы, отображающей интересующие его данные.
Для использования компонента Chart надо поместить его на форме и настроить требуемое количество кривых. Для настройки компонента используют Редактор диаграмм. Вызвать редактор можно двойным щелчком на компоненте, с помощью контекстного меню компонента или щелчком на одном из свойств компонента, имеющих многоточие в поле значения. Вид редактора представлен на следующем рисунке:
Редактор состоит из двух вкладок: Chart и Series, каждая из которых также обладает некоторым набором вкладок со средствами для установки параметров компонента Chart.
Назначение некоторых вкладок страницы Chart редактора диаграмм:
Название вкладки |
Назначение |
Series |
управление сериями кривых |
General |
основные параметры, в том числе Zoom, позволяет во время выполнения приложения изменить масштаб фрагмента кривой |
Axis |
настройка осей графика |
Title |
текст над и под рисунком, в том числе их шрифт, бордюр и фон |
Legend |
вывод легенды кривых, в том числе состав и место вывода легенды |
Panel |
настройка панели для вывода кривых, в том числе параметры рамки и цвет фона панели |
Walls |
настройка «стен» – плоскостей вдоль осей |
3D |
настройка трёхмерного изображения диаграммы |
Назначение кнопок вкладки Series, принадлежащей вкладке Chart
Название вкладки |
Назначение |
Add |
добавить серию в компонент |
Delete |
удалить выбранную серию |
Title |
установить наименование серии (вместо Series i, заданного по умолчанию) |
Clone |
дополнить компонент серией, идентичной выбранной серии |
Change |
Изменить тип вывода серии |
Для выбора нового типа (кнопка Add) и изменения типа имеющейся серии (кнопка Change) вызывается окно TeeChart Gallery. Оно содержит пиктограммы образцов кривых различных типов. Вид страницы редактора с галереей типов кривых представлен на следующем рисунке:
Вкладка Series редактора диаграмм может содержать разное число вкладок в зависимости от типа выбранной кривой. Данные вкладки также служат для настройки параметров кривой.
На следующем рисунке представлен вид вкладки Series для кривой типа Line (лентами):
Для задания отображаемых значений надо использовать методы серий 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.
Графические возможности Delphi
Delphi позволяет разрабатывать приложения, которые могут выводить графику: схемы, чертежи, иллюстрации.
Для отображения графической информации в библиотеке Delphi предусмотрены компоненты, список которых дан в следующей таблице:
Пиктограмма |
Название |
Страница |
Назначение |
|
Image (изображение) |
Additional |
Используется для отображения графики: пиктограмм, битовых изображений и метафайлов |
|
Shape (форма) |
Additional |
Используется для построения геометрических примитивов |
|
DrawGrid (таблица рисунков) |
Additional |
Используется для отображения в строках и столбцах нетекстовых данных |
|
Chart (диаграммы и графики) |
Additional |
Используется для создания диаграмм и графиков |
|
PaintBox (окно для рисования) |
System |
Используется для создания на форме некоторой области, в которой можно рисовать |
Кроме того, отображать и вводить графическую информацию можно на поверхности любого оконного компонента, имеющего свойство Canvas – канва.
Рисунки, создаваемые при выполнении приложения, могут быть как неподвижными, так и анимированными.
Анимация. Компонент Timer
Анимация отличается от статичного рисунка тем, что с течением времени изображение изменяется или движется. Для создания анимации в Delphi можно разместить на форме компонент Timer, который будет отсчитывать промежутки времени, через которые будет происходить изменение изображения. Чтобы обеспечить перемещение изображения надо сначала вывести его на экран, через некоторое время стереть его и перерисовать в другом месте экрана. Аналогичным образом создаётся анимация битовых изображений.
Компонент Timer расположен на странице Sistem и является невизуальным, т.е. во время выполнения приложения не отображается на форме. Компонент Timer позволяет задавать в приложении интервалы времени. В следующей таблице перечислены основные свойства компонента Timer:
Свойство |
Описание |
Interval |
Период генерации события OnTimer, т.е. период срабатывания таймера. Задается в миллисекундах. В обработчике события OnTimer записываются необходимые инструкции |
Enabled |
Разрешение работы. Разрешает (значение True) или запрещает (значение False) генерацию события OnTimer |