Как работать с графикой на канве в среде Дельфи. Урок 1–2

Posted by bullvinkle under Журнал, Статьи

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

Как работать с графикой на канве в среде Дельфи. Урок 1–2

Владимир Дегтярь

DeKot degvv@mail.ru

Графика в Delphi (немного теории). Урок 1

Операционная среда WINDOWS является графической средой и для  вывода  графической  информации на экран или принтер использует функции GDI (Graphics Devices Interface – Интерфейс графических устройств).  GDI – функции являются аппаратно–независимыми, поэтому взаимодействие приложений (в том числе и созданных в среде Delphi) с аппаратными устройствами компьютера осуществляются через драйвера устройств и через специальную структуру данных – называемой контекстом отображения (дисплейный контекст – DC (Display Context)). Контекст отображения содержит основные характеристики устройств вывода графической информации, а также инструменты для рисования (шрифт, перо и кисть).

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

• TCanvas – для контекста отображения
• TFont – для шрифта
• TPen – для пера
• TBrush – для кисти

Связанные с этими классами объекты получают соответствующие свойства – canvas, font, pen, brush, которые уже как объекты, в свою очередь, имеют ряд своих свойств.

Для работы с рисунками или изображениями Delphi  предлагает классы: TGraphic, TPicture, TImage, TBitMap, TJpegImage, TShape, TIcon, TMetaFile и др. Основной класс для связанных с рисованием графических операций – это TCanvas. С помощью его свойств и методов можно рисовать на поверхности визуальных объектов, которые включают в себя этот класс и имеют свойство сanvas. Для выполнения различных графических операций используются типы TPoint и TRect, описываемые следующим образом (см. листинг 1):

ЛИСТИНГ–1

…

TPoint = record     // задание координат точки

X : LongInt;

Y : LongInt;

TRect = record     // определение прямоугольной области

Left : Integer;

Top : Integer;

Right : Integer;

Bottom : Integer;

…

или

…

TRect = record     // определение прямоугольной области

TopLeft : TPoint;

BottomRight : TPoint;

…

также

…

TRect :=  Bounds ( X,Y, Width, Height : Integer );

X, Y – координаты левого верхнего угла области ;

Width, Height – ширина и высота прямоугольной области;

Одним из основных объектов для рисования  является – поверхность рисования (она же холст или канва) – объект класса TCanvas. У холста есть ряд свойств и методов для отображения графической информации, перемещения графических объектов по поверхности рисования, копирования изображений и/или их отдельных областей, вывода текстовой информации.

Наиболее частыми применяемыми методами отображения (вывода) графики являются:

• Canvas < рисование геометрических фигур (примитивы) >  Arc ( дуга), Pie ( сектор), Ellipse ( эллипс,

круг), Rectangle (прямоугольник) и другие

• Canvas.Draw – вывод графической информации
• Canvas.StretchDraw – вывод графической информации с изменением масштаба
• Canvas.CopyRect – копирование графической области
• Canvas. TextOut –  вывод текстовой информации

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

Самое простое приложение с выводом графики. Урок 2

Создадим новый проект в среде Delphi «File => New => Application» (при запуске Delphi новый  проект создается автоматически). Cразу же сохраним проект – File => SaveAll. На первый запрос – сохраняем модуль под именем предложенным Delphi – Unit 1. По второму запросу изменим имя проекта с Project 1 на Lesson 1. Delphi в новом проекте создает объект Form1 и в редакторе кода модуля Unit 1 появляется  заготовка кода (см. рис.1):

Рис. 1 Создаем новый проект.

В Object Inspector в свойствах формы Form1 изменим заголовок Caption на «Урок по графике №1» и выставим  размеры окна формы: Top (100*), Left (230), Width (700), Height (575), ClientWidth (700), ClientHeight (540).

* почему именно эти цифры разберем позже

Теперь с помощью методов графических примитивов нарисуем, что–либо на форме. В Object Inspector  перейдем на вкладку Events (События) и «кликнем» дважды по событию OnPaint(). В редакторе кода появится шаблон процедуры обработчика события On Paint (см. рис.2):

Рис. 2. Создание обработчика OnPaint()

Теперь запишем в этой процедуре следующий код (см. листинг 2):

ЛИСТИНГ–2

…

with form1.canvas do begin

pen.color:= clred;             // цвет пера

rectangle(350, 50, 550, 100);  // рисуем прямоугольник с координатами

// верхнего левого угла

// x1=350, y1=50 и правого нижнего x2=550, y2=100

pen.color:= clgreen;

pen.width:= 4;                 // ширина пера

brush.color:= clskyblue;       // цвет заполнения фигуры

ellipse(60, 100, 250, 400)     // эллипс, вписанный в прямоугольник

end;

Запустите проект (Run или F9 ) и посмотрите результат. Конечно, это слишком простой проект, поэтому усложним нашу задачу с использованием рисунков находящихся в файлах (формат файлов .bmp). Графические файлы, которые нам понадобятся для последующих проектов, находятся в папке data в соответствующих  папках проектов (см. ресурсы к статье).

Далее, выведем на форму изображение звездолета (файл ‘ship1.bmp’ ) на фоне звездного неба (файл ‘star1.bmp’ ). В файле ‘ship1’  два изображения звездолета (спрайты – они нам понадобятся для организации движения звездолета), файл ‘star1’ используется для создания фона и имеет размер 700 х 540 (под эти размеры и установлены размеры окна формы через Object Inspector). Нам также понадобятся объекты типа TBitMap: BufFon (буфер для загрузки фона из файла ‘star1.bmp’ ), BufSpr (буфер для загрузки спрайтов из файла ‘ship1.bmp’ ), BufPic (буфер для загрузки рисунка одного из спрайтов из BufSpr), Buffer (общий буфер для объединения всех рисунков с последующим выводом на форму).

Размеры BufFon и BufSpr  устанавливаются в соответствии с размерами изображений при загрузке. Размер общего буфера Buffer устанавливаем равным BufFon, а размер BufPic – равен размеру одного спрайта, что в общем случае определяется следующим образом:

BufPic.Width := round ( BufSpr.Width / n );

BufPic.Height:= round ( BufSpr.Height / m );

где       n – кол–во спрайтов в горизонтальном ряду изображений в файле ‘sprite’,

m – кол–во рядов с изображением спрайтов в файле.

Инициализацию буферов проведем в процедуре OnCreate() формы (см. рис.3):

Рис. 3. Инициализация буферов

Для вывода одного спрайта через BufPic** создаем процедуру копирования спрайта из BufSpr в BufPic методом CopyRect (см. листинг 3):

ЛИСТИНГ–2

…

procedure DrawShip1 ( i: byte); // загрузка одного спрайта в буфер рисунка

begin

BufPic.Canvas.CopyRect(bounds(0, 0, BufPic.Width, BufPic.Height),

BufSpr.Canvas,bounds( i * 66, 0, BufPic.Width,

BufPic.Height));

end;

** на Canvas BufPic в область с координатами левого верхнего угла X= 0 и Y = 0, шириной и высотой соответствующие размерам буфера BufPic копируем изображение спрайта из области с область с координатами левого верхнего угла X= i * 66  и Y = 0, шириной и высотой соответствующие размерам буфера BufPic. В координате Х цифра 66 соответствует ширине одного спрайта. В переменной i передается номер спрайта (0 – 1-й, 1 – 2-й).

Вывод изображений производим аналогично предыдущему примеру (рисование прямоугольника и эллипса) в процедуре OnPaint(). Необходимо ввести переменные xs1 и ys1 (координаты вывода звездолета). Процедура  DrawShip1(0) c параметром 0 выводит первый спрайт в буфер рисунка BufPic. Далее выводим фон и спрайт на канву дополнительного буфера Buffer  и затем из него выводим все на форму. Удалите из процедуры код предыдущего примера и вставьте следующий (см. листинг 3):

ЛИСТИНГ–3

…

procedure DrawShip1 (i: byte); // загрузка одного спрайта в буфер рисунка

begin

BufPic.Canvas.CopyRect(bounds(0, 0, BufPic.Width, BufPic.Height),

BufSpr.Canvas, bounds(i * 66, 0, BufPic.Width,

BufPic.Height));

end;

procedure Tform1.FormPaint(sender: tobject);

var xs1, ys1: integer;                // координаты звездолета SHIP1

begin

xs1:= 250; ys1:= 466;

DrawShip1(0);

Buffer.canvas.draw(0, 0, BufFon);    // выводим фон в общий буфер

Buffer.canvas.draw(xs1, ys1, BufPic);      // выводим рисунок спрайта поверх

// фона в общий

Buffer.canvas.draw(0, 0, Buffer);    // вывод обеих рисунков (общего буфера)

// на форму

end;

После запуска проекта и  компиляции получаем следующую картинку (см. рис.4):

Рис. 4. Тестовый проект звездолета

Заключение

Мы получили статическое изображение и теперь в последующих уроках создадим движущиеся графические объекты. Но для начала познакомимся с основными принципами получения «эффекта» движения объектов (папка Lesson1***).

*** Перед запуском в среде Дельфи скопируйте в папку с проектом папку data с графическими файлами.

Можно использовать Уроки в любых некоммерческих целях с указанием автора и ссылкой на

www.programmersforum.ru

По всем вопросам обращайтесь на форум www.programmersforum.ru или на E-mail.

Рассматриваемые в данной статье проекты полностью приведены в ресурсах к статье на http://www.programmersforum.ru в разделе «Журнал клуба программистов. Первый выпуск».

Статья из первого выпуска “журнала ПРОграммистов”.
Скачать этот номер можно по ссылке.
Ознакомиться со всеми номерами журнала.

Обсудить на форуме — Как работать с графикой на канве в среде Дельфи. Урок 1–2

Похожие статьи

• Делаем динамические тени на OPENGL. Часть 1
• Как работать с графикой на канве в среде Дельфи. Урок 7-8
• GAMEDEV на Delphi. Делаем змейку
• Как работать с графикой на канве в среде Дельфи
• Графика. Вывод узора на экран
• Как сделать плавный переход между картинками?
• Компилятор домашнего приготовления. Часть 4
• Общение между запущенными копиями своих программ
• Близкие контакты третьего вида с Visual Foxpro
• Запись дисков в Delphi средствами IMAPI