Разделы презентаций


Графика на Delphi

Содержание

Объектно – ориентированное программирование на DELPHI - 13@ Краснополянская школа № 1 Домнин Константин Михайлович 2006 год

Слайды и текст этой презентации

Слайд 1 Цикл презентаций «ООП на 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

Цикл презентаций «ООП на Delphi» посвящен объектно – ориентированному программированию с использованием одной из самых распространенных

Слайд 2Объектно – ориентированное программирование на
DELPHI - 13
@ Краснополянская школа

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

Объектно – ориентированное программирование на DELPHI - 13@ Краснополянская школа № 1 Домнин Константин Михайлович 2006 год

Слайд 3На этом уроке:
Мы познакомимся с компонентами для

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


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

На этом уроке:   Мы познакомимся с компонентами для работы с графикой и создадим свой графический

Слайд 4Объектно – ориентированное программирование на DELPHI - 13
Введение в

графику

Объектно – ориентированное программирование на DELPHI - 13 Введение в графику

Слайд 5Введение в графику
Для работы с графикой

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

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

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

Введение в графику    Для работы с графикой в Delphi есть много средств. Рассмотрим некоторые

Слайд 6Введение в графику
Рассмотрим рисование линий, прямоугольников, эллипсов:
Линия

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

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

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





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

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

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

Введение в графику   Рассмотрим рисование линий, прямоугольников, эллипсов:Линия   Сначала откроем событие для формы

Слайд 7Введение в графику
Рассмотрим рисование линий, прямоугольников, эллипсов:
Линия


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




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


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

Введение в графику   Рассмотрим рисование линий, прямоугольников, эллипсов:Линия     Проводим зеленую линию

Слайд 8Введение в графику
Рассмотрим рисование линий, прямоугольников, эллипсов:
2.

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

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

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

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


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

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

Введение в графику   Рассмотрим рисование линий, прямоугольников, эллипсов:2. Прямоугольник, эллипс     Выбираем

Слайд 9Объектно – ориентированное программирование на DELPHI - 13
Создаем свой

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

Объектно – ориентированное программирование на DELPHI - 13 Создаем свой графический редактор

Слайд 10Создаем свой графический редактор
А сейчас, используя средства

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

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




Рассмотрим создание редактора по шагам:
Создаем свой графический редактор   А сейчас, используя средства Delphi, попробуем создать графический редактор наподобие Paint

Слайд 11Создаем свой графический редактор
ШАГ 1
Откроем Delphi разместим на форме следующие

элементы:

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

Создаем свой графический редакторШАГ 1Откроем Delphi разместим на форме следующие элементы:   Компонент MainMenuСформируем следующее меню

Слайд 12Создаем свой графический редактор
ШАГ 1
Откроем Delphi разместим на форме следующие

элементы:

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

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


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


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

Создаем свой графический редакторШАГ 1Откроем Delphi разместим на форме следующие элементы:   Компонент OpenPictureDialog для открытия

Слайд 13Создаем свой графический редактор
ШАГ 1
Откроем Delphi разместим на форме следующие

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




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

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

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

Создаем свой графический редакторШАГ 1Откроем Delphi разместим на форме следующие элементы:   Компонент ToolBar (инструментальная панель

Слайд 14Создаем свой графический редактор
ШАГ 1
Откроем Delphi разместим на форме следующие

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

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


Создаем свой графический редакторШАГ 1Откроем Delphi разместим на форме следующие элементы:   Размещаем на форме компонент

Слайд 15Создаем свой графический редактор
ШАГ 2
Займемся описанием событий:
Сначала

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

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

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

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

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

Создаем свой графический редакторШАГ 2Займемся описанием событий:   Сначала давайте подумаем, какие события возникают, когда мы

Слайд 16Создаем свой графический редактор
ШАГ 2
Рассмотрим код рисования карандашом:

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

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


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


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

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

Создаем свой графический редакторШАГ 2Рассмотрим код рисования карандашом:   Введем переменную логического типа r – это

Слайд 17Создаем свой графический редактор
ШАГ 2
Рассмотрим код рисования карандашом:

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

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

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

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

Создаем свой графический редакторШАГ 2Рассмотрим код рисования карандашом:   Проверяем, разрешено ли рисовать   Если

Слайд 18Создаем свой графический редактор
ШАГ 2
Рассмотрим код рисования карандашом:

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

рисование


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

Создаем свой графический редакторШАГ 2Рассмотрим код рисования карандашом:   Проводим линию до координаты отпускания мыши и

Слайд 19Создаем свой графический редактор
ШАГ 3
Стирание с помощью ластика

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

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

ШАГ 4

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

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

Создаем свой графический редакторШАГ 3Стирание с помощью ластика   Что мы делаем при стирании ластиком? На

Слайд 20Создаем свой графический редактор
ШАГ 5
Выбор цвета
При нажатию

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

и присваиваем его карандашу и кисти
(см. предыдущие уроки о диалогах)
Создаем свой графический редакторШАГ 5Выбор цвета   При нажатию на кнопку цвета запускается ColorDialog, где мы

Слайд 21Создаем свой графический редактор
ШАГ 6
Очистка холста
Конечно, можно

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

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

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


Создаем свой графический редакторШАГ 6Очистка холста   Конечно, можно очистить рисунок с помощью ластика, но это

Слайд 22Создаем свой графический редактор
ШАГ 7
Меню Файл -> Создать

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

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

ШАГ 8

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

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

Создаем свой графический редакторШАГ 7Меню Файл -> Создать   Цвет кисти делаем белым, рисуем прямоугольник чуть

Слайд 23Создаем свой графический редактор
ШАГ 9
Меню Файл -> Сохранить

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

11

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

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

Создаем свой графический редакторШАГ 9Меню Файл -> Сохранить   Тоже без комментариевШАГ 10Меню Файл -> Выход

Слайд 24Создаем свой графический редактор
На этом и остановимся. Давайте запустим наш

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

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

Мы же на этом закончим наш урок
Создаем свой графический редакторНа этом и остановимся. Давайте запустим наш редактор и порисуем.Порисовать ->   Итак,

Слайд 25 На этом уроке мы научились работать

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

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

этом цикл презентаций о программировании в среде Delphi закончен
На этом уроке мы научились работать с графикой в Delphi и создали свой

Слайд 26Домнин Константин Михайлович
E – mail: kdomnin@list.ru
2006 год.

Домнин Константин МихайловичE – mail: kdomnin@list.ru2006 год.

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика