Программа выводит графику на поверхность объекта (формы или компонента Image). Поверхности объекта соответствует свойство canvas. Для того чтобы вывести на поверхность объекта графический элемент (прямую линию, окружность, прямоугольник и т. д.), необходимо применить к свойству canvas этого объекта соответствующий метод. Например, инструкция Form1.Canvas.Rectangle (10,10,100,100) вычерчивает в окне программы прямоугольник.

Холст

Как было сказано ранее, поверхности, на которую программа может выводить графику, соответствует свойство Canvas. В свою очередь, свойство canvas — это объект типа TCanvas. Методы этого типа обеспечивают вывод графических примитивов (точек, линий, окружностей, прямоугольников и т. д.), а свойства позволяют задать характеристики выводимых графических примитивов: цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выводе текстовой информации.

Методы вывода графических примитивов рассматривают свойство Canvas как некоторый абстрактный холст, на котором они могут рисовать (canvas переводится как "поверхность", "холст для рисования"). Холст состоит из отдельных точек — пикселов. Положение пиксела характеризуется его горизонтальной (X) и вертикальной (Y) координатами. Левый верхний пиксел имеет координаты (0, 0). Координаты возрастают сверху вниз и слева направо (рис. 10.1). Значения координат правой нижней точки холста зависят от размера холста.

Рис. 10.1. Координаты точек холста

Размер холста можно получить, обратившись к свойствам Height и width области иллюстрации (image) или к свойствам формы: ClientHeight и Clientwidth.

Карандаш и кисть

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

Карандашу и кисти, используемым для вывода графики на холсте, соответствуют свойства Реn (карандаш) и Brush (кисть), которые представляют собой объекты типа треп и TBrush, соответственно. Значения свойств этих объектов определяют вид выводимых графических элементов.

Для вывода текста на поверхность графического объекта используется метод TextOut. Инструкция вызова метода TextOut в общем виде выглядит следующим образом:

Объект.Canvas.TextOut(x, у, Текст)

где:
объект — имя объекта, на поверхность которого выводится текст;
х, у — координаты точки графической поверхности, от которой выполняется вывод текста (рис. 10.3);
Текст — переменная или константа символьного типа, значение которой определяет выводимый методом текст.

Шрифт, который используется для вывода текста, определяется значением свойства Font соответствующего объекта canvas. Свойство Font представляет собой объект типа TFont. В табл. 10.7 перечислены свойства объекта TFont, позволяющие задать характеристики шрифта, используемого методами TextOut и TextRect для вывода текста.

Внимание!

Область вывода текста закрашивается текущим цветом кисти. Поэтому перед выводом текста свойству Brush.Color нужно присвоить значение bsClear или задать цвет кисти, совпадающий с цветом поверхности, на которую выводится текст.

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

with Form1.Canvas do begin

// установить характеристики шрифта

Font.Name := 'Tahoma';

Font.Size := 20;

Font.Style := [fsltalic, fsBold] ;

Brush.Style := bsClear; // область вывода текста не закраши-

TextOut(0, 10, 'Borland Delphi 7');

end;

После вывода текста методом Textout указатель вывода (карандаш) перемещается в правый верхний угол области вывода текста.

Иногда требуется вывести какой-либо текст после сообщения, длина которого во время разработки программы неизвестна. Например, это может быть слово "руб." после значения числа, записанного прописью. В этом случае необходимо знать координаты правой границы уже выведенного текста. Координаты правой границы текста, выведенного методом Textout, можно получить, обратившись к свойству PenPos.

Следующий фрагмент программы демонстрирует возможность вывода строки текста при помощи двух инструкций Textout.

with Form1.Canvas do begin

TextOut(0, 10, 'Borland ') ;

TextOut(PenPos.X, PenPos.Y, 'Delphi 7');

end;

Методы вычерчивания графических примитивов

Любая картинка, чертеж, схема могут рассматриваться как совокупность графических примитивов: точек, линий, окружностей, дуг и др. Таким образом, для того чтобы на экране появилась нужная картинка, программа должна обеспечить вычерчивание (вывод) графических примитивов, составляющих эту картинку.

Вычерчивание графических примитивов на поверхности компонента (формы или области вывода иллюстрации) осуществляется применением соответствующих методов к свойству Canvas этого компонента.

Вычерчивание прямой линии осуществляет метод LinеТо, инструкция вызова которого в общем виде выглядит следующим образом:

Компонент.Canvas.LineTo(x,у)

Метод LinеТо вычерчивает прямую линию от текущей позиции карандаша в точку с координатами, указанными при вызове метода.

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

Вид линии (цвет, толщина и стиль) определяется значениями свойств объекта Реп графической поверхности, на которой вычерчивается линия.

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




 Форма приложения Координатная сетка. Оси координат и оцифрованная сетка

unit grid_;

interface

uses

Windows, Messages, SysUtils, Classes,

Graphics, Controls, Forms, Dialogs, StdCtrls;

type

TForm1 = class(TForm)

procedure FormPaint(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1; implementation

{$R *.DFM}

procedure TForm1.FormPaint(Sender: TObject);

var

x0,y0:integer; // координаты начала координатных осей

dx,dy:integer; // шаг координатной сетки (в пикселах)

h,w:integer; // высота и ширина области вывода координатной сетки

х,у:integer;

lx,ly:real; // метки (оцифровка) линий сетки по X и Y

dlx,dly:real; // шаг меток (оцифровки) линий сетки по X и Y

cross:integer; // счетчик неоцифрованных линий сетки

dcross:integer;// количество неоцифрованных линий между оцифрованными

begin

х0:=30; у0:=220; // оси начинаются в точке (40,250)

dx:=40; dy:=40; // шар координатной сетки 40 пикселов

dcross:=1; // помечать линии сетки X: 1 — каждую;

// 2 — через одну;

// 3 — через две;

dlx:=0.5; // шаг меток оси X

dly:=1.0; // шаг меток оси Y, метками будут: 1, 2, 3 и т. д.

h:=200; w:=300;

with forml.Canvas do begin

cross:=dcross;

MoveTo(x0,v0); LineTo(x0,y0-h); // ось X

MoveTo(x0,y0); LineTo(x0+w, y0); // ось Y

// засечки, сетка и оцифровка по оси X

x:=x0+dx;

lx:=dlx;

repeat

MoveTo(x,y0-3);LineTo(x,yO+3); // засечка

cross:=cross-l;

if cross = 0 then // оцифровка

begin

TextOut(x-8,y0+5,FloatToStr(lx));

cross:=dcross ; end;

Pen.Style:=psDot;

MoveTo(x,y0-3);LineTo(x,y0-h); // линия сетки

Pen.Style:=psSolid;

lx:=lx+dlx;

x:=x+dx;

until (x>x0+w);

// засечки, сетка и оцифровка по оси Y

y:=y0-dy;

ly:=dly;

repeat

MoveTo(х0-3,у);LineTo(х0+3,у); // засечка

TextOut(х0-20,у,FloatToStr(1у)); // оцифровка

Pen.Style:=psDot;

MoveTo(х0+3,у); LineTo(x0+w,у); // линия сетки

Pen.Style:=psSolid;

y:=y-dy;

ly:=ly+dly; until (y<y0-h);

end;

end;

end.

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

                                                      Окружность и эллипс

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

Объект.Canvas.Ellipse(x1,y1, х2,у2]

где:
объект — имя объекта (компонента), на поверхности которого выполняется вычерчивание;
x1, y1, х2, у2 — координаты прямоугольника, внутри которого вычерчивается эллипс или, если прямоугольник является квадратом, окружность (рис. 10.6).

Цвет, толщина и стиль линии эллипса определяются значениями свойства Реп, а цвет и стиль заливки области внутри эллипса — значениями свойства Brush поверхности (canvas), на которую выполняется вывод.

                                                                Дуга

Вычерчивание дуги выполняет метод Arc, инструкция вызова которого в общем виде выглядит следующим образом:

Объект.Canvas.Arc(x1,y1,х2,у2,х3,у3,х4,у4)

где:
x1, y1, х2, у2 — параметры, определяющие эллипс (окружность), частью которого является вычерчиваемая дуга;
х3, у3 — параметры, определяющие начальную точку дуги; П х4, у4 — параметры, определяющие конечную точку дуги.

Начальная (конечная) точка — это точка пересечения границы эллипса и прямой, проведенной из центра эллипса в точку с координатами х3 и у3 (х4, у4). Дуга вычерчивается против часовой стрелки от начальной точки к конечной (рис. 10.7).

Цвет, толщина и стиль линии, которой вычерчивается дуга, определяются значениями свойства Реп поверхности (canvas), на которую выполняется вывод.

                                                          Прямоугольник

Прямоугольник вычерчивается методом Rectangle, инструкция вызова которого в общем виде выглядит следующим образом:

Объект.Canvas.Rectangle(x1, y1,x2, y2)

где:
объект — имя объекта (компонента), на поверхности которого выполняется вычерчивание;
x1, y1 и х2, у2 — координаты левого верхнего и правого нижнего углов прямоугольника.

Метод RoundRec тоже вычерчивает прямоугольник, но со скругленными углами. Инструкция вызова метода RoundRec выглядит так:

Объект.Canvas.RoundRec(x1,y1,х2, у2, х3, у3)

где:
x1, y1, х2, у2 -- параметры, определяющие положение углов прямоугольника, в который вписывается прямоугольник со скругленными углами;
х3 и у3 — размер эллипса, одна четверть которого используется для вычерчивания скругленного угла (рис. 10.8).

Вид линии контура (цвет, ширина и стиль) определяется значениями свойства Реп, а цвет и стиль заливки области внутри прямоугольника — значениями свойства Brush поверхности (canvas), на которой прямоугольник вычерчивается.

Есть еще два метода, которые вычерчивают прямоугольник, используя в качестве инструмента только кисть (Brush). Метод FillRect вычерчивает закрашенный прямоугольник, а метод FrameRect — только контур. У каждого из этих методов лишь один параметр — структура типа TRect. Поля структуры TRect содержат координаты прямоугольной области, они могут быть заполнены при помощи функции Rect.

Ниже в качестве примера использования методов FillRect и FrameRect приведена процедура, которая на поверхности формы вычерчивает прямоугольник с красной заливкой и прямоугольник с зеленым контуром.

procedure TForm1.Button1Click(Sender: TObject);

var

r1, r2: TRect; // координаты углов прямоугольников

begin

// заполнение полей структуры

// зададим координаты углов прямоугольников

r1 := Rect(20,20,60,40);

r2 := Rect(10,10,40,50);

with fоrm1.Canvas do begin

Brush.Color := clRed;

FillRect(r1); // закрашенный прямоугольник

Brush.Color := clGreen;

FrameRect(r2}; // только граница прямоугольника

end;

end;

                                                     Многоугольник

Метод Polygon вычерчивает многоугольник. В качестве параметра метод получает массив типа TPoint. Каждый элемент массива представляет собой запись, поля (х,у) которой содержат координаты одной вершины многоугольника. Метод Polygon вычерчивает многоугольник, последовательно соединяя прямыми линиями точки, координаты которых находятся в массиве: первую со второй, вторую с третьей, третью с четвертой и т. д. Затем соединяются последняя и первая точки.

Цвет и стиль границы многоугольника определяются значениями свойства Реп, а цвет и стиль заливки области, ограниченной линией границы, — значениями свойства Brush, причем область закрашивается с использованием текущего цвета и стиля кисти.

Ниже приведена процедура, которая, используя метод polygon, вычерчивает треугольник:

procedure TForm1.Button2Click(Sender: TObject);

var

pol: array[1..3] of TPoint; // координаты точек треугольника

begin

pol[1].x := 10;

polf1].y := 50;

pol[2].x := 40;

pol[2].y := 10;

pol[3].х := 70;

pol[3].у := 50;

Form1.Canvas.Polygon(pol);

end;

                                                                    Сектор

Метод pie вычерчивает сектор эллипса или круга. Инструкция вызова метода в общем виде выглядит следующим образом:

Объект. Canvas.Pie(x1,y1,x2,y2,х3,у3,х4,у4)

где:
x1, y1, х2, у2 — параметры, определяющие эллипс (окружность), частью которого является сектор;
х3, у3, х4, у4 — параметры, определяющие координаты конечных точек прямых, являющихся границами сектора.

Начальные точки прямых совпадают с центром эллипса (окружности). Сектор вырезается против часовой стрелки от прямой, заданной точкой с координатами (хЗ, уз), к прямой, заданной точкой с координатами (х4, у4).

                                                         Битовые образы

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

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

Например, если в программе объявлена переменная pic типа TBitMap, то после выполнения инструкции

pic.LoadFromFiie('е:\images\aplane.bmp')

битовый образ pic будет содержать изображение самолета.

Вывести содержимое битового образа (картинку) на поверхность формы или области вывода иллюстрации можно путем применения метода Draw к соответствующему свойству поверхности (canvas). Например, инструкция

Image1.Canvas.Draw(x,у, bm)

выводит картинку битового образа bm на поверхность компонента image 1 (параметры х и у определяют положение левого верхнего угла картинки на поверхности компонента).

Если перед применением метода Draw свойству Transparent объекта TBitMap присвоить значение True, то фрагменты рисунка, окрашенные цветом, совпадающим с цветом левого нижнего угла картинки, не будут выве-

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

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

Листинг 10.7. Использование битовых образов

unit aplanes_; interface

uses

Windows, Messages, SysUtils, Classes,

Graphics, Controls, Forms, Dialogs;

type

TForml = class(TForm)

procedure FormPaint(Sender: TObject);

private

{ Private declarations }

public

{ Public declarations }

end;

var

Forml: TForm1;

sky,aplane: TBitMap; // битовые образы: небо и самолет

implementation

($R *.DFM}

procedure TForm1.FormPaint(Sender: TObject);

begin

// создать битовые образы

sky := TBitMap.Create;

aplane := TBitMap.Create;

// загрузить картинки

sky.LoadFromFile('sky.bmp');

aplane.LoadFromFile('aplane.bmp') ;

Form1.Canvas.Draw(0,0,sky); // отрисовка фона

Form1.Canvas.Draw(20,20,aplane); // отрисовка левого самолета

aplane.Transparent:=True;

// теперь элементы рисунка, цвет которых совпадает с цветом

// левой нижней точки битового образа, не отрисовываются Form1.Canvas.Draw(120,20,aplane);

// отрисовка правого самолета

// освободить память sky.free; aplane.free;

end;

end.


                                             Создание файла ресурсов                                                

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

Файл ресурсов можно создать при помощи утилиты Image Editor (Редактор изображений), которая запускается выбором команды Image Editor меню Tools.

Для того чтобы создать новый файл ресурсов, надо из меню File выбрать команду New, а затем в появившемся подменю — команду Resource File (Файл ресурсов)

В результате открывается окно нового файла ресурсов, а в строке меню окна Image Editor появляется новый пункт — Resource.

Для того чтобы в этот файл добавить новый ресурс, необходимо выбрать команду New меню Resource и из открывшегося списка — тип ресурса. В данном случае следует выбрать Bitmap (битовый образ). После выбора Bitmap открывается диалоговое окно Bitmap Properties (Свойства битового образа), используя которое можно установить размер (в пикселах) и количество цветов создаваемой картинки.

Нажатие кнопки ОК в диалоговом окне Bitmap Properties вызывает появление элемента Bitmap1 в иерархическом списке Contents. Этот элемент соответствует новому ресурсу, добавленному в файл .

Bitmap1 — это автоматически созданное имя ресурса, которое может быть изменено выбором команды Rename меню Resource и вводом нужного имени. После изменения имени Bitmap1 можно приступить к созданию битового образа. Для этого необходимо выбрать команду Edit меню Resource, в результате чего открывается окно графического редактора.

Графический редактор Image Editor предоставляет программисту стандартный для подобных редакторов набор инструментов, используя которые можно нарисовать нужную картинку. Если во время работы надо изменить масштаб отображения картинки, то для увеличения масштаба следует выбрать команду Zoom In меню View, а для уменьшения — команду Zoom Out. Увидеть картинку в реальном масштабе можно, выбрав команду Actual Size меню View.

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

1. Сначала надо запустить графический редактор, например Microsoft Paint, загрузить в него файл картинки и выделить всю картинку или ее часть. В процессе выделения следует обратить внимание на информацию о размере (в пикселах) выделенной области (Paint выводит размер выделяемой области в строке состояния). Затем, выбрав команду Копировать меню Правка, следует поместить копию выделенного фрагмента в буфер.

2. Далее нужно переключиться в Image Editor, выбрать ресурс, в который надо поместить находящуюся в буфере картинку, и установить значения характеристик ресурса в соответствии с характеристиками картинки, находящейся в буфере. Значения характеристик ресурса вводятся в поля диалогового окна Bitmap Properties, которое открывается выбором команды Image Properties меню Bitmap. После установки характеристик ресурса можно вставить картинку в ресурс, выбрав команду Past меню Edit.

3. После добавления всех нужных ресурсов файл ресурса следует сохранить в том каталоге, где находится программа, для которой этот файл создается. Сохраняется файл ресурса обычным образом, т. е. выбором команды Save меню File. Image Editor присваивает файлу ресурсов расширение res.