3. Простые графические фигуры

В стандартную библиотеку визуальных компонент Delphi входит несколько объектов, с помощью которых можно придать своей программе совершенно оригинальный вид. Это - Image (DBImage), Shape, Bevel.

TImage позволяет поместить графическое изображение в любое место на форме. Этот объект очень прост в использовании - выберите его на странице Additional и поместите в нужное место формы. Собственно картинку можно загрузить во время дизайна в редакторе свойства Picture. Картинка должна храниться в файле в формате BMP (bitmap), WMF (Windows Meta File) или ICO (icon). (TDBImage отображает картинку, хранящуюся в таблице в поле типа BLOB. При этом доступен только формат BMP.)

Как известно, форматов хранения изображений гораздо больше трех вышеназванных (например, наиболее известны PCX, GIF, TIFF, JPEG). Для включения в программу изображений в этих форматах нужно использовать другие компоненты.

При проектировании следует помнить, что изображение, помещенное на форму во время дизайна, включается в файл .DPR и затем присоединяется к EXE файлу. Поэтому такой EXE файл может получиться достаточно большой. Как альтернативу можно рассмотреть загрузку картинки во время выполнения программы, для этого у свойства Picture (которое является объектом со своим набором свойств и методов) есть специальный метод LoadFromFile. Это делается, например, так:

if OpenDialog1.Execute then

Image1.Picture.LoadFromFile(OpenDialog1.FileName);

Важными являются свойства объекта Center и Stretch. Если Center установлено в True, то центр изображения будет совмещаться с центром объекта Image. Если Stretch установлено в True, то изображение будет сжиматься или растягиваться таким образом, чтобы заполнить весь объект Image.

Shape - простейшие графические объекты на форме типа круг, квадрат и т.п. Вид объекта указывается в свойстве Shape. Свойство Pen определяет цвет и вид границы объекта. Brush задает цвет и вид заполнения объекта. Эти свойства можно менять как во время дизайна, так и во время выполнения программы.

Bevel - объект для украшения программы, может принимать вид рамки или линии. Объект предоставляет меньше возможностей по сравнению с Panel, но не занимает ресурсов. Внешний вид указывается с помощью свойств Shape и Style.

Покажем, как во время выполнения программы можно изменять свойства объекта Shape. Изменение цвета объекта (событие OnChange для ColorGrid1):

procedure TForm1.ColorGrid1Change(Sender: TObject);

begin

Shape1.Brush.Color:=ColorGrid1.ForeGroundColor;

e nd;

4. Рисование на канве

У ряда объектов из библиотеки визуальных компонент есть свойство Canvas (канва), которое предоставляет простой путь для рисования на них. Эти объекты - Bitmap, ComboBox, DBComboBox, DBGrid, DBListBox, DirectoryListBox, DrawGrid, FileListBox, Form, Image, ListBox, Outline, PaintBox, Printer, StringGrid.

Canvas является в свою очередь объектом, объединяющим в себе поле для рисования и обладает рядом свойств: Brush – кисть, Pen – перо, карандаш, Font – шрифт.

Canvas обладает рядом графических методов:

• для рисования простейшей графики: Arc, Chord, LineTo, Pie, Polygon, PolyLine, Rectangle, RoundRect. При прорисовке линий в этих методах используются карандаш (Pen) канвы, а для заполнения внутренних областей - кисть (Brush).

• для вывода картинок на канву - Draw и StretchDraw. В качестве параметров указываются прямоугольник и графический объект для вывода (это может быть Bitmap, Icon или Metafile). StretchDraw отличается тем, что растягивает или сжимает картинку так, чтобы она заполнила весь указанный прямоугольник.

• для вывода текста - TextOut и TextRect. При выводе текста используется шрифт (Font) канвы. При использовании TextRect текст выводится только внутри указанного прямоугольника. Длину и высоту текста можно узнать с помощью функций TextWidth и TextHeight.

Используя Canvas, можно воспроизводить на форме любые графические объекты - картинки, многоугольники, текст и т.п. без использования компонент Image, Shape и Label (т.е. без использования дополнительных ресурсов), однако при этом вы должны обрабатывать событие OnPaint того объекта, на канве которого вы рисуете.

Покажем, как осуществить доступ к отдельной точке на изображении (на канве). По нажатию кнопки “Fill” всем точкам изображения присваивается свой цвет:

procedure TForm1.Button1Click(Sender: TObject);

var

i, j : Longint;

begin

Button1.Enabled:=False;

with Canvas do

for i:=1 to Width do begin

Application.ProcessMessages;

for j:=1 to Height do

Pixels[i,j]:=i*j;

end;

Button1.Enabled:=True;

end;

Д ля рисования на форме используем событие OnPaint для нашей формы, т.к. это событие возникает и при создании формы и при прорисовки формы после ее открытия.

Давайте для начала нарисуем кружок желтого цвета:

procedure TForm1.FormPaint(Sender: TObject);

begin

with Form1.Canvas do

begin

//Задаем кисть желтого цвета

Brush.Color:=RGB(255, 255, 0);

//Рисуем круг

Ellipse(10, 10, 30, 30);

end;

end;

Результат будет таким:

Аналогичным образом можно нарисовать прямоугольник (используем Square), напечатать некой текст (TextOut) или вывести еще какие-нибудь примитивы.

Для рисования линий используются методы LineTo и MoveTo. Первый из них рисует отрезок, второй - просто передвигает точку рисования. Вот пример их использования:

...

//Передвигаем перо в точку (10, 10)

Form1.Canvas.MoveTo(10, 10);

//Рисуем три линии

Form1.Canvas.LineTo(30, 70);

Form1.Canvas.LineTo(80, 40);

Form1.Canvas.LineTo(10, 10);

...

А вот результат выполнения этого фрагмента:

Тот же результат можно получить и через метод Polygon. Он в качестве параметра берет массив точек (вершин):

var

points: Array [1..3] of TPoint;

...

points[1].X:=10; points[1].Y:=10;

points[2].X:=30; points[2].Y:=70;

points[3].X:=80; points[3].Y:=40;

Form1.Canvas.Polygon(points);

...

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

...

//Берем кисть красного цвета

Form1.Canvas.Brush.Color:=RGB(255, 0, 0);

//Закрашиваем

Form1.Canvas.FloodFill(12, 12, RGB(0, 0, 0), fsBorder);

...

Если последний параметр равен fsBorder, то заполнение цветом идет до тех пор, пока наша волна закраски не упрется в границу, заданную вторым параметром. Если же он равен fsSurface, то закрашиваться будут именно точки с цветом, задаваемым вторым параметром (начиная от точки, определяемой первыми двумя параметрами).

А вот и результат нашей закраски:

Кроме линий, можно выводить и отдельные точки. Вот пример:

...

//Выводим точку красного цвета

Form1.Canvas.Pixels[9, 9]:=RGB(255, 0, 0);

...

Одно из свойств кисти мы уже знаем - это Color. Для приписывания к кисти определенного цвета используем функцию RGB или число в диапазоне 0-256*256*256 или одно из констант clBlue, clRed, и т.д.

Следующее свойство - это Style. Оно определяет способ закрашивания. Возможные значения - это bsSolid (сплошная кисть), bsHorizontal и (горизонтальные и вертикальные полоски соответственно), bsFDiagonal и bsBDiagonal (наклонные вправо или слева полосы соответственно) и другие.

Кроме закрашивания сплошной кистью можно закрашивать некоторой картинкой. За это отвечает свойство Bitmap для нашей кисти. Если вы используете свойство Bitmap, то свойства Color и Style игнорируются. Вот пример применения этого свойства:

...

var

Bitmap: TBitmap; //Заводим переменную для картинки

begin

Bitmap:=TBitmap.Create;

Bitmap.LoadFromFile('1.bmp'); //Загружаем картинку из файла

Form1.Canvas.Brush.Bitmap:=Bitmap; //Присваиваем Bitmap к холсту

Form1.Canvas.Ellipse(10, 10, 60, 60); //Рисуем нашей кистью

end;

Этот код можно поместить, например, в обработчик для кнопки. А вот и результат программы:

Разумеется, файл 1.bmp должен существовать

Перо Pen предназначено для рисования различных линий. У него существует цвет (свойство Color), вид (сплошное, пунктирное и т. д. - свойство Style), ширина (свойство Width), режим отображения (свойство Mode). Вот пример использования пера:

...

//Задаем перо синего цвета

Form1.Canvas.Pen.Color:=RGB(0, 0, 255);

Form1.Canvas.MoveTo(10, 12);

Form1.Canvas.LineTo(70, 12);

//Задаем штрих-пунктирное перо

Form1.Canvas.Pen.Style:=psDashDot;

Form1.Canvas.MoveTo(10, 22);

Form1.Canvas.LineTo(70, 22);

//Задаем толстое перо

Form1.Canvas.Pen.Width:=6;

Form1.Canvas.MoveTo(10, 32);

Form1.Canvas.LineTo(70, 32);

//Задаем режим отображения

Form1.Canvas.Pen.Mode:=pmMask;

Form1.Canvas.MoveTo(10, 42);

Form1.Canvas.LineTo(70, 42);

...

А вот и результат:

Обратите внимание, что до смены режима отображения линия полностью непрозрачна, после же мы частично видим рисунок под линией. Еще возможные значения для режима отображения - pmNot (с конвертацией цветов), pmMerge и другие.

Основные характеристики у шрифта следующие: Style (стиль, позволяет задать такие характеристики шрифта как полужирность (fsBold), наклон (fsItalic), подчеркнутость (fsUnterline) и перечеркнутость (fsStrikeOut)), Height (высота в пикселах), Size (высота в пунктах), Color (цвет), Name (имя шрифта).

Вот пример использования этих свойств:

...

Form1.Canvas.Font.Style:=[fsItalic, fsBold];

Form1.Canvas.Font.Size:=20;

Form1.Canvas.Font.Name:='Arial';

Form1.Canvas.TextOut(10, 10, 'Пример');

...

Обратите внимание, как мы используем свойство Style. Оно имеет тип TFontStyles, которое в свою очередь является множеством (set) значений типа TFontStyle. Поэтому при присваивании мы перечисляем необходимые значения в квадратных скобках:

...

Form1.Canvas.Font.Style:=[fsItalic, fsBold];

...

Если в вашей программе предусмотрена возможность установки шрифта пользователем, то проще всего воспользоваться предусмотренным для этого стандартным диалогом FontDialog.

Класс TBitmap предназначен для работы с растровыми картинками. Он, как и другие классы, используется на холсте (Canvas) с помощью метода Draw. Вот пример его использования:

var

Bitmap: TBitmap;

...

Bitmap:=TBitmap.Create;

//Загружает изображение из файла

Bitmap.LoadFromFile('1.bmp');

//Выводим размеры в заголовок формы

Form1.Caption:=IntToStr(Bitmap.Width) + ' '

+ IntToStr(Bitmap.Height);

//Выводим картинку на форму

Form1.Canvas.Draw(0, 0, Bitmap);

//Устанавливаем черно-белый режим

Bitmap.Monochrome:=true;

//Выводим вторую картинку

Form1.Canvas.Draw(20, 0, Bitmap);

...

Первые два параметра метода Draw для холста - это координаты левого верхнего угла выводимой картинки.

А вот и результат выполнения указанного фрагмента:

Первая картинка вывелась в цвете, вторая - черно-белой.

Bitmap может быть и прозрачным. В этом случае в нем пикселы определенного цвета будут считаться прозрачными, и вместо них будет показываться цвет фона нашей формы. Естественно, если форма поменяет цвет, то и цвет таких "прозрачных" пикселов тоже поменяется. Сделать это можно двумя способами. При первом способе мы определяем, что "прозрачным" цветом будет цвет левого верхнего пиксела нашего Bitmap'а. При втором способе мы просто определяем, какой конкретный цвет у Bitmap'а будет считаться прозрачным (за это отвечает свойство TransparentColor типа TColor). Установка того или иного способа определения прозрачных пикселов задается свойством TransparentMode (возможные значения для него - tmAuto и tmFixed соответственно). И в том, и в другом случае надо установить свойство Transparent для Bitmap в true. А вот и пример кода:

//Установка свойства прозрачности

Bitmap.Transparent:=true;

//Установка цвета левого верхнего

//пиксела в качестве прозрачного

Bitmap.TransparentMode:=tmAuto;

Form1.Canvas.Draw(0, 0, Bitmap);

//Установка конкретного цвета (красного)

//в качестве прозрачного

Bitmap.TransparentMode:=tmFixed;

Bitmap.TransparentColor:=RGB(255, 0, 0);

Form1.Canvas.Draw(20, 0, Bitmap);

Вот результат нашего фрагмента:

Для первой картинки прозрачный цвет - это цвет левого верхнего пиксела, для второй - красный цвет.

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