Графические возможности Delphi. Canvas.

Canvas обеспечивает пространство (холст, канву) для создания, хранения и модификации графических объектов. Canvas является основой графической подсистемы Delphi. Канва обеспечивает:

Ø  Загрузку и хранение графических изображений

Ø  Создание новых и изменение хранимых изображений с помощью пера, кисти, шрифта

Ø  Рисование и закраску различных фигур, линий, текстов

Ø  Комбинирование различных изображений

Система координат

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

Обратите внимание. Точка (0,0) находится в левом верхнем углу. Привычная для нас система координат “перевернута”

Каждая точка на самом деле представляет собой очень маленький прямоугольник (И поскольку это не совсем точка, то используются термин — “пиксел”).

Основные методы Canvas

Рассмотрим часть методов, при помощи которых можно создавать простые рисунки.

Arc

Рисует дугу окружности или эллипса

Arc(x1,y1,x2,y2,x3,y3,x4,y4: Integer)

Метод Arc рисует дугу окружности или эллипса с помощью текущих параметров пера Pen (эти параметры мы рассмотрим чуть ниже). Точки (x1,y1) и (x2,y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x3,y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4,y4). Дуга рисуется против часовой стрелки от начальной до конечной точки.

Пример.

 

Chord

Рисует заполненную замкнутую фигуру, ограниченную дугой окружности или эллипса и хордой

Chord (x1,y1,x2,y2,x3,y3,x4,y4:Integer);

Метод Chord рисует замкнутую фигуру: дугу окружности или эллипса, замкнутую хордой, с помощью текущих параметров пера Pen. Фигура заполняется текущим значением Brush (рассмотрим чуть ниже). Точки (x1,y1) и (x2,y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x3,y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4,y4). Дуга рисуется против часовой стрелки от начальной до конечной точки. Хорда соединяет точки(x3,y3) и (x4,y4).

Пример.

Draw

Рисует графическое изображение в указанную позицию канвы

Draw (x,y:Integer;Graphic:TGraphic);

 Метод Draw рисует изображение, содержащееся в объекте, указанном параметром Graphic, сохраняя исходный размер изображеня в его источнике и перенося изображение в область канвы объекта TCanvas, верхний левый угол которой определяется параметрами x и y. Источник изображения может быть битовой матрицей, пиктограммой или метафайлом.

Пример.

Рисует на канве формы Form1 изображение из компонента Bitmap1 в область с координатами левого верхнего угла (10,10).

DrawFocusRect

Рисует изображение прямоугольника в виде, используемом для отображения рамки фокуса, операцией XOR

DrawFocusRect (const Rect:TRect);

Метод DrawFocusRect рисует на канве в области Rect изображение прямоугольника в виде, используемом обычно для отображения рамки фокуса, т.е. точками. При рисовании используется операция XOR, что позволяет удалить изображение прямоугольника его повторной прорисовкой.

Пример.

Следующая совокупность обработчиков событий, связанных с мышью, рисует на канве компонента Image1 прямоугольную рамку размером 10 на 10 вокруг курсора и перетаскивает еепри перемещении мыши с нажатой кнопкой:

При нажатии кнопки мыши рисуется первая рамка, запоминаются координаты курсора и включается режим перемещения рамки (переменная drag = True). При перемещении мыши в режиме перемещения рамки стирается прежняя рамка, рисуется рамка в новой позиции и запоминаются новые координаты курсора. При отпускании кнопки мыши стирается рамка и выключается режим перемещения рамки.

Ellipse

Рисует заполненную окружность или эллипс

Ellipse (x1,y1,x2,y2:Integer);

Метод Ellipse рисует окружность или эллипс с помощью текущих параметров пера Pen. Фигура заполняется текущим значением Brush. Точки (x1,y1) и (x2,y2) определяют прямоугольник, описывающий эллипс.

Пример.

FillRect

Заполняет указанный прямоугольник канвы, используя текущее значение Brush.

FillRect(const: TRect);

Метод FillRect заполняет прямоугольник канвы, указанный параметром Rect, используя текущее значение Brush. Заполняемая область включает верхнюю и левую стороны прямоугольника, но не включает правую и нижнюю стороны.

Пример.

Очищает всю канву компонента Image1, заполняя ее фоном, если он установлен в свойстве Brush.

FloodFill

Закрашивает текущей кистью замкнутую область канвы, определенным цветом.

Type TFillStyle = (fsSurfase, fsBorder);

Procedure FloodFill (x,y:Integer;Color:TColor;FillStyle:TFillStyle);

Метод FloodFill закрашивает текущей кистью Brush замкнутую область канвы, определенным цветом и начальной точкой закрашивания (x,y). Точка с координатами x и y является произвольной внутренней точкой заполняемой области, которая может иметь произвольную форму. Граница этой области определяется сочетанием параметров Color и FillStyle. Параметр Color указывает цвет, который используется при определении границы закрашиваемой области, а параметр FillStyle определяет, как именно по этому цвету определяется граница. Если FillStyle = fsSurface, то заполняется область, закрашенная цветом Color, а на других цветах метод останавливается. Если FillStyle = fsBorder, то наоборот, заполняется область окрашенная любыми цветами, не равными Color, а на цвете Color метод останавливается.

Примеры.

1.

Приведенные операторы закрашивают белым цветом на канве компонента Image1 все пиксели, прилегающие к пикселю с координатами (x,y) и имеющие тот же цвет, что и этот пиксель.

2.

Приведенные операторы закрашивают белым цветом на канве компонента Image1 все пиксели, прилегающие к пикселю с координатами (x,y) и имеющие цвет, отличный от черного. При достижении черной границы области закраска останавливается.

FrameRect

Рисует на канве текущей кистью прямоугольную рамку.

FrameRect(const Rect:TRect);

Метод FrameRect рисует на канве прямоугольную рамку вокруг области Rect, используя установку текущей кисти Brush. Толщина рамки — 1 пиксель. Область внутри рамки кистью не закрашивается. Отличается от метода Rectangle тем, что рамка рисуется цветом кисти (в методе Rectangle — цветом пера Pen) и область не закрашивается (в методе Rectangle закрашивается).

Пример.

Рисует на канве формы Form1 черную рамку.

LineTo

Рисует на канве прямую линию, начинающуюся с текущей позиции пера и кончающуюся указанной точкой.

LineTo (x,y:Integer);

Метод LineTo рисует на канве прямую линию, начинающуюся с текущей позиции пера PenPos и кончающуюся точкой (x,y). Текущая позиция пера PenPos перемещается и кончающуюся точкой (x,y), исключая саму точку (x,y). Текущая позиция пера PenPos перемещается в точку (x,y). При рисовании используются текущие установки пера Pen.

Пример.

Рисует кусочно-ломаную прямую, соединяющую точки (x1,y1), (x2,y2) и (x3,y3).

MoveTo

Изменяет текущую позицию пера на заданную, ничего не рисуя при этом.

MoveTo(x,y:Integer);

Метод MoveTo изменяет текущую позицию пера на заданную точкой (x,y). Это эквивалентно непосредственной установке свойства PenPos. При перемещении пера методом MoveTo ничего не рисуется.

Pie

Рисует заполненную замкнутую фигуру — сегмент окружности или эллипса.

Pie (x1,y1,x2,y2,x3,y3,x4,y4:Longint);

Метод Pie рисует замкнутую фигуру — сектор окружности или эллипса, с помощью текущих параметров пера Pen. Фигура заполняется текущим значением Brush. Точки (x1,y1) и (x2,y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящейчерез его центр и точку (x3,y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4,y4). Дуга рисуется против часовой стрелки от начальной до конечной точки. Рисуются прямые, ограничивающие сегмент и проходящие через центр эллипса и точки (x3,y3) и (x4,y4).

Пример.

 

Polygon

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

Polygon (Points: array of TPoint);

Метод Polygon рисует на канве замкнутую фигуру (полигон, многоугольник) по множеству угловых точек, заданному массивом Points. Первая из указанных точек соединяется прямой с последней. Этим метод Polygon отличается от метода Polyline, который не замыкает конечные точки. Рисование проводится текущим пером Pen. Внутренняя область фигуры закрашивается текущей кистью Brush.

Примеры.

1

Рисует на канве формы четырехугольник по точкам, заданным функциями Point.

2

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

3

Рисует на канве формы многоугольник по первым 10 точкам, хранящимся в массиве PointArray из предыдущего примера.

Polyline

Рисует на канве текущим пером кусочно-линейную кривую по заданному множеству точек.

Polyline(Points: array of TPoint);

Метод Polyline рисует на канве кусочно-линейную кривую по множеству точек, заданному массивом Points. Отличие метода Polyline от метода Polygon заключается в том, что метод Polygon замыкает конечные точки, а метод Polyline — нет. Рисование проводится текущим пером Pen. Метод не изменяет текущей позиции PenPos пера Pen.

Метод позволяет рисовать кусочно-линейный график функции, хранящийся в массиве типа TPoint. Если желательно использовать для рисования только часть точек массива, это можно сделать с помощью функции Slice. Если надо нарисовать кривую всего по нескольким точкам, то передавать их в метод Polyline удобно с помощью функции Point.

То что делает метод Polyline, можно сделать и с помощью методов MoveTo и LineTo, подведя сначало перо к первой точке, а затем последовательно выполняя LineTo. Различие будет заключаться в том, что метод Polyline не изменит текущую пера, а методы MoveTo и LineTo изменят.

Примеры.

1

Рисует кусочно-линейную кривую по четырем точкам, заданным функциями Point.

2

Первая процедура Button1Click заполняет массив PointArray точками, описывающими график функции sin(x) на протяжении двух периодов (4). Вторая процедура Button2Click по точкам из этого массива рисует график на канве компонента Image1. Третья процедура Button3Click использует для рисования графика первые 25 точек этого массива.

Rectangle

Рисует на канве текущим пером прямоугольник и закрашивает его текущей кистью.

Rectangle(x1,y1,x2,y2:Integer);

Метод Rectangle рисует на канве текущим пером Pen прямоугольник, верхний левый угол которого имеет координаты (x1,y1), а нижний правый — (x2,y2). Прямоугольник закрашивается текущей кистью Brush. Рисование прямоугольника без рамки можно осуществить методом FillRect. Прямоугольник со скругленными углами рисуется методом RoundRect. Прямоугольникбез внутренней закраски рисуется методом FrameRect.

Пример.

RoundRect

Рисует на канве прямоугольную рамку со скругленными углами.

RoundRect(x1,y1,x2,y2,x3,y3:Integer);

Метод RoundRect рисует на канве прямоугольную рамку со скругленными углами, используя текущие установки пера Pen и заполняя площадь фигуры текущей кистью Brush. Рамка определяется прямоугольником с координатами углов (x1,y1) и (x2,y2). Углы скругляются с помощью эллипсов с шириной x3 и высотой y3.

Если задать ширину эллипса x3 x2-x1, то верхняя и нижняя границы рамки окажутся целиком скругленными (без прямолинейной части). Если y3 y2-y1, то же самое произойдет с левой и правой границами рамки. Если же оба измерения эллипса не меньше размеров рамки, то будет рисоваться просто эллипс. Но, конечно, для рисования эллипса лучше использовать метод Ellipse. Если один из размеров эллипса задать нулевым, то будет рисоваться прямоугольная рамка, а для получения такой рамки лучше использовать метод Rectangle.

Пример.

Набор следующих операторов вызывает изображения, позанные на приведенномниже рисунке:

Основные свойства Canvas

Brush

Определяет цвет и стиль заполнения фона окна. Доступен только для чтения.

Brush: TBrush;

Свойство Brush (кисть) присуще многим оконным объектам, включая Canvas. Его можно читать, чтобы определить цвет и стиль заполнения фона окна. Это свойство только для чтения. Однако, атрибуты объекта Brush можно изменять, используя свойства Color и Style.

Color

Цвет фона компонента, цвет текста, объекта, TFont и др.

Color: TColor;

Свойство Color определяет цет фона компонента. Значение цвета может задаваться как значение, определяющее интенсивности красного, зеленого и синего цветов в формате RGB (Например: Form1.Canvas.Brush.Color:= RGB (88, 87, 104)) или равным одной из предопределенных в Delphi констант. Ниже приведены некоторые из них.

Style

Style: TBrushStyle default bsSolid;

Свойство Style определяет шаблон, которым кисть заполняет фон объекта. Возможные значения свойста Style:

Pen

Определяет свойства пера, используемые при рисовании линий и фигур на канве.

Основные свойста:

Color — цвет пера. По умолчанию clBlack.

Style — определяет режимрисования линий.

Width — определяет толщину линии в пикселях. Тип Integer. Влияет на Style.

Пример использования Canvas.

Задание: нарисовать ель.

Программный код:

Результат работы программы: