Основные понятия
Приложение может выводить графику на поверхность объекта – формы или компонента. Существует компонент для вывода готовых изображений (рисунков или фотографий) из графических файлов (компонент Image). Изображения, формируемые приложением, можно выводить на поверхность формы или компонентов Image и PaintBox.
Поверхности объекта соответствует свойство Canvas. В свою очередь, свойство Canvas (канва, холст) – это объект класса TСanvas. Методы этого типа обеспечивают вывод графических примитивов (точек, линий, окружностей, прямоугольников и т.д.), а свойства позволяют задать характеристики выводимых графических примитивов (цвет, толщину и стиль линий; цвет и вид заполнения областей; характеристики шрифта при выводе текстовой информации).
Канва состоит из отдельных точек – пикселей - и имеет свойство Pixels, которое содержит информацию о цвете каждой точки графической поверхности и представляет собой матрицу класса TColor. Положение пикселя характеризуется его горизонтальной (x) и вертикальной (y) координатами. Система координат канвыимеет началом левый верхний угол компонента или формы (координата x возрастает при перемещении слева направо, а координата y - при перемещении сверху вниз). Значения координат правой нижней точки поверхности вывода зависят от размера холста (рис.1). Его размер можно установить с помощью «Инспектора объектов» или программно, обратившись к свойствам Height и Width компонентов или к свойствам формы: ClientHeight и ClientWidth.
Примечание: клиентская область формы на 8 пикселей по ширине и 32 пикселя по высоте меньше размеров самой формы.
Важнейшее свойство пикселя - его цвет (Color). Для описания цвета используется класс TColor. Свойство Color используется практически каждым компонентом. В Turbo Delphi определено множество констант типа TСolor. Одни из них непосредственно определяют цвета (например, clGreen - зеленый), другие определяют цвета элементов окон, которые могут меняться в зависимости от выбранной пользователем палитры цветов Windows (например, clBtnFace - цвет поверхности кнопок).
|
|
|
|
|
|
|
Рис.1. Координаты точек холста (канвы)
В таблице 1 приведены именованные константы, которые можно использовать в качестве значения свойства Color:
Таблица 1
| Константа | Цвет | Константа | Цвет |
| clBlack | Черный | clSilver | Серебристый |
| сlMaroon | Каштановый | clRed | Красный |
| clGreen | Зеленый | clLime | Салатный |
| clOlive | Оливковый | clBlue | Синий |
| clNavy | Темно-синий | clFuchsia | Ярко-розовый |
| сlPurple | Розовый | clAqua | Бирюзовый |
| clTeal | Зелено-голубой | clWhite | Белый |
| clGray | Серый |
Карандаш и кисть
Методы, обеспечивающие вычерчивание на поверхности канвы графических примитивов используют карандаш и кисть. Первый предназначен для вычерчивания линий, вторая – для заливки областей, ограниченных линиями.
Карандашу соответствует свойство Pen – перо класса TPen. Это объект, в свою очередь имеющий ряд свойств. Одно из них - уже известное свойство Color - цвет, которым наносится рисунок. Второе свойство - Width (ширина линии), которое задается в пикселях и по умолчанию равно 1 пикселю. Третье свойство Style определяет вид линии. В таблице 2 приведены именованные константы, которые можно использовать в качестве значения свойства Style.
Таблица 2
| Константа | Стиль линии |
| psSolid | Сплошная линия |
| psDash | Пунктирная линия, длинные штрихи |
| psDot | Пунктирная линия, короткие штрихи |
| psDashDot | Пунктирная линия, чередование длинного и короткого штрихов |
| psDashDotDot | Пунктирная линия, чередование одного длинного и двух коротких штрихов |
| psClear | Линия не отображается (когда не нужно изображать границу области) |
Примечание. Все пунктирные линии имеют толщину равную 1 пикселю.
По умолчанию линия вычерчивается цветом, определяемым значением свойства Pen.Color.
У канвы имеется свойство PenPos класса TРoint (предопределенный тип TРoint представляет собой запись, поля х и y которой содержат координаты точки). Это свойство определяет в координатах канвы текущую позицию пера. Перемещение пера без прорисовки линии, т.е. изменение PenPos, производится методом канвы MoveTo (x, y). Точка с координатами (x, y) становится текущей и от нее методом LineTo (x, y) можно провести линию в точку с другими координатами (x, y). При этом PenPos определяет уже конечную точку линии, и новый вызов LineTo будет проводить линию из этой новой текущей точки.
Кисти соответствует свойство канвы Brush – кисть класса TBrush. Оно определяет фон и цвет заполнения замкнутых фигур. Brush - это объект, имеющий в свою очередь ряд свойств. Свойство Color определяет цвет заполнения фигуры, а свойство Style - шаблон (штриховку). В таблице 3 приведены именованные константы, которые можно использовать в качестве значения свойства Style:
Таблица 3
| Константа | Стиль заполнения области |
| bsSolid | Сплошная заливка |
| bsClear | Область не закрашивается |
| bsHorisontal | Горизонтальная штриховка |
| bsVertical | Вертикальная штриховка |
| bsFDiagonal | Диагональная штриховка с наклоном линий вперед |
| bsBDiagonal | Диагональная штриховка с наклоном линий назад |
| bsCross | Горизонтально-вертикальная штриховка, в клетку |
| bsDiagCross | Диагональная штриховка, в клетку |
В таблице 4 приведены некоторые методы канвы для рисования фигур:
Таблица 4
| Метод | Описание |
| Arc (x1, y1, x2, y2, x3, y3, x4, y4: integer ) | Рисует дугу окружности или эллипса. Точки (x1, y1) и (x2, y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x3, y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4, y4). Дуга рисуется против часовой стрелки от начальной до конечной точки. |
| Chord (x1, y1, x2, y2, x3, y3, x4, y4: integer) | Рисует дугу окружности или эллипса, замкнутую хордой. Точки (x1, y1) и (x2, y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x3, y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4, y4). Дуга рисуется против часовой стрелки от начальной до конечной точки. Хорда соединяет точки (x3, y3) и (x4, y4). |
| Ellipse (x1, y1, x2, y2: integer) | Рисует заполненную окружность или эллипс. Точки(x1, y1) и (x2, y2) определяют прямоугольник, описывающий эллипс. |
| Pie (x1, y1, x2, y2, x3, y3, x4, y4: integer) | Рисует замкнутую фигуру - сектор окружности или эллипса. Точки (x1, y1) и (x2, y2) определяют прямоугольник, описывающий эллипс. Начальная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x3, y3). Конечная точка дуги определяется пересечением эллипса с прямой, проходящей через его центр и точку (x4, y4). Дуга рисуется против часовой стрелки от начальной до конечной точки. Рисуются прямые, ограничивающие сектор и проходящие через центр эллипса и точки (x3, y3) и (x4, y4). |
| Polygon (Points: array of TPoint) | Рисует замкнутый многоугольник по координатам угловых точек, заданных массивом Points. Первая из указанных точек соединяется с последней. |
| PolyLine (Points: array of TPoint) | Рисует кусочно-линейную незамкнутую кривую по координатам точек, заданных массивом Points. При этом текущая позиция PenPos пера не изменяется. |
| Rectangle (x1, y1, x2, y2: integer) | Рисует прямоугольник, верхний левый угол которого имеет координаты (x1, y1), а нижний правый - (x2, y2). |
| RoundRect (x1, y1, x2, y2, x3, y3: integer) | Рисует прямоугольник со скругленными углами, верхний левый угол которого имеет координаты (x1, y1), а нижний правый - (x2, y2). Углы скругляются с помощью эллипсов с шириной x3 и высотой y3. |
Примечание. Д ля изображения закрашенной фигуры перед использованием соответствующего метода (Chord, Ellipse, Pie, Polygon и др.) необходимо заказать цвет и стиль её закраски (Brush.Color и Brush.Style).
Для заполнения замкнутых областей произвольной формы можно использовать метод
FloodFill (x, y: integer; Color: TColor; FillStyle: TFillStyle). Тип TFillStyle определен следующим образом:
type TFillStyle = (fsSurface, fsBorder);
Точка с координатами (x, y) является произвольной внутренней точкой заполняемой области. Граница этой области определяется сочетанием параметров Color и FillStyle. Параметр Color указывает цвет, который используется при определении границы заполняемой области, а параметр FillStyle определяет, как именно по этому цвету определяется граница. Если FillStyle = fsSurface, то заполняется область, окрашенная цветом Color, а на других цветах метод останавливается. Если FillStyle = Border, то наоборот, заполняется область, окрашенная любыми цветами, не равными Color, а на цвете Color метод останавливается.
Для вывода текста на графическую поверхность используется метод TextOut (x, y: integer; text: string). Для определения параметров выводимого текста используется свойство канвы Font – шрифт класса TFont, которое в свою очередь является объектом и имеет ряд свойств.
В таблице 5 приведены свойства объекта Font.
Таблица 5
| Свойство | Назначение |
| Name | Определяет вид (название) шрифта (Arial, Times New Roman, Courier, и т.д.) |
| Size | Pазмер шрифта в пунктах (points). Один пункт равен 1/72 дюйма. |
| Style | Стиль начертания символов задается с помощью предопределенных констант: fsItalic (курсив), fsBold (полужирный), fsUnderLine (подчеркнутый), fsStrikeOut(перечеркнутый). Это свойство является множеством, что позволяет комбинировать нужные стили |
| Color | Цвет символов |
| Height | Размер шрифта в пикселях |
Текст выводится на графическую поверхность в позицию с координатами (x, y) в соответствии с текущими установками шрифта Font. Фон надписи определяется установками текущей кисти Brush (если нет необходимости в фоне для надписи, то перед выводом текста свойству Brush.Style нужно присвоить значение bsClear или задать свойству Brush.Color цвет, совпадающий с цветом поверхности, на которую выводится текст – например, clBtnFace). По завершении метода текущей позицией PenPos пера Pen становится конец выведенного текста.
Перечисленные свойства и методы представляют не все графические возможности Delphi. Однако, они обеспечивают около 80% потребностей, обычно возникающих при работе с графикой.
Порядок создания изображения
Как уже отмечалось, канва представляет собой область, на которой можно рисовать или отображать готовые иллюстрации. Она является свойством формы или перечисленных выше компонентов. Если для рисования используются например, Image или PaintBox, то сначала этот компонент размещают на форме. Затем на канве компонента с помощью перечисленных свойств и методов создают изображение - записывают код в обработчик какого-либо события.
Создание изображений плоских геометрических объектов
При создании приложений, формирующих плоское изображение, необходимо выяснить, на какие элементарные геометрические фигуры (объекты): точки, отрезки, прямоугольники, дуги, окружности и др. – можно разбить исходный рисунок. В результате проведенного анализа можно подобрать для их изображения стандартные методы. После создания изображения при необходимости замкнутые области заполняют выбранным стилем и цветом. Однако большинство методов позволяют выводить требуемый объект только частного положения. Поэтому для вывода таких объектов при их произвольной ориентации на плоскости следует разрабатывать собственные процедуры.
Примеры возможных инструкций: