ЧАСТЬ 1
§4.1 Свойство Canvas
Delphi позволяет разрабатывать программы, которые могут выводить на экран графику: схемы, чертежи, иллюстрации, создавать собственные изображения или включать в программу готовые графические файлы.
Для создания собственных графических избражений используется свойство Canvas. Такие объекты Delphi как формы, Image, BitMap имеют это свойство. Для вывода на экран графических элементов (прямую линию, круг, прямоугольник и т. д.), необходимо применить к свойству Canvas этого объекта соответствующий метод. Свойства позволяют задавать характеристики графических изображений: цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выведении текстовой информации.
Canvas переводится с английского языка как «холст», «полотно для рисования». Полотно состоит из отдельных точек - пикселей. Положение пикселя характеризуется его горизонтальной (X) и вертикальной (Y) координатами. Левый верхний пиксель имеет координаты (0, 0) и расположен в верхнем левом углу компонента. Координаты увеличиваются сверху вниз и слева направо, т.е., если ось Х направлена слева направо, как это принять при построении математических графиков, то ось У сверху (У=0) вниз (У увеличивается). Значения координат правой нижней точки полотна зависят от размера холста. Например, если рисуют на форме, то это ее ширина и высота.
Когда мы начинаем рисовать, то берем в руки карандаш и наносим на бумагу контур рисунка, а затем кистью или фломастером закрашиваем изображение. Аналогичный подход реализован при использовании свойства canvas.
Карандаш (Реn) применяется для вычерчивания линий и контуров на полотне, а кисть (Brush) — для закрашивания областей, ограниченных контурами. Если для них не заданы свойства, то рисунок создается черным карандашом толщиной в один пиксель и заливка происходит белым цветом.
Чтобы задать цвет карандаша используют его свойство цвета (Color).
Pen.Color — Определяет цвет, используемый для изображения. Чтобы изменить цвет используют оператор Canvas.Pen.Color:= rgb(255,0,0), где выбор цветов осуществляется по технологии RGB. В нашем примере выбран карандаш красного цвета.
При создании изображения сначала задают цвет и при необходимости толщину карандаша, а потом уже рисуют.
Линии могут быть сплошными или состоящими из точек и пунктиров.
Pen.Style — Определяет стиль, которым рисуются линии и имеет следующие варианты:
psSolid — Сплошная линия;
psDash — Линия из серии разрывов;
psDot — Линия из точек;
psDashDot — Линия из разрывов и точек;
psDashDotDot — Линия вида точка, точка, разрыв;
psClear —Линия не изображается.
Например, Canvas.Pen.Style:= psDashDotDot; задает изображение фигуры карандашом в виде двух точек и разрыва.
Карандаш может быть толстым или тонким.
Pen.Width – Задает толщину карандаша, например, Canvas.Pen.Width:=5;
Если значение свойства Canvas.Pen.width больше единицы, то пунктирные линии будут выведены как сплошные.
Свойство Brush позволяет заполнить цветом и штриховкой области, включая внутреннюю часть форм.
Canvas.brush.color:=rgb(0,255,0); задает зеленый цвет, заполняющий фигуру.
Brush.Style задает вид штриховки.
Возможные варианты заполнения областей показаны на рис.4.1.
Рисунок 4.1 – Задание стилей штриховки при заполнении областей
 |
Оператор Canvas.brush.style:= bsDiagCross; задает заполнение области в виде решетки, Canvas.brush.style:= bsVertical; заполняет область вертикальными линиями.
Один из способов создания изображений – это рисование пикселями. Каждая точка (пиксель) характеризуется координатами и цветом, оператор Canvas. Pixels[Х,У]:= rgb(0,0,0); задает точку с координатами Х и У черного цвета, где Х- номер пикселя по горизонтали, а У – по вертикали.
На рис.4.2 показаны различные варианты заполнения областей компонента Image с помощью пикселей. Ниже приводится текст программы.
procedure TForm1.Button1Click(Sender: TObject);
var i,j,k,f:integer;
begin
with image3.Canvas do begin { Рисование происходит в объекте Image }
f:=0; i:=0; { Заполнение цветом области 1, рис.4.2 }
while i<=100 do begin { Переменная i определяет позицию пикселя по вертикали (У)}
j:=0; k:=0; f:=f+1;
while j<=100 do { Переменная j определяет позицию пикселя по горизонтали (Х)}
begin
k:=k+1; if (k <= 9) and (f <=9) then
{ Задается величина черных квадратов }
Pixels[ j,i]:=rgb(0,0,0) { Задается цвет квадратов }
else
if k>17 then k:=0; j:=j+1;
if f>17 then f:=0; end;
i:=i+1;
end;
while i<=100 do { Заполнение цветом области 2, рис.4.2 }
begin
j:=100;
while j<=200 do
begin
k:=k+1; if (k <= 9) then
Pixels[ j,i]:=rgb(0,0,0) else if k<17 then k:=0;
j:=j+1;
end;
i:=i+1;
end;
{ Заполнение цветом области 3, рис.4.2 }
k:=0; i:=0; j:=100;
while i<=100 do
begin
j:=100;
while j<=200 do
begin
Pixels[ i,j]:=rgb(0,0,0); j:=j+1;
end;
i:=i+10;
end;
while i<=200 do { Заполнение цветом области 4, рис.4.2 }
begin
j:=100;
while j<=200 do
begin
if i=j then Pixels[ j,i]:=rgb(255,255,255)
else Pixels[ j,i]:=rgb(0,0,0); j:=j+7;
i:=i+1;
end;
end;
end;
end;
Как видно из рисунка, использование пикселей позволяет создавать различные точечные варианты заливки областей или создавать точечные изображения.
Рисунок 4.2 - Варианты использования свойства Pixels
Canvas.MoveTo(х, у);
В табл.4.1 приводятся наиболее распространенные методы Canvas. Пример использования Canvas.MoveTo и LineTo в строке 1.
| canvas.moveto(400,300); {Устанавливаем карандаш в первую позицию} Canvas.lineto(350,350); {Рисуем линии} Canvas.lineto(450,350); Canvas.lineto(400,300); Canvas.moveto(440,350); Canvas.lineto(440,400); Canvas.lineto(360,400); Canvas.lineto(360,350); | 
| |
| Canvas.Pen.Width:=10; Canvas.pen. color:=rgb(0,0,0); Canvas.Arc(200,100,300,200,250,200,50,90); | 
| |
| Canvas.ellipse(200,100,300,300); | 
| |
| Canvas.Brush.Style:=bsCross; Canvas.Brush.color:=rgb(0,0,0); Canvas.rectangle(200,100,300,250); | 
| |
| Canvas.brush.style:=bsdiagcross; Canvas.Brush.color:=rgb(0,0,0); Canvas.RoundRect(100,100,200,150,50, 50); | 
| |
| Canvas.Brush.Color:= clTeal; Canvas.Polygon([Point(150, 50), Point(120, 80),Point(140,80), Point(90,110), Point(140, 110), Point(60,140), Point(240,140), Point(160,110), Point(210,110), Point(160, 80), Point(180, 80)]); | 
| |
| Canvas.Brush.Color:= clTeal; Canvas.Pen.Color:=rgb(0,0,0); Canvas.Pen.Width:=3; Canvas.Polyline([Point(140,110), Point(120,160), Point(170,130), Point(110,130), Point(160,160), Point(140, 110)]); | 
| |
| Canvas.brush.style:=bsdiagcross; Canvas.brush.color:=rgb(128,128,128); for i:=0 to 5 do Сanvas.Pie(200+i*10,300+i*10,300+i*10,400+i*10,300+i*10,350+i*10,200+i*10,350+i*10); | 
| |
| Canvas.chord(200,200,400,400,100,415, 500,445); | 
| |
| Refresh | Очистка экрана |
Еще один пример построения линий показан ниже. В программе организован цикл, позволяющий с помощью оператора Case перебрать возможные варианты стиля карандаша. Рисуется пять линий единичной толщины, смещенных по вертикали на 40 пикселей относительно друг друга.
procedure TForm1.N12Click(Sender: TObject);
var i:integer;
begin for i:=0 to 4 do begin
case i of
0: Canvas.Pen.Style:= psSolid;
1: Canvas.Pen.Style:= psDash;
2: Canvas.Pen.Style:= psDot;
3: Canvas.Pen.Style:= psDashDot;
4:Canvas.Pen.Style:=sDashDotDot; end;
Canvas.moveto(50,50+i*40);
Canvas. lineto(150, 50+i*40);
end;
end;
Для изображения дуг используется свойство Arc с параметрами (X1, Y1, X2, Y2, X3, Y3, X4, Y4);
Arc рисует дугу, являющуюся частью эллипса, ограниченного точками (X1,Y1) и (X2,Y2). Дуга рисуется против часовой стрелки от начальной точки, которая определяется пересечением эллипса и точки (X3,Y3) и конечной точки (X4, Y4). В строке 2 табл.4.1. показан образец построения дуги, прямоугольник, в который вписывается эллипс, отображен пунктиром.
В строке 3 табл.4.1 показан пример построения эллипса. Canvas.Ellipse (X1, Y1, X2, Y2) изображает круг или эллипс, которые вписываются в прямоугольник с координатами верхней левой точки (X1, Y1) и правой нижней точки (X2, Y2). Если точки прямоугольника формируют квадрат, изображается круг.
Для изображения прямоугольников и квадратов используют Canvas. Rectangle (X1, Y1, X2, Y2), причем координата верхней левой точки (X1, Y1) и правой нижней точки (X2, Y2) (строка 4 табл.4.1).
Чтобы изобразить закругленный прямоугольник, используется метод RoundRect (X1, Y1, X2, Y2, R1,R2). Первые четыре параметра, передаваемые в RoundRect, являются координатами прямоугольника, следующие два параметра указывают на то, как изобразить закругленные углы.
В строке 5 табл.4.1 изображен закругленный прямоугольник с закругленными углами, как секции круга с диаметром R1=R2=50 pixels.
Ломаную замкнутую линию можно изобразить с помощью метода Polygon ([Point(x1, y1), Point(x2, y2), Point(x3, y3),... Рoint(xn, yn)]). Point определяет координаты точек, входящих в линию. Если изображение создается с помощью Lineto, то его внутреннюю часть нельзя закрасить, используя Brush.color. Метод Polygon позволяет задавать закраску внутренней части изображения. В строке 6 табл.4.1 показана нарисованная елка заданного цвета.
Метод Polyline ([Point(x1, y1), Point(x2, y2), Point(x3, y3),... Рoint(xn, yn)]) имеет те же параметры, но внутреннюю часть изображения не закрашивают (см. строку 7 табл.4.1). Хотя в приводимой части программы был задан цвет, нарисованная звездочка имеет только черный контур, внутренняя часть изображения осталась белой.
Часть эллипса можно изобразить с помощью метода Pie (X1, Y1, X2, Y2, X3, Y3, X4, Y4); где X1, Y1, X2, Y2 – координаты прямоугольника, в который вписан эллипс, X3, Y3, X4, Y4 – координаты точек, в которые проводятся радиусы. В строке 8 табл.4.1 показан вариант построения в цикле сразу шести частей.
Метод Chord (X1, Y1, X2, Y2, X3, Y3, X4, Y4) используется для создания замкнутых фигур, ограниченных эллипсом с координатами (X1, Y1, X2, Y2) и линией (X3, Y3, X4, Y4), см. строку 9 табл.4.1.
Рассмотрим использование свойства Canvas на примерах. Рассмотри программу, которая выполняет следующие функции:
ü При включении таймера каждые пять миллисекунд рисуется круг с произвольными координатами.
ü Если количество нарисованных кругов более 350, то увеличивается интервал работы таймера и увеличивается радиус нарисованных кругов. Если искать аналогию, то можно предстваить, что сначала идет мелкий быстрый снег. А затем крупные снежинки падают все медленнее. Если количество изображений превысило 350, происходит очистка экрана.
ü Выбор стиля и цвета происходит случайным образом.
procedure TForm1.Timer1Timer(Sender: TObject);
Var X, Y, S,R: Integer;
begin
Timer1.Interval:= 5; Randomize;
k:=k+1; {Счетчик количества кругов}
s:=10; { Величина для получения случайного значения радиуса}
if k>350 then begin k:=0;refresh; end {Очистка экрана, если более 350 объектов}
else if k>250 then begin {Если количество объектов более 250, то изменяется интервал таймера и размер радиуса}
timer1.Interval:=10; s:=20; end;
X:= Random(form1.Width — 200); {Выработка случайных значений координат}
Y:= Random(form1.Height — 200);
Canvas.Pen.Color:= Rgb(0,0,0); Canvas.Pen.width:= 1;
if k mod 3=0 then Canvas.brush.Color:=rgb(255,0,0)
else if k mod 3=1 then Canvas.brush.Color:=rgb(0,255,0)
else Canvas.brush.Color:=rgb(0,0,255);
{В зависимости от значения k круги будут красного или зеленого или синего цвета}
{Случайный стиль заливки}
case k of
1: Canvas.brush.style:= bsSolid;
2: Canvas.brush.style:= bsClear;
3: Canvas.brush.style:= bsHorizontal;
4: Canvas.brush.style:= bsVertical;
5: Canvas.brush.style:= bsFDiagonal;
6: Canvas.brush.style:= bsBDiagonal;
7: Canvas.brush.style:= bsCross;
8: Canvas.brush.style:= bsDiagCross; end;
r:=1+ Random(s); {Случайная величина радиуса}
Canvas.ellipse(X, Y, X + r,y+r); {Рисуется окружность}
end;
Еще одна программа демонстрирует изображение нескольких прямоугольников с разным типом заливки. Каждый прямоугольник обведен черной линией с толщиной, равной шести.
procedure TForm1.N10Click(Sender: TObject);
var i:integer;
begin timer1.Enabled:=false;
for i:=1 to 8 do begin
case i of
1: Canvas.brush.style:= bsSolid;
2: Canvas.brush.style:= bsClear;
3: Canvas.brush.style:= bsHorizontal;
4: Canvas.brush.style:= bsVertical;
5: Canvas.brush.style:= bsFDiagonal;
6: Canvas.brush.style:= bsBDiagonal;
7: Canvas.brush.style:= bsCross;
8: Canvas.brush.style:= bsDiagCross; end;
Canvas.brush.Color:=rgb(0,0,255);
Canvas.pen.width:=6; Canvas.pen.color:=rgb(255,0,0);
Canvas.rectangle(10,50+i*30,90,i*30+ 80);
end; end;
Вывод текста в графическом режиме
Для выведения текста на поверхность графического объекта используется метод TextOut. Оператор вызова метода TextOut в общем виде выглядит следующим образом: