Библиотека визуальных компонентов (англ. Visual Component Library, VCL) Delphi для отображения графической информации предоставляет нам следующие визуальные компоненты: Image (изображение), PaintBox (окно для рисования), DrawGrid (таблица рисунков), Chart (диаграммы и графики), Animate (вывод видеоклипов), а также форма Form. Эти компоненты обладают свойством Canvas (о нем рассказано выше), который дает доступ к каждому пикселю. Конечно, рисовать попиксельно для работы с графикой в Delphi не приходится, система Delphi предоставляет мощные средства работы с графикой.

Рассмотрим вышеприведенные компоненты подробнее:

Компонент Image (изображение)

Является объектом класса TImage. Используется для вывода на экран изображений, считываемых из графических файлов. По умолчанию выводит на поверхность формы изображения представленных в *.bmp формате. Для вывода изображений в jpg формате необходимо в дерективе uses подключить модуль JPEG. Находится во вкладке Additional Палитры компонентов.

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

Рисунок 9 - Компонент Image на форме

Для открытия диалога для выбора нужного изображения необходимо выполнить следующее c помощью Object Inspector. Для этого находим свойство Picture и слева от него нажимаем на три точки. Открывается окно Picture Editor и в нем выбираем загрузить (Load), в раскрывшемся окне выбираем файл изображения.

Так же это можно осуществить программно путем вызова метода LoadFromFile свойства Picture:

Image1.Picture.LoadFromFile("name_pic.jpeg") ;

где name_pic.jpeg - имя файла.

Таблица 8 - Основные свойства компонента Image

Свойство		Описание
		Изображение отображающееся в поле компонента
	Размеры компонента. Если эти размеры меньше размера иллюстрации, а значение свойств Strech, AutoSize и Proportional равны False, то отображается часть изображения
	Позволяет автоматически масштабировать картинки без искажения. Для выполнения масштабирования, значение свойства AutoSize должно быть равным False
	Позволяет автоматически масштабировать (сжимать или растягивать) изображение в соответствии с размером компонента Image. Если размер компонента не пропорционален размеру изображения, то изображение будет искажено
	Позволяет автоматически изменять размер компонента в соответствии с размером изображения
	Позволяет определять расположение изображения в поле компонента Image по горизонтали, если ширина картинки меньше ширины компонента.
	Поверхность, позволяющая вывести графику
	Указывает прозрачный цвет фона изображения

Пример 1: Написать программу, для просмотра изображений, с использованием компонента Image. Программа должна обладать следующими возможностями:

• · просматривать изображения, находящиеся в папке;
• · просматривать изображение в полном размере или в формате, наиболее походящем для размеров окна;
• · управлять файлами изображений, а также печатать, сохранять, удалять и изменять изображения;
• · при необходимости открывать изображение в программе редактирования;

Рисунок 10 - Окно программы до ее запуска

Создание проекта:

• 1. Создать папку для файлов программы и запустить интегрированную среду разработки Delphi.
• 2. Добавить на форму компоненты:

Вначале на форме разместим компонент Image, основной компонент с которым нам придется работать. Кроме него, нам понадобятся следующие компоненты:

• · ScrollBox Он необходим в случае, когда в полноразмерном режиме изображение выйдет за пределы Image. Его свойству Aling присваиваем значение alClient для того чтобы его размеры менялись пропорционально с размерами окна. И на нем размещаем компонент Image;
• · Также добавим компоненты-диалоги SavePictureDialog и OpenPictureDialog, предназначенные для сохранения и открытия изображений. Первый нам необходим для копирования изображения в выбранную директорию, вторая - для вызова диалога открытия графического файла. Расположены они на странице Dialogs Палитры компонентов. Еще из этой страницы нам понадобится компонент PrintDialog, нужный нам для вызова диалога выбора принтера для печати.
• · Добавим MainMenu для добавления к программе главного меню и XPManifest для более красочного оформления
• · Так же нам необходимо где-то хранить имена изображений, лежащих в рабочей директории. Для этих целей удобен компонент ListBox, который при обработке события Create формы Form1 можно скрыть.
• · Для размещения кнопок навигации и удобной работы с ними добавим панель Veil, на которой и разместим эти кнопки (Предыдущее изображение, Следующее изображение, Истинный размер, Подогнать размер, Удалить, Копировать в, Печать, Редактировать). В качестве компонента для них выбран SpeedButton.
• · Добавляем таймер для отлова нажатий клавиш «Влево» (предыдущее изображение), «Вправо» (следующее изображение) и клавиши «Del» (удаление изображения).
• · И еще один компонент - ProgressBar, отображающий процесс загрузки больших *.Jpg файлов.
• 3. Написать код обработки события нажатия на кнопки (Предыдущее изображение, Следующее изображение, Истинный размер, Подогнать размер, Удалить, Копировать в, Печать, Редактировать). Написать код обработки события нажатия на пункты меню MainMenu (Выход, Открыть, Закрыть, Создать).
• 4. Задать начальные установки создания формы. Дважды щелкнуть мышью по свободному месту формы и написать код процедуры procedure TForm1.FormCreate(Sender:TObject), см. код модуля в Приложении 1.
• 5. Написать процедуры следующего вида:

procedure FindFileInFolder(path, ext: string);

Эта процедура сканирует папку path на наличие файлов по маске ext.

Полный листинг кода модуля программы расположен в Приложении 1 (Листинг программы 3).

• 1. Перечислите возможности компонента Image.
• 2. Объектом какого класса является компонент Image?
• 3. 3. Какой тип файлов по умолчанию поддерживает компонент Image?
• 4. 4. Перечислите основные свойства компонента Image.
• 5. 5. Какое свойство хранит изображение компонента Image?

ЛАБОРАТОРНАЯ РАБОТА

ТЕМА : « Графика в Delphi – построение простейших
геометрических фигур»

Краткие сведения из теории

Delphi предоставляет разработчику три способа отображения графики:

построение графиков во время работы программы

использование заранее созданных графических изображений

создание изображений при помощи графических компонентов

Для построения графиков созданы специальные классы, предоставляющие инструменты и методы для рисования: инструменты описаны в трех классах – Tfont, Tpen, Tbrush; область рисования и методы предоставляет класс Tcanvas.

Класс Tfont – задает характеристики шрифта, которым отображается текст на канве. Свойства класса описаны в разделе «Основные свойства, доступные для большинства компонент».

Класс Tpen – задает характеристики пера (карандаша), с помощью которого рисуются линии.

Свойства класса Tpen :

Color :Tcolor – цвет линии (по умолчанию – черный)

Width :integer –толщина линии в пикселах;

Style = (psSolid, psDash, psDot, psdashDot, psClear) – определяет стиль линии (сплошная, штриховая, пунктирная, штрих-пунктирная, невидимая)

Класс Tbrush – задает характеристики кисти, которой закрашиваются поверхности изображения.

Свойства класса Tbrush :

Color :Tcolor – цвет кисти (по умолчанию – белый)

Style – орнамент кисти, может принимать значения:

BsSolid – сплошная раскраска

BsClear – отсутсвие закраски

BsVertical – вертикальные линии

BsBdiagonal – правые диагональные линии

BsDiagCross – косая клетка

BsHorisontal – горизонтальные линии

BsFdiagonal –левые диагональные линии

BsCross – клетка

Класс Tcanvas – определяет поверхность, на которой помещается создаваемое изображение, и инструменты, с помощью которых создается изображение: шрифт, карандаш, кисть.

В качестве рабочей области (канвы, «холста») по умолчанию используется вся клиентская область формы (без заголовка, главного меню и линий скроллинга формы), но можно внутри формы отводить меньшие рабочие области при помощи компонентов PaintBox или Image . Начало координаты канвы – верхний левый угол рабочей области, ширина рабочей области определяется свойством ClientWidth , высота – свойством ClientHeight .

Свойства класса Tcanvas :

Canvas :Tcanvas – определяет область рисования

Brush :Tbrush – кисть для закраски замкнутых фигур

Font :Tfont – шрифт для отображения текста на канве

Pen :Tpen – карандаш (перо) для рисования

PenPos :Tpoint – текущее положение невидимого курсора на канве

Замечание : тип Tpoint – определяется следующим образом:

Type Tpoint = record

Pixels: Tcolor - задает цвета пикселов канвы, Х,У – координаты пиксела. Свойство Pixels удобно использовать для построения графиков при помощи точек выбранного цвета.

Основные методы класса TCanvas

procedure MoveTo (x,y:integer); - перемещает перо без рисования линии в точку с координатами (х,у).

Procedure LineTo (x,y:integer); - рисует линию от текущей точки до точки с координатами (х,у).

Пример : нарисуем диагональную линию синего цвета на форме из левого верхнего угла формы до правого нижнего угла.

Pen.color:= clblue;

MoveTo(0,0); LineTo(ClientWidth, ClientHeight);

procedure Rectangle (x1,y1,x2,y2:integer); - рисует прямоугольник: х1,у1 – координаты верхнего левого угла; х2, у2- координаты правого нижнего угла.

Пример : нарисуем закращенный в желтый цвет квадрат со стороной 60 пикселов в середине формы.

var Xc,Yc: integer; //

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

Canvas.Brush.color:=clyellow;

Canvas.rectangle(xc-30,Yc-30,xc+30,Yc+30);

procedure Ellipse (x1,y1,x2,y2:integer); - рисует эллипс, вписанный в прямоугольник с указанными координатами.

Пример : нарисуем эллипс, вписанный в компонент PaintBox.

PaintBox1.Canvas.Pen.Width:=4; //ширина линии = 4 пиксела

PaintBox1.Canvas.Ellipse(0,0, PaintBox1. ClientWidth, PaintBox1. ClientHeight);

procedure Polygon (); - рисует замкнутый пмногоугольник, заданный массивом координат.

Пример : нарисуем закрашенный ромб, соединяющий середины сторон формы

Var Xc,Yc:integer; // координаты центра клиентской области формы

Xc:=ClientWidth div 2;

Xy:=ClientHeight div 2;

Canvas.Brush.Color:=Rgb(275,140,70); // оранжевый цвет закраски

Canvas.Polygon();

end;

Procedure Arc (x1,y1,x2,y2,x3,y3,x4,y4:integer); - отображает дугу эллипса, ограниченного прямоугольником (х1,у1,х2,у2). Дуга отображается из точки с координатами (х3,у3) до точки с координатами (х4,у4) против часовой стрелки.

Пример : нарисуем дугу эллипса, соединяющую середину верхней стороны компонента
PaintBox с серединой его правой стороны.

Procedure Tform1.Button1Click(Sender:Tobject);

Var X3,y3,x4,y4: Integer;

With PaintBox1 do

Canvas.Pen.Color:= clWhite;

Canvas.Pen.Width:= 3;

Canvas.rectangle(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight);

X3:= ClientWidth div 2;

X4:= ClientWidth;

Y4:= ClientHeight div 2;

Canvas.Pen.Color:= clMaroon;

Canvas.ARC(0, 0, PaintBox1.ClientWidth, PaintBox1.ClientHeight, x3, y3, x4, y4);

End;

procedure Chord (x1,y1,x2,y2,x3,y3,x4,y4:integer); - рисует хорду – прямую, соединяющую 2 точки эллипса: точку с координатами(х3,у3) с точкой (х4,у4).

Пример : пoдставьте в примере, приведенном для метода ARC, метода Chord и получите такой результат.

procedure Pie (x1,y1,x2,y2,x3,y3,x4,y4:integer); - рисует сегмент эллипса, соединяющий центр эллипса с координатами (х3,у3) и (х4,у4).

Пример : представить в примере, приведенном для метода ARC, метод PIE и получите такой результат.

procedure TextOut (x,y:integer;Text:string); - выводит строку, переданную в параметре Text, в прямоугольник, верхний левый угол которого задан координатами х,у. Характиристики шрифта задаются инструментом Font.

Пример : напишем название построенного графика внизу формы.

Canvas.Font.Height:=20; //высота символов 20 пикселов

Canvas.Font.Color:=clblue;

Canvas.TextOut(10, ClientHeight-24, ‘график функции SIN(X)’);

Графические компоненты

Delphi предлагает ряд готовых компонентов, позволяющих улучшать пользовательский интерфейс. Эти копоненты размещены на странице Additional и System палитры компонентов.

Компонент Image (класс Timage ) – создан для отображения графических изображений, хранимых во внеших файлах с расширениями:

Ico(иконка, пиктограмма);

Bmp (растровое изображение, битовая карта);

Wmf, .emf (метафайл);

Jpg, .jpeg(изображение, сжатое по формату JPEG).

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

Autosize :boolean – при значение true компонент подстраивает свои размеры под размеры загружаемого изображения; по умолчанию false.

Stretch :boolean – при значение true загружаемое значение занимает всю область компонента; по умолчанию – false.

Canvas :Tcanvas –служит для рисования внутри компонента на этапе выполнения программы.

Picture :Tpicture-определяет изображение, помещенное в компоненте.

Основные методы класса Tpicture :

Procedure LoadFromFile (Filename:string); - загружает в компонент изображение из файла с именем Filename.

Procedure SaveToFile (Filename:string); -сохраняет изображение из компонента в файл с именем Filename.

Компонент PaintBox - определяет прямоугольную область для рисования. Главное свойство – Canvas , доступны все методы класса Tcanvas, самостоятельных свойств не имеет.

Пример : нарисуем эллипс желтого цвета, вписанный в компонент PaintBox1.

Procedure Tform1Button1Click(sender:Tobject);

With PaintBox1.Canvas do

Brush.Color:=clyellow;

Ellipse(0,0,PaintBox1.ClientWidth, PaintBox1.ClientHeight);

end ;

Компонент BitBtn – растровая кнопака

Кнопка BitBtn, в отличие от стандартной, может кроме названия (Caption) содержаить изображение, задаваемое свойством Glyph . Существует набор стандартных кнопок BitBtn, с предопределенными свойствами (с определенной картинкой, надписью и назначением) – тип стандартной кнопки выбирается через свойство Kind . Kind=(bkCustom, bkAbort,bkCancel, bkClose …)

Задание №1

Создайте приложение, которое cодержит на главной форме два компонента Image и 4 кнопки ("Загрузить картинку", "Построить геометрическую фигуру", "Изменить цвет", "Выход"), и позволяет:

а) загружать в компонент Image1, выбранное пользователем графическое изображение таким образом, чтобы изображение занимало всю область компонента Image.

б) под компонентом Image1 выводить надпись «Это картинка из файла.

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

в) рисовать внутри компонента Image2 геометрическую фигуру: закрашенный сегмент эллипса, соединяющий середину компонента Image с серединами нижней и правой сторон компонента Image.

(при любом изменении размеров и положения компонента Image 2 фигура должна строиться правильно, т.е. согласно заданию относительно компонента Image 2)

г) изменять цвет линии рисуемой в Image2 фигуры по желанию пользователя с помощью компонента ColorDialog.

Задание №2

Создайте приложение, которое позволяет расположить в компоненте Image случайным образом несколько надписей (например, слово «Ура!»). Для реализации используйте генератор случайных чисел Randomize и функцию Random.

Размеры компонента Image, слово выводимое в Image и количество слов – должен вводить пользователь.

Задание №3

Создайте приложение, позволяющее выбирать из списка ListBox название геометрической фигуры и рисовать выбранную фигуру в компоненте Image. Цвет фигуры выбирается из компонента RadioGroup.

Задание №4

Разделите компонент PaintBox1 на 4 равные части, закрасьте каждую часть в разный цвет, например: синий, желтый, зеленый, красный.

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

Задание №5

С

выбирать из компонента Radiogroup1 тип рисуемой фигуры, из компонента Radiogroup2 - цвет закраски и рисовать в компоненте Image выбранную фигуру.

Задание №6

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Разделите компонент PaintBox1 на 2 равные части, внутри каждой части нарисовать эллипс, закрашенный в цвет, выбранный пользователем в ColorDialog.

Задание №7

Создайте приложение, позволяющее:

выбирать из списка ListBox название геометрической фигуры и рисовать выбранную фигуру в компоненте Image. Фигура должна быть закрашена цветом, выбранным пользователем в компоненте ColorDialog, если в компоненте RadioGroup выбрано значение «Да».

Задание №8

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Разделите компонент PaintBox1 на 4 равные части, внутри каждой части нарисуйте разную геометрическую фигуру (эллипс, ромб, треугольник и прямоугольник). Цвет каждой фигуры, выбирает пользователь в ColorGrid.

Задание №9

ыбирать из списка ListBox название геометрической
фигуры (эллипс, ромб, прямоугольник) и рисовать
выбранную фигуру в компоненте Image. Расположение
фигуры в компоненте Image (I четверть, II четверть,

III или IV четверть) и цвет закраски фигуры выбирается
из компонентов RadioGroup.

Задание №10

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Предусмотреть, что размер стороны не может быть текстом, не может быть отрицательным числом и не может превышать меньшего размера формы.

Разделите компонент PaintBox1 на 4 равные части, внутри каждой части нарисуйте геометрическую фигуру, выбранную пользователем в Combobox (эллипс, ромб, треугольник и прямоугольник). Цвет фигуры, выбирает пользователь в ColorBox.

Задание №11

Создайте приложение, позволяющее:

ыбирать из компонента Radiogroup положение рисуемого

в компоненте Image прямоугольного треугольника, задавать
цвет закраски фигуры или цвет контура в зависимости от
включения кнопок Checkbox. Выбор цвета производить через
компонент ColorGrid.

Задание №12

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Предусмотреть, что размер стороны не может быть текстом, не может быть отрицательным числом и не может превышать меньшего размера формы.

Разделите компонент PaintBox1 на 2 равные части, внутри одной из частей нарисуйте геометрическую фигуру, выбранную пользователем в Combobox (эллипс, ромб, треугольник и прямоугольник). Цвет фигуры, выбирает пользователь в ColorBox.

Например, изменить цвет формы можно следующим образом:

form1.Color:= ColorBox1.Colors;

Задание №13

Создайте приложение, позволяющее:

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

б) делить квадрат одной диагональю или двумя в зависимости от включения кнопок Checkbox и каждый полученный треугольник закрашивать в разный цвет. Выбор цвета производит пользователь.

Задание №14

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Предусмотреть, что размер стороны не может быть текстом, не может быть отрицательным числом и не может превышать меньшего размера формы.

Разделите компонент PaintBox1 на 2 равные части, внутри одной части нарисуйте ромб, а внутри другой части нарисуйте любой треугольник. Цвет фигуры, выбирает пользователь в ColorBox.

Например, изменить цвет формы можно следующим образом:

form1.Color:= ColorBox1.Colors;

Задание №15

Создайте приложение, позволяющее:

а) устанавливать размеры компонента Image по горизонтали и вертикали одинаковыми и равными числу, вводимому пользователем с клавиатуры;

(предусмотреть, что размер стороны не может быть текстом, не может быть отрицательным числом и не может превышать меньшего размера формы)

б) делить компонент Image на 4 равных квадрата двумя линиями синего цвета;

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

Задание №16

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Предусмотреть, что размер стороны не может быть текстом, не может быть отрицательным числом и не может превышать меньшего размера формы.

Разделите компонент PaintBox1 на 9 равных частей и закрасьте каждый получившийся прямоугольник в виде шахматной доски. Цвет закраски выбирает пользователь в ColorBox.

Например, изменить цвет формы можно следующим образом:

form1.Color:= ColorBox1.Colors;

Задание №17

На форме расположить два компонента Image и четыре кнопки: Цвет линии, Цвет закраски, Ok и Выход; и компонент Edit.

При нажатии на кнопку ОК в Image1 рисуется квадрат со стороной Х, а в Image2 рисуется прямоугольный треугольник с равными катетами, каждый из которых имеет длину Х.

Вершина треугольника совпадает с началом координат Image2. Одна из вершин квадрата совпадает с началом координат Image1.

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

Х – выбирает случайным образом, с помощью функции Random и в компоненте Edit должно отображаться значение величины Х.

Задание №18

Создайте приложение, позволяющее задавать пользователю размеры компонента PaintBox1(в пикселях).

Разделите компонент PaintBox1 на 4 равные части, внутри выбранной пользователем части, должен строиться закрашенный круг, размер которого устанавливает пользователь. Цвет закраски пользователь выбирает в ColorBox.

Например, изменить цвет формы можно следующим образом:

form1.Color:= ColorBox1.Colors;

Для отображения графической информации в библиотеке Delphi предусмотре­ны компоненты, список которых дан в табл. 6.

Таблица 6

Компоненты отображения графической информации

Компонент	Страница	Описание
Image (изображение)	Additional	Используется для отображения графики
PaintBox (окно для рисования)	System	Используется для создания на форме некоторой области, в кото­рой можно рисовать
DrawGrid (таблица рисунков)	Additional	Используется для отображения в строках и столбцах нетекстовых данных
Chart (диаграммы и графики)	Additional	Компонент принадлежит к семей­ству компонентов TeeChart, кото­рые используются для создания диаграмм и графиков
Chartfx (диаграммы и графики)	ActiveX	Редактор диаграмм и графиков
FIBook (страницы Excel)	ActiveX	Компонент ввода и обработки числовой информации
VtChart (диаграммы)	ActiveX	Окно построения диаграмм

Кроме того, отображать и вводить графическую информацию можно на повер­хности любого оконного компонента, имеющего свойство Canvas - канва.

Таблицы изображений – компоненты DrawGrid и StringGrid

Компонент DrawGrid используется для создания в приложении таблицы, ко­торая может содержать графические изображения. Этот компонент подобен компоненту StringGrid, поскольку послед­ний является производным от DrawGrid. Поэтому в DrawGrid присутствуют все свойства, методы, события компонента StringGrid, кроме относящихся к тексту, т.е. кроме свойств Cells , Cols, Rows, Objects. С этой точки зрения компонент StringGrid обладает существенно большими возможностями, чем DrawGrid, поскольку он может хранить в ячейках и изображения, и тексты. А если вы захотите внести текст в какие-то ячейки DrawGrid, то вам надо будет использовать для это­го методы вывода текста на канву, что не очень удобно.

Компоненты DrawGrid и StringGrid имеют канву Canvas, на которой можно размещать изображения.

Имеется метод Cell-Rect, который возвращает область канвы, отведенную под заданную ячейку. Этот метод определен как

function CellRect(ACol, ARow: Longint): TRect;

где ACol и ARow - индексы столбца и строки, начинающиеся с 0, на пересечении которых расположена ячейка. Возвращаемая этой функцией область является об­ластью канвы, в которой можно рисовать необходимое изображение. Например, оператор

DrawGridl.Canvas.CopyRect(DrawGridl.CellRect(1,1),

BitMap.Canvas,Rect(0,0,BitMap.Height,BitMap.Width));

копирует методом CopyRect в ячейку (1,1) таблицы DrawGridl изображение из компонента BitMap. Эта ячейка является второй слева и второй сверху в таблице, поскольку индексы начинаются с 0. Учтите, что если размеры ячейки меньше, чем размер копируемого изображения, то в ячейке поя­вится только левая верхняя часть картинки.

Изображение на канве компонентов DrawGrid и StringGrid, как и на канве любого компонента, подвержено стиранию при перекрытии окна приложения дру­гими окнами или, например, при сворачивании приложения.

Удобным способом занесения изображений в ячейки DrawGrid является испо­льзование обработчика событий OnDrawCell. Эти события наступают для каждой ячейки таблицы в момент ее перерисовки. Заголовок обработчика имеет вид:

procedure TForml.DrawGridlDrawCell(Sender: TObject;

ACol, ARow: Integer; Rect: TRect; State: TGridDrawState)

Параметр State указывает состояние ячейки. Он является множест­вом, которое может содержать следующие элементы: gdSelected - выделенная ячейка, gdFocused - ячейка, находящаяся в фокусе, gdFixed - ячейка в фикси­рованной области таблицы. Параметр State можно использовать для различного характера отображения ячеек в различных состояниях.

Компонент Shape

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

StRectangle – прямоугольник;

StSquare – квадрат;

StRoundRect - прямоугольник со скругленными углами;

StRouhdSquare - квадрат со скруглен­ными углами;

StEllipse – эллипс;

StCircle – круг.

Другое существенное свойство компонента - Brush (кисть). Это свойство яв­ляется объектом типа TBrush, имеющим ряд подсвойств, в частности цвет (Brush.Color) и стиль (Brush.Style) заливки фигуры. Заливку при некоторых зна­чениях Style вы можете видеть на рис. 3.2. Третье из специфических свойство компонента Shape - Pen (перо), определяющее стиль линий.

Компонент Chart

Теперь рассмотрим компонент Chart. Этот компонент позволяет строить раз­личные диаграммы и графики, которые выглядят очень эффектно. Ком­понент Chart имеет множество свойств, методов, событий, так что если все их рас­сматривать, то этому пришлось бы посвятить целую главу. Поэтому ограничимся рассмотрением только основных характеристик Chart. А с остальными вы можете ознакомиться во встроенной справке Delphi или просто опробовать их, экспери­ментируя с диаграммами.

Компонент Chart является контейнером объектов Series - наследников клас­са TChartSeries. Каждый такой объект представляет серию данных, характеризующихся определенным стилем отображения: тем или иным графиком или диа­граммой. Каждый компонент Chart может включать несколько серий. Если вы хо­тите отображать график, то каждая серия будет соответствовать одной кривой на графике. Если вы хотите отображать диаграммы, то для некоторых видов диа­грамм можно наложить друг на друга несколько различных серий, для других (на­пример для круговых диаграмм) это, вероятно, будет выглядеть некрасиво. Одна­ко и в этом случае вы можете задать для одного компонента Chart несколько се­рий одинаковых данных с разным типом диаграммы. Тогда, делая в каждый мо­мент времени активной одну из них, вы можете предоставить пользователю выбор типа диаграммы, отображающей интересующие его данные.

Разместите один или два компонента Chart на форме и посмотрите открывшиеся в Инспекторе Объектов свойства. При­ведем пояснения некоторых из них.

AllowPanning - определяет возможность пользователя прокручивать наблюда­емую часть графика во время выполнения, нажимая правую кнопку мыши. Возможные значения: pmNone - прокрутка запрещена, pmHori/ontal, pm Vertical или pmBoth - разреше­на соответственно прокрутка только в горизонтальном направ­лении, только в вертикальном или в обоих направлениях.

AhowZoom - позволяет пользователю изменять во время выполнения масш­таб изображения, вырезая фрагменты диаграммы или графика курсором мыши. Если рамка фрагмента рисуется вправо и вниз, то этот фрагмент растягивается на все поле графика. А если рамка ри­суется вверх и влево, то восстанавливается исходный масштаб.

Title - определяет заголовок диаграммы.

Foot - определяет подпись под диаграммой. По умолчанию отсутству­ет. Текст подписи определяется подсвойством Text.

Frame - определяет рамку вокруг диаграммы.

Рядом со многими из перечисленных свойств в Инспекторе Объектов располо­жены кнопки с многоточием, которые позволяют вызвать ту или иную страницу Редактора Диаграмм - многостраничного окна, позволяющего установить все свойства диаграмм. Вызов Редактора Диаграмм возможен также двойным щелч­ком на компоненте Chart или щелчком на нем правой кнопкой мыши и выбором команды Edit Chart во всплывшем меню.

Cделайте двойной щелчок на верхнем компоненте Chart. Вы попадете в окно Редактора Диаграмм на страницу Chart, которая имеет несколько закладок. Прежде всего вас будет интересовать на ней закладка Series. Щелкните на кнопке Add - добавить серию. Вы попадете в окно, в котором вы мо­жете выбрать тип диаграммы или графика. В данном случае выберите Pie - круго­вую диаграмму. Воспользовавшись закладкой Titles вы можете задать заголовок диаграммы, закладка Legend позволяет задать параметры отображения легенды диаграммы (списка обозначений) или вообще убрать ее с экрана, закладка Panel определяет вид панели, на которой отображается диаграмма, закладка 3D дает вам возможность изменить внешний вид вашей диаграммы: наклон, сдвиг, толщину и т.д.

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

Страница Series, также имеющая ряд закладок, дает вам возможность выбрать дополнительные характеристики отображения серии. В частности, для круговой диаграммы на закладке Format полезно включить опцию Circled Pie, которая обес­печит при любом размере компонента Chart отображение диаграммы в виде круга. На закладке Marks кнопки группы Style определяют, что будет написано на ярлыч­ках, относящихся к отдельным сегментам диаграммы: Value - значение, Percent - проценты, Label - названия данных и т.д.

Вы можете, если хотите, добавить на этот компонент Chart еще одну тождест­венную серию, нажав на закладке Series страницы Chart кнопку Clone, а затем для этой новой серии нажать кнопку Change (изменить) и выбрать другой тип диаграм­мы, например Bar.

Выйдите из Редактора Диаграмм, выделите в вашем приложении нижний компонент Chart и повторите для него задание свойств с помощью Редактора Диа­грамм. В данном случае вам надо будет задать две серии, если хотите отображать на графике две кривые, и выбрать тип диаграммы Line. Поскольку речь идет о гра­фиках, вы можете воспользоваться закладками Axis и Walls для задания координат­ных характеристик осей и трехмерных граней графика.

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

Для задания отображаемых значений надо использовать методы серий Series. Остановимся только на трех основных методах.

Метод Clear очищает серию от занесенных ранее данных.

Метод Add:

Add(Const AValue:Double; Const ALabel:String; AColor:TColor) ,

позволяет добавить в диаграмму новую точку. Параметр AValue соответствует до­бавляемому значению, параметр ALabel - метка, которая будет отображаться на диаграмме и в легенде, AColor - цвет. Параметр ALabel - не обязательный, его можно задать пустым: ‘ ’. Метод AddXY:

AddXY(Const AXValue, AYValue: Double; Const ALabel: String; AColor: TColor)

позволяет добавить новую точку в график функции. Параметры AXValue и AYVa­lue соответствуют аргументу и функции. Параметры ALabel и AColor те же, что и в методе Add.

Таким образом, процедура, обеспечивающая загрузку данных в нашем приме­ре, может иметь вид:

const Al=155; A2=251; A3=203; A4=404; var i:word; begin

With Seriesl do begin

Add(Al,"Цех l",clYellow);

Add(A2,"Цех 2",clBlue);

Add(A3,"Цех 3",clRed);

Add(A4,"Цех 4",clPurple); end;

Series2.Clear; SeriesS.Clear; for i:=0 to 100 do begin

Series2.AddXY(0.02*Pi*i,sin(0.02*Pi*i)

SeriesS.AddXY(0.02*Pi*i,cos(0.02*Pi*i) end;

ClRed); ,clBlue);

Операторы Clear нужны, если в процессе работы приложения вы собираетесь обновлять данные.

На этом мы закончим знакомство с компонентом Chart. Правда, мы рассмот­рели только малую часть его возможностей.

«Отображение графической информации в Delphi» План темы: 1.С С пппп оооо сссс оооо бббб ыыыы в в в в ыыыы вввв оооо дддд аааа г г г г рррр аааа фффф ииии чччч ееее сссс кккк оооо йййй ииии нннн фффф оооо рррр мммм аааа цццц ииии ииии в в в в D D D D eeee llll pppp hhhh iiii О О тттт оооо бббб рррр аааа жжжж ееее нннн ииии ееее к к к к аааа рррр тттт ииии нннн оооо кккк О О тттт оооо бббб рррр аааа жжжж ееее нннн ииии ееее г г г г ееее оооо мммм ееее тттт рррр ииии чччч ееее сссс кккк ииии хххх фффф ииии гггг уууу рррр П П оооо сссс тттт рррр оооо ееее нннн ииии ееее г г г г рррр аааа фффф ииии кккк оооо вввв и и и и д д д д ииии аааа гггг рррр аааа мммм мммм....

1. Способы вывода графической информации. В Delphi существует несколько способов вывода графической информации: В Вывод заранее приготовленных изображений (компоненты Image, Shape); П Построение графиков и диаграмм (компонент Chart и др.); Ф Формирование изображений программным способом (объект Canvas).

2.Отображение 2.Отображение картинок. Отображение картинок при помощи компонента Image мы рассмотрели в оооо дддд нннн оооо йййй и и и и зззз п п п п рррр ееее дддд ыыыы дддд уууу щщщщ ииии хххх т т т т ееее мммм.... Здесь мы рассмотрим пример осуществления простейшей анимации путем периодического изменения отображаемой картинки в компонентах Image. ПППП ееее рррр ееее йййй тттт ииии н н н н аааа п п п п рррр ииии мммм ееее рррр....

3.Отображение 3.Отображение геометрических фигур. И Из нескольких компонентов Shape можно создавать несложные рисунки. П Программно изменяя положение (.Left,.Top) размер (.Width,.Height) и цвет (Brush.Color) компонентов Shape в рисунке можно осуществить элементы простейшей анимации. Р Р Р Р аааа сссс сссс мммм оооо тттт рррр ееее тттт ьььь п п п п рррр ииии мммм ееее рррр....

4.Построение 4.Построение графиков и диаграмм. Диаграммы предназначены для более наглядного представления массивов численных данных, их визуального отображения и анализа. ПППП рррр ииии мммм ееее рррр.... Для построения диаграмм в Delphi имеется несколько компонентов, один из них компонент Chart (раздел TeeChart Std).

Графиков и диаграмм. Данные для отображения обычно передаются в Chart программно, пример: Series1.Clear; {очистить серию} for i:=1 to N do Series1.addxy(i, A[i], clGreen); Значение по оси X Значение по оси Y Подпись по оси X Цвет данных на диаграмме РР аааа сссс сссс мммм оооо тттт рррр ееее тттт ьььь п п п п рррр ииии мммм ееее рррр п п п п оооо сссс тттт рррр оооо ееее нннн ииии яяяя гггг рррр аааа фффф ииии кккк аааа ф ф ф ф уууу нннн кккк цццц ииии ииии y y y y = = = = S S S S iiii nnnn ((((xxxx))))

Далее: Лабораторная работа «««« ОООО тттт оооо бббб рррр аааа жжжж ееее нннн ииии ееее к к к к аааа рррр тттт ииии нннн оооо кккк и и и и г г г г ееее оооо мммм ееее тттт рррр ииии чччч ееее сссс кккк ииии хххх фффф ииии гггг уууу рррр, и и и и хххх а а а а нннн ииии мммм аааа цццц ииии яяяя »»»»....Задание: 1) Разработать приложение для осуществления простейшей анимации путем периодического изменения отображаемой картинки в компонентах Image. (Количество картинок не менее трех, картинки подобрать самостоятельно).

Далее: Лабораторная работа «««« ПППП оооо сссс тттт рррр оооо ееее нннн ииии ееее г г г г рррр аааа фффф ииии кккк оооо вввв и и и и д д д д ииии аааа гггг рррр аааа мммм мммм »»»»....Задание: 1)М одифицировать приложение из лабораторной работы 9 (Отображение данных в таблице). Добавить возможность отображения некоторых данных из таблицы на гистограмме или круговой диаграмме. 2) Построить график заданной функции.

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

В работе с графикой в Delphi в распоряжении программиста находятся канва (холст, полотно - свойство Canvas Delphi компонентов), карандаш (свойство Pen ), кисть (свойство Brush) того компонента или объекта, на котором предполагается рисовать. У карандаша Pen и кисти Brush можно менять цвет (свойство Color) и стиль (свойство Style). Доступ к шрифтам предоставляет свойство канвы Font . Эти инструменты позволяют отображать как текст, так и достаточно сложные графики математического и инженерного содержания, а также рисунки. Кроме этого, работа с графикой позволяет использовать в Delphi такие ресурсы Windows как графические и видеофайлы.

Конечно, не все компоненты в Delphi имеют эти свойства. На вкладке Additional расположен специализированный компонент TImage , специально предназначенный для рисования, но также свойство Canvas имеют, например, такие компоненты как ListBox, ComboBox, StringGrid, а также и сама Форма, которая размещает наши компоненты! Кроме того, для печати документов Delphi обращается к свойству Canvas такого объекта как принтер.

Основное свойство такого объекта как Canvas Delphi - Pixels типа TColor , то есть это двумерный массив точек (пикселов), задаваемых своим цветом. Рисование на канве происходит в момент присвоения какой-либо точке канвы заданного цвета. Каждому пикселу может быть присвоен любой доступный для Windows цвет. Например, выполнение оператора

Image1.Canvas.Pixels:=clRed;

Приведёт к рисованию красной точки с координатами . Узнать цвет пиксела можно обратным присвоением:

Color:=Image1.Canvas.Pixels;

Тип TColor определён как длинное целое (LongInt). Его четыре байта содержат информацию о долях синего (B), зелёного (G), и красного (R) цветов. В 16-ричной системе это выглядит так: $00BBGGRR . Доля каждого цвета может меняться от 0 до 255. Поэтому чтобы отобразить максимально красную точку, ей нужно присвоить цвет $000000FF .
Для стандартных цветов в Delphi определён набор текстовых констант. Увидеть его можно, открыв в Инспекторе Объектов свойство Color, например, той же Формы.

Следующая таблица содержит некоторые свойства и методы канвы:

Процедура TextOut(X, Y: Integer; const Text: WideString); Производит вывод строки Text начиная с (X, Y) - левого верхнего пиксела текста.

Свойство TextWidth(var Text: String): Integer; Содержит длину строки Text в пикселах.

Свойство TextHeight(var Text: String): Integer; Содержит высоту строки Text в пикселах.

Процедура MoveTo(X, Y: Integer); Производит перемещение позиции к пикселу с адресом (X, Y).

Процедура LineTo(X, Y: Integer); Производит рисование прямой линии из точки текущей позиции к пикселу с адресом (X, Y). Адрес (X, Y) становится точкой текущей позиции.

Процедура FillRect(const Rect: TRect); Заполняет прямоугольник Rect на холсте, используя текущую кисть. Может использоваться, в том числе, для стирания части изображения на холсте.

Напишем, используя только эти методы канвы, приложение для изображения на канве компонента Image текста, который вводится в компонент Memo :

Первое, что мы сделаем, это инициализацию переменных при старте программы. Необходимо определить размеры области рисования (создадим для этого глобальную переменную Rect типа TRect) и сделать цвет фона Image белым:

procedure TForm1.FormCreate(Sender: TObject);
begin
Rect.Left:=0;
Rect.Top:=0;
Rect.Right:=Image1.Width;
Rect.Bottom:=Image1.Height;
Image1.Canvas.Brush.Color:=clWhite;
end ;

Затем нарисуем рамку по сторонам Image:

procedure TForm1.page;
begin
with Image1.Canvas do
begin
MoveTo(0, 0);
LineTo(Image1.Width-1, 0);
LineTo(Image1.Width-1, Image1.Height-1);
LineTo(0, Image1.Height-1);
LineTo(0, 0);
end ;
end ;

Попробуем, что получилось. Всё работает, но рамка пока не выводится. Поэтому добавим процедуру page в в процедуру FormCreate . Теперь красиво. Далее напишем простую процедуру стирания, очищения Image. Её нужно будет вызывать перед любым обновлением изображения, иначе предыдущее и последующее изображения будут перекрываться.

procedure TForm1.clearing;
begin
Image1.Canvas.FillRect(Rect); //Прямоугольник Rect заполняется белым цветом, изображение стирается.
end ;

Теперь пришла очередь непосредственно процедуры вывода текста. Начнём выводить текст от точки (3, 3) - верхнего левого угла листа, с небольшим отступом в 3 пиксела. Каждую последующую строку будем смещать на высоту строки:

procedure TForm1.prn;
var i: Integer;
begin
with Image1.Canvas do
for i:=1 to Memo1.Lines.Count do
TextOut(3, 3+(i-1)*TextHeight("A"), Memo1.Lines);
end ;

Теперь всё готово для вывода текста. Делать это будем по событию OnChange:

procedure TForm1.Memo1Change(Sender: TObject);
begin
clearing;
prn;
page;
end ;

Ну и напоследок процедура изменения размера шрифта:

procedure TForm1.Edit1Change(Sender: TObject);
begin
Memo1.Font.Size:=UpDown1.Position;
Image1.Canvas.Font.Size:=UpDown1.Position;
Memo1Change(Sender);
end ;

Можно модифицировать эту программу для вывода текста на печать. Для работы с принтером нужно подключить модуль Printers :

unit Unit1;

Interface

uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, StdCtrls, Printers ;

При работе с принтером как с полотном для начала печати вызывается метод BeginDoc , затем производится вывод документа, завершается печать вызовом метода EndDoc :

Printer.BeginDoc;
with Printer.Canvas do
begin
... Печать документа...
end ;
Printer.EndDoc;

Ширина и высота полотна принтера доступны через свойства Printer.PageWidth и Printer.PageHeight . Закончить печать на одной странице и начать печатать на другой можно с помощью метода Printer.NewPage .