 |
Рассмотрим некоторые свойства более подробно.
|
|
|
|
Объект Canvas
Канва представляет собой область компонента, на которой можно рисовать или отображать готовые изображения. Сам по себе холст (Canvas) представляет собой поверхность, на которую можно выводить текст и иные графические изображения - линии, прямоугольники, эллипсы и т.д. Но при ближайшем рассмотрении можно увидеть, что этот холст представляет собой плоскость, состоящую из отдельных точек - пикселей. Пиксель - это базовый элемент графического ввода, представляющий собой отдельную точку. Фактически, при рисовании на холсте вы просто закрашиваете его отдельные точки тем или иным цветом. Но, разумеется, работая с холстом посредством методов, предоставляемых классом TCanvas, можно без лишних хлопот выводить не только точки, но и текст, линии, прямоугольники, многоугольники, окружности, и даже готовые изображения.
Канва состоит из отдельных точек – пикселей. Положение пикселя характеризуется его горизонтальной (X) и вертикальной (Y) координатами. Левый верхний пиксель имеет координаты (0, 0). Координаты возрастают сверху вниз и слева направо. Значения координат правой нижней точки холста зависят от размера холста. Размер канвы можно получить, обратившись к свойствам Height и Width области иллюстрации (image) или к свойствам формы: ClientHeight и Clientwidth. Вид выводимых на канву графических элементов определяется свойствами канвы Pen (карандаш) и Brush (кисть). Свойство Pen отвечает за внешний вид вычерчиваемых линий и контуров, свойство Brush – за заливку областей, ограниченных контурами.
На канву можно также загрузить изображение из файла либо вывести на неё текст.
Рассмотрим основные свойства и методы объекта Canvas, обратившись к таблице 1. При их рассмотрении имейте в виду, что все геометрические фигуры рисуются текущим пером. Те из них, которые можно закрашивать, закрашиваются с помощью текущей кисти. Кисть и перо при этом имеют текущий цвет.
|
|
|
Таблица 1
| Свойство (метод) | Тип значений или параметры | Описание |
| Pixels | Матрица TColor | Предоставляет доступ к любому пикселю холста, чтобы узнать или изменить его цвет |
| Pen | TPen | Свойства пера для черчения линий |
| Brush | TBrush | Свойства кисти для заполнения внутренних областей фигур |
| Font | TFont | Свойства шрифта для вывода текста |
| MoveTo | X, Y: Integer | Устанавливает текущую позицию пера |
| LineTo | X, Y: Integer | Проводит линию от текущей позиции к указанной |
| TextOut | X, Y: Integer; const Text: string | Выводит заданный текст, начиная с указанных координат |
| function TextHeight | (const Text: string): Integer | Задает высоту строки Text в пикселах |
| function TextWidth | (const Text: string): Integer | Задает ширину строки Text в пикселах |
| TextRect | (Rect: TRect; X, Y: Integer; const Text: string) | Производит вывод текста с отсечением. Как и в TextOut, строка Text выводится с позиции (X, Y); при этом часть текста, лежащая вне пределов прямоугольника Rect, отсекается и не будет видна |
| Rectangle | X1, Y1, X2, Y2: Integer или Rect: TRect | Рисует прямоугольник указанных размеров. Цвет рамки определяется текущим значением свойства Pen, а цвет заливки – свойством Brush |
| RoundRect | (XI, Yl, X2, Y2, X3, Y3: Integer) | Рисует прямоугольник с закругленными углами. Координаты вершин — те же, что и в методе Rectangle. Закругления рисуются как сегменты эллипса с размерами осей по горизонтали и вертикали ХЗ и Y3 |
| Ellipse | X1, Y1, X2, Y2: Integer или Rect: TRect | Рисует эллипс, вписанный в прямоугольник указанных размеров. Цвет рамки определяется текущим значением свойства Pen, а цвет заливки – свойством Brush |
| Polygon | Points: array of TPoint | Рисует многоугольник по указанным вершинам |
| PolyLine | Points: array of TPoint | Рисует ломаную линию, соединяющую указанные точки |
| PolyBezier | (const Points: array of TPoint) | Строит кривую Безье (кубический сплайн), используя массив координат точек Points |
| PolyBezierTo | (const Points: array of TPoint) | Строит кривую Безье (кубический сплайн), используя массив координат точек Points. Текущая точка используется в качестве первой |
| Draw | X, Y: Integer; Graphic: TGraphic | Выводит графическое изображение, начиная от указанных координат (левого верхнего угла) |
| DrawFocusRect | const Rect: TRect | Производит отрисовку прямоугольной рамки из точек (как на элементе, имеющем фокус ввода). Поскольку метод использует логическую операцию ХОР (исключающее ИЛИ), повторный вызов для того же прямоугольника приводит изображение к начальному виду |
| Arc | XI, Yl, Х2, Y2, ХЗ, Y3, Х4, Y4:Integer | Рисует дугу. Метод рисует сегмент эллипса. Эллипс определяется описывающим прямоугольником (X1.Y1)— (Х2, Y2); его размеры должны лежать в диапазоне от 2 до 32 767 точек. Начальная точка сегмента лежит на пересечении эллипса и луча, проведенного из его центра через точку (ХЗ, Y3). Конечная точка сегмента лежит на пересечении эллипса и луча, проведенного из его центра через точку (Х4, Y4). Сегмент рисуется против часовой стрелки |
| Chоrd | XI, Yl, X2, Y2, X3, Y3, X4, Y4: Integer | Рисует хорду и заливает отсекаемую ею часть эллипса. Эллипс, начальная и конечная точки определяются, как в методе Arc |
| RoundRect | Рисует прямоугольник со скругленными краями | |
| BrushCopy | (const Dest: TRect; Bitmap: TBitmap; const Source: TRect; Color: TColor) | Производит специальное копирование. Прямоугольник Source из битовой карты Bitmap копируется в прямоугольник Dest на канве; при этом цвет Color заменяется на цвет текущей кисти (Brush. Color). С помощью этого метода можно нарисовать "прозрачную" картинку. Для этого нужно выбрать соответствующий фону цвет кисти и затем заменить на него фоновый или наиболее часто встречающийся цвет битовой карты (см. Bitmap. TransparentColor) |
| CopyRect | const Dest: TRect; Canvas: TCanvas; const Source: TRect | Производит копирование прямоугольника Source из канвы Canvas в прямоугольник Dest в области самого объекта |
| FillRect | const Rect: TRect | Производит заливку прямоугольника (текущей кистью) |
| FrameRect | const Rect: TRect | Осуществляет рисование контура прямоугольника цветом текущей кисти (без заполнения) |
| FloodFill | (X, Y: Integer; Color: TColor; FillStyle: Tf illStyle); TFillStyle = (fsSurface, fsBorder) | Производит заливку области текущей кистью. Процесс начинается с точки (X, Y). Если режим FillStyle равен fsSurface, то он продолжается до тех пор, пока есть соседние точки с цветом Color. В режиме fsBorder закрашивание, наоборот, прекращается при выходе на границу с цветом Color |
| Pie | (XI, Yl, X2, Y2, X3, Y3, X4, Y4: Integer) | Рисует сектор эллипса, описываемого прямоугольником (Х1, Y1) — (Х2, Y2). Стороны сектора лежат на лучах, проходящих из центра эллипса через точки (ХЗ, Y3) и (Х4, Y4) |
| property ClipRect: TRect; | Определяет область отсечения канвы. То, что при рисовании попадает за пределы этого прямоугольника, не будет изображено. Свойство доступно только для чтения — его значение переустанавливается системой в контексте устройства, с которым связана канва | |
| property PenPos: TPoint; | Содержит текущую позицию пера канвы (изменяется посредством метода MoveTo) |
Где же найти ту канву, на которой предстоит рисовать? Во-первых, ею снабжены все потомки классов TGraphicControl и TCustomControl, т. е. почти все визуальные компоненты из Палитры компонентов; в том числе и форма. Во-вторых, канву имеет растровая картинка (класс TBitmap); вы можете писать и рисовать не на пустом месте, а на готовом изображении.
|
|
|
|
|
|
Рассмотрим некоторые свойства более подробно.
Начнем с Pixels. Это свойство, представляющее собой двумерный массив, содержит информацию о цвете каждой точки поверхности, описывая, таким образом, всю поверхность холста. Изменяя цвет той или иной точки, мы можем выводить изображения. Например, если нам надо изменить цвет точки в левом верхнем углу, мы можем написать такое выражение:
Canvas.Pixels[1,1]:=clRed;
Здесь мы обратились к 1-му элементу 1-го ряда массива, которой как раз и соответствует левому верхнему углу холста, и назначили ему значение clRed, т.е. установили красный цвет. У каждого пикселя две стандартных координаты: x — расстояние от левой границы холста, y — расстояние от верхней границы. Точка (0,0) — это левый верхний угол. Чтобы узнать или поменять цвет пикселя с координатами (x,y), используют обращение Canvas.Pixels[x,y].
Поскольку с использованием различных методов объекта Canvas можно выводить не только точки, но и различные фигуры, а так же текст, то остальные свойства как раз позволяют настроить параметры вывода этих фигур и текста. Так, для текста используется свойство Font, являющееся, в свою очередь, классом TFont и имеющим такие свойства, как Color (цвет), Name (гарнитура шрифта), Size (размер) и Style (стиль). Последнее свойство имеет 4 флага, позволяющих сделать шрифт полужирным, наклонным, подчеркнутым или зачеркнутым:
|
|
|
Canvas.Font.Color:=clBlue; //шрифт будет синего цвета
Canvas.Font.Name:='Arial'; //выбрана гарнитура Arial
Canvas.Font.Size:=12; //установлен размер шрифта в 12pt
Canvas.Font.Style:=[fsBold,fsItalic]; //шрифт будет полужирным наклонным
Что касается таких свойств холста, как Pen и Brush, то для них предусмотрено изменение цвета и стиля линии (для Pen) или заполнения (для Brush). Кроме того, для пера можно определить ширину линии и режим наложения цвета. Соответственно, мы имеем следующие свойства:
Color - определяет цвет линии для пера или заполнения для кисти;
Style - определяет стиль линии или заливки. Для линии возможны следующие значения: psSolid, psDash, psDashDot, psDashDotDot, psClera и psInsideFrame. Для заливки: bsSolid, bsClear, bsHorizontal, bsVertical, bsFDiagonal, bsBDiagonal, bsCross, bsDiagCross;
Width - определяет толщину линии в пикселях.
Следует учитывать, что изменить стиль линии возможно только в том случае, если ее толщина установлена в 1 пиксель (что, впрочем, является значением по умолчанию). При любом другом значении толщины линия всегда будет сплошной - psSolid.
У пера Pen имеется еще одно свойство, которое мы пока не рассматривали. Это свойство — Mode (режим). По умолчанию значение Mode = pmCopy. Это означает, что линии проводятся цветом, заданным в свойстве Color. Но возможны и другие режимы, в которых учитывается не только цвет Color, но и цвет соответствующих пикселей фона. Наиболее интересным из этих режимов является режим pmNotXor — сложение с фоном по инверсному исключающему ИЛИ. Если задан этот режим, то повторное рисование той же фигуры на том же месте канвы убирает ранее нарисованное изображение и восстанавливает цвета пикселей, которые были до первого изображения фигуры.
Эту особенность режима pmNotXor можно использовать для создания простенькой анимации. Достаточно нарисовать нечто, затем стереть нарисованное, перерисовать немного измененным — и рисунок будет представляться ожившим.
Черчение фигур
Чтобы лучше представить себе использование объекта Canvas, попробуем использовать его свойства и методы для рисования фигур. Для начала попробуем вывести простую линию на поверхность формы, для чего создадим новое приложение, щелкнем по автоматически созданной форме (Form1), после чего перейдем в окно инспектора объекта и на закладке Events дважды щелкнем по строке напротив надписи OnClick. В ответ на это Delphi создаст обработчик события FormClick в редакторе кода:
|
|
|
procedure TForm1.FormClick(Sender: TObject);
Begin
end;
Теперь остается поместить в него код, рисующий линию. Поскольку у формы уже имеется свойство Canvas, то будет достаточно просто обратиться к его методам MoveTo и LineTo. Пусть линия начнется в точке со смещением в 10 пикселей от левого верхнего угла по вертикали и горизонтали, и продлится до точки в 200 пикселей по горизонтали. В результате код получится следующим:
procedure TForm1.FormClick(Sender: TObject);
Begin
Form1.Canvas.MoveTo(10,10);
Form1.Canvas.LineTo(200,10);
end;
Теперь остается запустить приложение и щелкнуть по любому месту на форме. Результатом будет вывод тонкой горизонтальной линии. Добавив к коду процедуры вызов метода Ellipse, мы получим построение эллипса, а Rectangle - прямоугольника:
Form1.Canvas.Ellipse(30,30,150,150);
Form1.Canvas.Rectangle(230,30,350,150);
Здесь в обоих случаях мы построили правильные фигуры, т.е. окружность и квадрат. Но поскольку для класса TCanvas не определены методы, строящие именно эти фигуры, то мы использовали методы для построения эллипса и прямоугольника, рассматривая окружность и квадрат как частные случаи этих типов фигур. В то же время, при необходимости можно было бы создать собственные методы, добавив их к классу TCanvas. Сделать это, на самом деле, несложно: достаточно определить новый класс, являющийся наследником TCanvas, и определить для него 2 новых метода. Назовем такой класс TMyCanvas, а методы - Circle и Square:
TMyCanvas = class(TCanvas)
procedure Circle(Rad, X, Y: integer);
procedure Square(Size, X, Y: integer);
end;
Определение этого класса следует поместить в части interface, непосредственно после определения класса TForm1, которое уже размещено в модуле самой Delphi. В части же implementation мы определим сами эти функции:
procedure TMyCanvas.Circle(Rad, X, Y: integer);
Begin
end;
procedure TMyCanvas.Square(Size, X, Y: integer);
Begin
end;
Теперь остается написать код, выполняющий построение фигур. Для начала примем, тот факт, что для метода Circle параметр Rad означает радиус окружности, а параметры X и Y - ее центр. Таким образом, мы можем использовать унаследованный метод Ellipse, подставив нужные параметры в его вызов:
Ellipse(X-Rad, Y-Rad, X+Rad, Y+Rad);
Что касается метода Square, то его параметр Size будет означать размер стороны квадрата, а X и Y - координаты верхнего левого угла. Таким образом, можно использовать метод Rectangle, указав для него соответствующие параметры:
Rectangle(X, Y, X+Size, Y+Size);
Теперь, когда методы определены и новый класс готов, следует разобраться с тем, как его использовать. Прежде всего, нам понадобится определить переменную - экземпляр класса. Кроме того, нам понадобится создать ее, использовав конструктор Create. Ну и, наконец, используя свойство Handle (указатель), мы должны связать наш объект с холстом формы. Все это можно разместить во все том же методе обработки щелчка мышкой.
procedure TForm1.FormClick(Sender: TObject);
var
MC: TMyCanvas;
begin
MC:=TMyCanvas.Create; // используем конструктор родительского класса
MC.Handle:=Canvas.Handle; // назначаем холст окна областью вывода
MC.Circle(50,200,100); // рисуем окружность диаметром 50 пикселей
MC.Square(50,100,100); // рисуем квадрат со сторонами 50 пикселей
MC.Free;
end;
Разумеется, все методы, доставшиеся классу TMyCanvas в наследство от TCanvas, так же можно использовать, включая те же Create и Free, чем мы и воспользовались. Применительно к остальным свойствам и методам можно делать то же самое, например, установить толщину и цвет линии, вывести линию при помощи MoveTo и т.д.:
MC.Pen.Width:=3;
MC.Pen.Color:=clRed;
MC.MoveTo(10,10);
MC.LineTo(200,10);
MC.Brush.Style:=bsHorizontal;
Таким образом, можно оформить вывод фигур, при помощи заполнения, штриховкой, а линию сделать толще и изменить ее цвет.
Рис. Вывод графики на холст окна
|
|
|
