Реализация простой графической программы средствами Delphi

Тема: Реализация простой графической программы средствами Delphi

 

Основывается  на лекции номер 3.

 

Цели  работы:

• Изучить объекты "Delphi", связанные с выводом графической информации;
• Изучить методы создания графических изображений в системах использующих событийную модель;

• Познакомиться с принципами формирования динамического изображения;

• Познакомиться с основными компонентами графической системы.

 

Программа семинара

1 Основные  компоненты для работы с графикой;

2 Свойства  класса ТCanvas;

3 Методы  и события класса ТCanvas;

4. Разработка  простой программы;

5. Создание «резиновой  нити»;

6. Реализация  преобразования координатных систем;

7. Добавление  функции масштабирования изображения;

8. Дополнительное  задание;

9. Заключение;

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

 

Во все современные инструментальные среды разработки приложений встроены средства работы с графикой. Не является исключением и среда Delphi, имеющая набор визуальных компонент и специализированных объектов, обладающих широкими возможностями работы с графической информацией. В ходе этого занятия мы познакомимся с этими компонентами и объектами, а также с некоторыми методами создания графических изображений. Полный текст программы, разрабатываемой в ходе семинара, можно найти на прилагаемом диске.

1 Основные компоненты для работы с графикой

 

В Delphi существует три визуальных компонента, предназначенных для создания пользователем геометрических примитивов:

• Элемент управления изображением (компонент TImage). Используется для импорта в приложение растровых изображений, пиктограмм и метафайлов. Рисунок хранится в свойстве Picture.
• Фигура (компонент TShape). Используется для создания стандартных геометрических фигур: окружностей, эллипсов, прямоугольников и квадратов как заполненных, так и нет. Свойство Shape определяет тип фигуры, а Pen и Brush - характеристики границ и заполнения, соответственно.
• Элемент управления окном рисования (компонент TPaintBox). Используется для придания графических возможностей объектам, не имеющих свойства Сanvas, например, компоненту Panel.

Во всех других объектах графические операции выполняются с использованием свойства Canvas. Это свойство представлено объектом класса TСanvas, Оно поддерживается многими компонентами. Например, оно есть у TForm, TBitMap, TComboBox и TPaintBox. Свойство Сanvas предоставляет доступ к интерфейсу графических устройств Windows (Graphic Device Interface - GDI) и обеспечивает независимую от устройства область рисования графических объектов в окнах. Другими словами, методы объектов класса TСanvas вызывают функции Windows GDI.

 

2 Свойства класса  ТCanvas

 

Объект Canvas поддерживает восемь свойств. Значения этим свойствам  присваиваются только во время работы программы, обычно в обработчике событий формы OnCreate или OnPaint.

Brush. Определяет цвет (Color) и шаблон (Style) заливки окружности, прямоугольника и многоугольника, а также основной цвет текста.

ClipRect. Отсекает графику за пределами прямоугольника, размер которого обычно совпадает с размером клиентской области окна. Для того, чтобы изменить размеры графического объекта, его подсвойствам Left, Top, Right и Bottom присваиваются новые значения.

CopyMode. Определяет, как обрабатывается изображение при вызове метода CopyRect объекта Canvas. (см. ниже). Например, CopyMode равный cmNotSourceCopy, инвертирует изображение попиксельно перед копированием.

Font. Подсвойства этого комплексного свойства используются для выбора стилей шрифтов, применяемых при выводе текста с помощью методов TextOut или TextRect объекта Canvas. Данный объект не имеет никакого отношения к свойству формы Font.  Перед выводом текста не забудьте установить свойства Canvas.Font.

Handle. Используется в качестве параметра дескриптора контекста устройства при вызове методов GDI. Таким образом реализована возможность вызова отсутствующих в объекте Canvas функций GDI.

Pen. Воздействует на линии и контуры. Определяет цвет, стиль, ширину и режим выводимых линий соответствующими  подсвойствами Color, Style, Width, Mode.

PenPos. Представляет относительные координаты объекта Pen (PenPos.X, PenPos.Y), которые определяют, где появится следующий графический объект. Несмотря на то, что Delphi разрешает присваивание свойству PenPos новых значений, для изменения местоположения объекта Pen следует вызывать метод MoveTо объекта Canvas.

Pixels. Двухмерный массив для обеспечения доступа к отдельным пикселям объекта Canvas. Каждый элемент массива является значением типа TColor. Например, выражение Pixels[0,0] возвращает цвет пикселя, имеющего координаты (0,0).

Свойство Pixels является псевдомассивом. Класс TCanvas преобразует ссылки на элементы Pixels[X, Y] в вызовы функций GetPixel и SetPixel. Поэтому применение Pixels считается одним из самых неэффективных методов, используемых при создании графических образов.

3 Методы и  события класса ТCanvas

 

Объекты класса TCanvas имеют много методов, которые удовлетворяют потребности, возникающие при создании большинства прикладных программ. Такие методы построения фигур, как ArcEllipse, FloodFill, Polygon, Rectangle, RoundRect и др., непосредственно обращаются к функциям GDI, которые имеют те же самые имена. Их перечень можно получить в справке Delphi.

He забывайте перед каждым  использованием объекта Canvas присваивать  значения его свойствам в обработчике  события OnPaint. Например, чтобы нарисовать синюю линию, подсвойству Pen.Color свойства Canvas присвойте значение clBlue, а затем вызовите методы MoveTo и LineTo. Свойства Canvas нельзя предварительно сконфигурировать в обработчике события формы OnCreate, поскольку событие OnPaint получает дескриптор контекста устройства от Windows, а сам контекст устройства обеспечивается вашей программой через Canvas. Таким образом, Canvas в OnPaint не содержит ни одного значения свойства, которое вы присваиваете вне обработчика этого события. Ниже приведен список методов Canvas, назначение которых не столь очевидно.

CopyRect. Копирует все или часть содержимого одного объекта Canvas в другой. Установите свойство CopyMode, чтобы задать способ объединения пикселей. Применяемые значения свойства CopyMode вы можете узнать из интерактивной справки Delphi.

Draw. Рисует объект класса TGraphic, который является прямым предком классов TIcon, TBitmap и TMetafile. В метод Draw вы можете передавать любую пиктограмму, растровое изображение или метафайл.

DrawFocusRect. Рисует прямоугольник, используя логическую операцию исключающего ИЛИ (XOR). При повторном вызове этого метода с идентичными аргументами удаляется нарисованный прямоугольник и восстанавливается предыдущее изображение.

FrameRect. Рисует незаполненный прямоугольник, используя текущее значение свойства Pen, но игнорируя Brush. Если вы, не используя свойства Brush, хотите получить простой контур, вместо Rectangle примените метод FrameRect.

StretchDraw. Работает аналогично методу Draw, но растягивает или уменьшает пиктограмму, растровое изображение или метафайл, чтобы они поместились в заданном прямоугольнике.

Кроме того, объект Canvas распознает два события, которые  при особых обстоятельствах могут быть весьма полезны. Во многих приложениях вам не понадобится обеспечивать их обработку, но вы, по крайней мере, должны знать об их существовании.

• OnChange. Вызывается после изменения значения свойства Canvas.
• OnChanging. Вызывается непосредственно перед изменением свойства Canvas.

Поскольку свойство недоступно во время разработки, вы не сможете воспользоваться услугами Object Inspector для создания обработчиков этих двух событий. Для того чтобы их использовать необходимо создать их обработчики вручную.

 

4. Разработка  простой программы

 

Решим простую  задачу – вычерчивание на экране отрезков. Для этого разместите на форме экземпляр объекта TРaintBox, обладающий доступным свойством  Сanvas. В обработчик события onMouseDown данного объекта поместите код, запоминающий координаты курсора в момент нажатия кнопки мыши. Эти координаты будут определять начальную точку отрезка. В обработчик события onMouseUp поместите код, производящий построение отрезка, соединяющего запомненную точку с точкой, в которой произошло отпускание кнопки мыши. Для этого можно использовать методы MoveTo и LineTo объекта Сanvas. Поставленная задача решена, однако наша программа имеет ряд существенных недостатков. Мы будем рассматривать и устранять их поочередно.

При сворачивании окна или изменении его размеров нарисованные отрезки будут исчезать. Причина ясна. При наступлении этих событий (и ряда других) происходит перерисовка окна, в процессе которой все его содержимое стирается. Преодолеть данное затруднение можно, заменив визуальный компонент TPaintBox на компонент TImage. Этот компонент хранит в себе образ создаваемого растрового изображения и, при необходимости, обеспечивает его перерисовку. Однако такой подход не очень удачен, так как мы не сможем редактировать созданное изображение (сможем, но только попиксельно). Более удачным решением будет хранение координат конечных точек всех созданных отрезков и перерисовывание созданного изображения или его фрагментов при необходимости. Структуру, хранящую координаты точек, в грубом приближении, можно рассматривать как модель.

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

Создайте такой  массив и измените написанный ранее  код, так чтобы координаты конечных точек отрезков заносились в массив (массив можно сделать двумерным, а его базовым типом выбрать запись, хранящую координаты x и y).

Напишите процедуру, рисующую отрезки по координатам точек, хранящимся в массиве. Разместите вызов этой процедуры в обработчике события onPaint компонента TPaintBox. Таким образом мы обеспечиваем восстановление изображения.

Не размещайте вызов в обработчике события onPaint формы. Для формы это событие порождается при изменении любого объекта формы. В результате возникает избыточное перечерчивание.

 

5. Создание  «резиновой нити»

 

Пользоваться созданной нами программой не удобно, так как мы видим положение отрезка только после того как указали определяющие его точки. В такой ситуации сложно создать даже произвольный горизонтальный отрезок. Однако, помочь пользователю достаточно просто. После ввода первой точки отрезка можно показать позицию создаваемого отрезка, соединив линией введенную точку и текущую позицию курсора мыши. При перемещении мыши линия должна соответственно изменять свое положение. С подобным приемом вы, наверное, сталкивались, работая с графическими программами. Данный тип курсора (ответа системы на действия пользователя) носит название «резиновой нити». Далее мы разберем принципы ее реализации.

Прежде чем  переходить к изучению методов создания изменяющихся во времени изображений, рассмотрим подробнее режимы вывода, задаваемые свойством Canvas.Pen.Мode. С полным списком разрешенных значений этого свойства можно познакомится в справочной системе Delphi. Мы рассмотрим только наиболее важные для нашей темы режимы:

• pmCopy Цвет линии определяется свойством Canvas.Pen.Color. При выводе в этом режиме рисуемая линия уничтожает попавшие под нее пиксели фона и заносит на их места пиксели своего цвета. Данный режим используется по умолчанию;
• pmXor  Цвет линии определяется результатом операции Xor (исключающее ИЛИ) над цветом фона и цветом, заданным свойством Canvas.Pen.Color;
• pmNotXor Цвет линии определяется отрицанием результата, полученного по схеме предыдущего режима.

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

Предположим, цвет пикселя  фона задан битовой комбинацией 1111, а цвет линии- 0101, тогда цвет выводимого пикселя определиться как

 

Восстановить  цвет фона достаточно просто. Еще раз  выполним логическую операцию Xor между полученным цветом и цветом линии

 

Как видим, битовый код цвета пикселя идентичен исходному цвету. Таким образом, если в режиме Xor начертить линию любого цвета, а затем повторно прорисовать ее по тем же координатам тем же цветом, то линия исчезнет с экрана, оставив фон не поврежденным.

Цвет выводимого пикселя сильно отличается от желаемого цвета линии (заданного свойством Canvas.Pen.Color). Чтобы этого не происходило, вместо логической операции Xor используют операцию NotXor. Результирующий цвет получается близким или совпадающим с цветом линии. Рассмотрим тот же пример.

 как видим, результирующий  цвет совпадает с цветом линии

 так же как и в предыдущем  случае получаем исходный цвет  фона.

На рассмотренной выше идее и основывается один из методов создания «резиновой нити». При каждом движении мыши необходимо:

1. Стереть с экрана существующий на данный момент отрезок. Для этого необходимо начертить еще раз этот отрезок в режиме NotXor.
2. Начертить в режиме NotXor отрезок, связанный с новым положением мыши. Запомнить координаты концов отрезка для повторного вычерчивания, обеспечивающего стирание отрезка (так как первая точка отрезка фиксирована, можно запоминать только одну точку).

Реализуйте  «резиновую нить». Для этого поместите  в обработчик события onMouseMove требуемый код. Не забудьте вставить проверку на нажатие левой кнопки мыши, нить должна появляться только при нажатой кнопке.

Созданная вами программа может оставлять на экране «мусор» в виде отдельных  точек. Это вызвано тем, что при первом перемещении курсора мыши образа нити на экране не существует, и попытка стирания приводит к появлению «мусора». Чтобы этого не происходило, нужно добавить в обработчик события onMouseDown функцию рисования нити (создаваемый отрезок будет единичной длины).

 

6. Реализация преобразования координатных систем

 

Теперь попробуем  преобразовать нашу систему из «рисовальной»  в «чертежную». Ключевое различие будет  в используемых координатных системах. До этого момента мы работали в координатной системе экрана. Ни один инженер не захочет, да и не сможет работать в экранных координатах. Следовательно, мы должны определить координатную систему, удобную пользователю и выполнять преобразования из данной системы в экранные координаты и наоборот. Такая координатная система называется модельной. Подобные преобразования выполняются с помощью двумерного видового конвейера, рассмотренного нами на лекции 3. Полная реализация конвейера достаточно сложна, поэтому мы существенно упростим задачу, оставив только одно преобразование. Вывод, по-прежнему, будем осуществлять в экранных координатах, а для описания элементов модели используем нормализованные координаты. В процессе нормализации приведем все координаты к диапазону от 0 до 1.