Графика на Delphi

программированию с использованием одной из самых распространенных систем быстрой разработки

приложений – Delphi
Используя данный учебный курс, можно самостоятельно овладеть основами объектно – ориентированного программирования на Delphi. Для расширения Ваших знаний к курсу приложен ряд учебных пособий и справочников по Delphi
Цикл содержит 13 презентаций:
ООП на Delphi – 1: Знакомство с системой программирования Borland Delphi. Объекты (компоненты) и их свойства и методы
ООП на Delphi – 2: Первая программа на Delphi, сохранение и компиляция
ООП на Delphi – 3: Программное изменение свойств объектов
ООП на Delphi – 4: Условия в Delphi. Создание простого теста
ООП на Delphi – 5: Элементы ввода и вывода информации. Обработка исключений
ООП на Delphi – 6: Заставка программы и элемент таймер
ООП на Delphi – 7: Программируем свою игрушку
ООП на Delphi – 8: Меню программы, панель статуса, диалоги
ООП на Delphi – 9: Создаем свой текстовый редактор
ООП на Delphi – 10: Базы данных на Delphi
ООП на Delphi – 11: Калькулятор на Delphi. Обработка исключительных ситуаций
ООП на Delphi – 12: Создаем тестирующую систему
ООП на Delphi – 13: Графика на Delphi

Delphi использует язык программирования Объект Паскаль, поэтому лучше сначала изучить обычный Паскаль и поработать в ТурбоПаскале, а затем и переходить к Delphi – перейти будет очень просто, т.к синтаксис языка остается неизменным.
Изучение ООП на Delphi желательно проводить в старших профильных классах – количество часов, отводимое на информатику там вполне достаточно для освоения основ ООП на Delphi

№ 1 Домнин Константин Михайлович 2006 год

работы с графикой и создадим свой графический редактор
DELPHI - 13
Вопросы:

1. Введение в графику
2. Создаем свой графический редактор

графику

в Delphi есть много средств. Рассмотрим некоторые из них.

У многих объектов Delphi есть свойство Canvas, что в переводе означает холст. Если у объекта имеется такое свойство, то это значит, что на нем можно рисовать. (Заметим, что работая в любой программе, да и в самой операционной системе Windows, мы видим только графику – все кнопочки, окна, инструменты … это всего лишь нарисованные, например на форме объекты (вернее их картинки) и при нажатии на кнопку она перерисовывается, показываясь нажатой)

Для рисования в Delphi есть два основных инструмента:
Pen (карандаш) – для рисования линий
Brush (кисть) – для раскраски объектов
У каждого из этих инструментов есть дополнительные свойства ( например цвет карандаша, толщина линии, тип линии )

Сначала откроем событие для формы – OnPaint и

запишем там код:

Устанавливаем цвет карандаша - красный

Устанавливаем толщину карандаша в 5 пикселей

Устанавливаем карандаш в точку с координатами 10,20

Проводим линию до точки с координатами 200,20

Проводим зеленую линию

Проводим синюю линию

В результате мы получаем на форме следующую картинку:

Прямоугольник, эллипс

Выбираем произвольный цвет и

рисуем прямоугольник

В результате мы получаем на форме следующую картинку:

Выбираем произвольный цвет и рисуем эллипс

Посмотреть ->

графический редактор

Delphi, попробуем создать графический редактор наподобие Paint (конечно менее функциональный),

однако умеющий следующее:
Рисовать линии, прямоугольники, эллипсы и просто карандашом
Делать заливку фигур цветом
Использовать ластик
Выбирать толщину и цвет линий
Открывать графические файлы и сохранять нарисованное




Рассмотрим создание редактора по шагам:

элементы:

Компонент MainMenu
Сформируем следующее меню программы:

элементы:

Компонент OpenPictureDialog для открытия изображений

Компонент SavePictureDialog для сохранения рисунков

Манифест XP для стильности

Компонент ColorDialog для выбора цвета рисования

элементы:
Компонент ToolBar (инструментальная панель для размещения кнопок)

7 кнопок (SpeedButton) для выбора инструмента рисования. Нанесем на кнопки картинки

SpinEdit для выбора толщины линии
В свойствах установим min толщину линии – 1 (пикс), а max - 20

Сделаем так, чтобы из всех кнопок нажатой могла быть только одна (при нажатии любой кнопки остальные становились отжатыми). Для этого выделяем все кнопки. Установим свойство выделенных элементов AllowAllUp в значение True.Свойство GroupIndex поставим равным 1. Свойство Down для всех кнопок должно быть равно False, только для отжатой кнопки инструмента карандаш свойство Down должно быть равно True.

элементы:
Размещаем на форме компонент ScrollBox, на который

ложим компонент Image
(ScrollBox – это подложка для Image. Зададим ему белый цвет и растянем его на все свободное место)
У элемента Image свойство Align сделаем в AlClient, чтобы он вписался полностью в ScrollBox, а свойство Stretch –в True

давайте подумаем, какие события возникают, когда мы рисуем. Ясно, что

почти все мы делаем мышкой. Например для рисования линии мы ставим курсор в какое-то место, нажимаем левую кнопку мыши, перемещаем мышь до нужного места и отпускаем ее.
Таким образом в процессе рисования мы используем 3 основных события:

OnMouseDown (нажатие кнопки мыши)
On MouseMove (перемещение мыши)
OnMouseUp (отпускание кнопки мыши)

Рисование карандашом

При нажатии на кнопку (OnMouseDown) карандаш должен встать на точку с координатами курсора , при перемещении мыши с нажатой клавишей (On MouseMove ) должна рисоваться линия, при отпускании кнопки мыши (OnMouseUp) должно прекратиться рисование.
Поэтому для рисования карандашом необходим код в каждом из событий для мыши OnMouseDown, On MouseMove, OnMouseUp.

Введем переменную логического типа r – это своеобразное разрешение/запрет на

рисование. Если r – true, то рисовать можно, иначе нельзя.
Зачем это?
Мы можем перемещать мышь (MouseMove) с нажатой или отпущенной клавишей: в первом случае должно рисоваться (r=true), а во втором не должно (r=false)

При нажатии кнопки мыши даем добро на рисование

Если нажата кнопка рисования карандашом, то на Image переходим к точке с координатами курсора

(Нажатие кнопки мыши - MouseDown)

Проверяем, разрешено ли рисовать

Если рисовать можно и

нажата кнопка рисования карандашом, то устанавливаем цвет карандаша, соответствующий выбранному в ColorDialoge и проводим линию

(Перемещение мыши - MouseMove)

Проводим линию до координаты отпускания мыши и устанавливаем запрет на

рисование

(Отпускание мыши - MouseUp)

Что мы делаем при стирании ластиком? На самом-то деле мы

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

ШАГ 4

Не будем вдаваться в подробности рисования прямоугольника, эллипса и заливки фигур – здесь используются соответствующие методы Canvas: Rectangle, Ellipse, FloodFill – посмотрите внимательно код, соответствующий этим операциям в примере, приложенном к презентации

Рисование прямоугольника, эллипса, заливка фигур

на кнопку цвета запускается ColorDialog, где мы выбираем нужный цвет

и присваиваем его карандашу и кисти
(см. предыдущие уроки о диалогах)

очистить рисунок с помощью ластика, но это долго, поэтому при

выборе меню Правка -> Очистить происходит очистка всего холста.
И это опять обман, как и в случае с ластиком. На самом деле мы ничего не очищаем, а рисуем белый прямоугольник размерами чуть больше размера поля рисования – создается эффект очистки

Устанавливаем толщину линии = 1, цвет линии = белый и рисуем прямоугольник с размерами на 5 пикселей больше размеров поля для рисования (Image)

Цвет кисти делаем белым, рисуем прямоугольник чуть больше Image, меняем

заголовок формы и устанавливаем начальный цвет карандаша - черный

ШАГ 8

Диалоги рассмотрены нами ранее довольно подробно, поэтому комментарии излишни

Меню Файл -> Открыть

Тоже без комментариев
ШАГ 10
Меню Файл -> Выход – метод Close
ШАГ

11

Меню Помощь -> О программе

Здесь мы должны создать форму «О программе», познакомить с ней форму редактора и открыть методом ShowModal

редактор и порисуем.
Порисовать ->
Итак, мы создали свой

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

Мы же на этом закончим наш урок

с графикой в Delphi и создали свой графический редактор

ИТОГИ УРОКА:
На

этом цикл презентаций о программировании в среде Delphi закончен