Перечень компонентов отображения графической информации. Презентация на тему "Отображение графической информации в Delphi" Перечень компонентов отображения графической информации
ЛАБОРАТОРНАЯ РАБОТА
ТЕМА
: «
Графика в
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;
Слайд 2
«Отображение графической информации в Delphi» План темы: Способы вывода графической информации в Delphi. Отображение картинок. Отображение геометрических фигур. Построение графиков и диаграмм.
Слайд 3
1. Способы вывода графической информации. В Delphi существует несколько способов вывода графической информации: Вывод заранее приготовленных изображений (компоненты Image, Shape); Построение графиков и диаграмм (компонент Chart и др.); Формирование изображений программным способом (объект Canvas).
Слайд 4
Отображение картинок. Отображение картинок при помощи компонента Imageмы рассмотрели в одной из предыдущих тем. Здесь мы рассмотрим пример осуществления простейшей анимации путем периодического изменения отображаемой картинки в компонентах Image. Перейти на пример.
Слайд 5
Отображение геометрических фигур. Отображениепростейших геометрических фигур на форме обеспечивает компонент Shape.
Слайд 6
Отображение геометрических фигур. Основные свойства компонента Shape:
Слайд 7
Отображение геометрических фигур. Из нескольких компонентов Shape можно создавать несложные рисунки. Программно изменяя положение (.Left, .Top) размер(.Width, .Height) и цвет (Brush.Color)компонентов Shape в рисунке можно осуществить элементы простейшей анимации. Рассмотреть пример.
Слайд 8
Построение графиков и диаграмм. Диаграммы предназначены для более наглядного представления массивов численных данных, их визуального отображения и анализа. Пример. Для построения диаграмм в Delphi имеется несколько компонентов, один из них компонент Chart (раздел TeeChart Std).
Слайд 9
Построение графиков и диаграмм. Вид компонента Chart после его установки на форму:
Слайд 10
Построение графиков и диаграмм. Кроме «Инспектора объектов» доступ к свойствам компонента Chart можно получить открыв специальное окно диалога (правая кнопкана компоненте \ Edit Chart…) Добавить серию данных Изменить тип диаграммы
Слайд 11
Построение графиков и диаграмм. Выбор типа диаграммы:
Слайд 12
Построение графиков и диаграмм. Установка свойств для осей координат (Axis):
Слайд 13
Построение графиков и диаграмм. Данные для отображения обычно передаются в Chart программно, пример: Series1.Clear; {очистить серию} for i:=1 to N do Series1.addxy(i, A[i], ‘’, clGreen); Значение по оси X Значение по оси Y Подпись по оси X Цвет данных на диаграмме Рассмотреть пример построения графика функции y = Sin(x)
Слайд 14
Далее: Лабораторная работа № 13.1. «Отображение картинок и геометрических фигур, их анимация». Задание: 1) Разработать приложение для осуществления простейшей анимации путем периодического изменения отображаемой картинки в компонентах Image. (Количество картинок не менее трех, картинки подобрать самостоятельно).
Слайд 15
Задание: 2) Придумать и нарисовать рисунок из компонентов Shape. Программно изменяя положение, размер или цвет компонентов Shape в рисунке осуществить элементы простейшей анимации.
Слайд 16
Далее: Лабораторная работа № 12.2. «Построение графиков и диаграмм». Задание: Модифицировать приложение из лабораторной работы № 9 (Отображение данных в таблице). Добавить возможность отображения некоторых данных из таблицы на гистограмме или круговой диаграмме. 2) Построить график заданной функции.
Посмотреть все слайды
Перечень компонентов отображения графической информации
Для отображения графической информации в библиотеке Delphi
предусмотрены компоненты, список которых дан в таблице 4.1.
Таблица 4.1
Компоненты отображения графической информации Пикто- грамма Компонент Страница Описание Image (изображение) Используется
для отображения графики: пиктограмм, битовых матриц и метафайлов. PaintBox (окно для рисования) Используется
для создания на форме некоторой области, в которой можно рисовать. DrawGrid (таблица рисунков) Используется
для отображения в строках и столбцах нетекстовых данных. Chart (диаграммы и графики) Компонент
принадлежит к семейству компонентов TChart, которые используются для создания
диаграмм и графиков. Канва Canvas
не является компонентом, так что, строго
говоря, она не должна бы рассматриваться в рамках данной книги. Но поскольку
многие компоненты, в частности, формы, имеют канву и канва предоставляет
возможность выводить различную графическую информацию, то некоторые начальные
сведения о канве все-таки целесообразно дать. Канва представляет собой область компонента, на которой можно
рисовать или отображать готовые изображения. Она содержит свойства и методы,
существенно упрощающие графику Delphi. Все сложные взаимодействия с системой
спрятаны для пользователя, так что рисовать в Delphi может человек, совершенно
не искушенный в машинной графике. Каждая точка канвы имеет координаты X
и Y
.
Система координат канвы, как и везде в Delphi, имеет началом левый верхний угол
канвы. Координата X
возрастает при перемещении слева направо, а
координата Y
- при перемещении сверху вниз. Координаты измеряются в
пикселях. Пиксель - это наименьший элемент поверхности рисунка, с которым можно
манипулировать. Важнейшее свойство пикселя - его цвет. Канва имеет свойство Pixels
. Это свойство представляет
собой двумерный массив, который отвечает за цвета канвы. Например, Canvas.
Pixels
соответствует цвету пикселя, 10-го слева и 20-го сверху. С
массивом пикселей можно обращаться как с любым свойством: изменять цвет,
задавая пикселю новое значение, или определять его цвет по хранящемуся в нем
значению. Например, Canvas. Pixels : = 0
или Canvas. Pixels
: = clBlack
- это задание пикселю черного цвета. Свойство Pixels
можно использовать для рисования на
канве. Давайте попробуем нарисовать по пикселям график синусоиды на канве
формы. Для этого в обработчик события формы OnPaint
(прорисовка) можно
вставить следующий код: TForm1. FormPaint (Sender: TObject); var
,Y: real; // координаты функции
,PY:
longint; // координаты пикселей
begin
: = clWhite; for
PX: = 0 to
ClientWidth do
{X - аргумент графика,
: = PX*4*Pi/ClientWidth;:
=Sin (X); {PY - координата пикселя,
: =trunc (ClientHeight -
(Y+1) *ClientHeight/2); {Устанавливается черный цвет выбранного
пикселя (О яркости) }
. Pixels : = 0; end
;
Выполните это тестовое приложение и вы увидите результат,
представленный на рис.4.1 а. График синусоиды получился, хотя и не очень
хороший, т.к. разбивается на отдельные точки - пиксели.
Канва - объект класса TCanvas
имеет множество методов,
которые позволяют рисовать графики, линии, фигуры с помощью свойства Pen
- перо. Это свойство является объектом, в свою очередь имеющим ряд свойств.
Одно из них уже известное вам свойство Color
- цвет, которым наносится
рисунок. Второе свойство - Width
(ширина линии). Ширина задается в
пикселях. По умолчанию ширина равна 1. Свойство Style
определяет вид линии. Это свойство
может принимать следующие значения:
У канвы имеется свойство PenPos
типа TPoint
(см
Давайте попробуем нарисовать пером график синуса из предыдущего
примера. В данном случае обработчик события формы OnPaint
может иметь
вид:
procedure
TForm1. FormPaint (Sender: TObject); var
,Y: real;
// координаты функции
,PY: longint; // координаты пикселей
begin
:
=clWhite;. MoveTo (0,ClientHeight div 2); for
PX: =0 to
ClientWidth do
{X - аргумент графика,
соответствующий пикселю с координатой РХ}
: = PX*4*Pi/ClientWidth;: = Sin (X); {PY - координата пикселя,
соответствующая координате Y}
: = trunc (ClientHeight - (Y+1) *ClientHeight/2); {Проводится линия на графике}
. LineTo (PX,PY); Результат работы приложения в этом варианте вы можете видеть на
рис.4.1 б. Как видите, качество графика существенно улучшилось. Перо может рисовать не только прямые линии, но и фигуры. Полный
список методов канвы, использующих перо, см. во встроенной справке Delphi. А
пока в качестве примера приведем только один из них - Ellipse
, который
рисует эллипс или окружность. Он объявлен как
procedure
Ellipse (X1, Y1, Х2, Y2: Integer);
где параметры X1, Х2, Y1, Y2
определяют координаты
прямоугольника, описывающего эллипс или окружность. Например, оператор Ellipse (10, 40, 20, 50);
нарисует окружность с диаметром 10 и с координатами центра (15,
45). Фигуры в общем случае рисуются не пустыми, а закрашенными с
помощью свойства канвы Brush
- кисть. Свойство Brush
является
объектом, имеющим в свою очередь ряд свойств. Свойство Color
определяет
цвет заполнения. Свойство Style
определяет шаблон заполнения
(штриховку). По умолчанию значение Style
равно bsSolid
, что
означает сплошное закрашивание цветом Color
. У пера Pen
имеется еще одно свойство, которое мы пока не
рассматривали. Это свойство - Mode
(режим). По умолчанию значение Mode
= pmCopy
. Это означает, что линии проводятся цветом, заданным в свойстве Color
.
Но возможны и другие режимы, в которых учитывается не только цвет Color
,
но и цвет соответствующих пикселей фона. Наиболее интересным из этих режимов
является режим pmNotXor
- сложение с фоном по инверсному исключающему
ИЛИ. Если задан этот режим, то повторное рисование той же фигуры на том же
месте канвы убирает ранее нарисованное изображение и восстанавливает цвета
пикселей, которые были до первого изображения фигуры. Эту особенность режима pmNotXor
можно использовать для
создания простенькой анимации. Достаточно нарисовать нечто, затем стереть
нарисованное, перерисовать немного измененным - и рисунок будет представляться
ожившим. Попробуйте сделать сами простенькую мультипликацию - движущуюся
окружность. Начните новое приложение и в раздел implementation
вставьте
объявление X,Y: integer;
Тем самым вы введете глобальные переменные X
и Y
-
текущие координаты изображения. В событие формы OnPaint
вставьте операторы Brush. Color: = clWhite;: = clWhite;. Pen. Mode: = pmNotXor;
Первый из этих операторов задает белый цвет кисти Brush
.
Значит ваша окружность будет закрашена внутри белым цветом. Второй оператор
задает белый цвет фона поверхности формы. Третий оператор устанавливает режим пера pmNotXor
, который
позволит вам стирать прежнее изображение прежде, чем нарисовать новое. Даже самая простая мультипликация нуждается в синхронизации. Иначе
скорость движения будет определяться быстродействием компьютера. Поэтому
перенесите на форму компонент Timer
- таймер со страницы System. Этот
компонент описан в разделе 5.7
Можете посмотреть там его подробное описание. А пока задайте его
свойство Interval
равным, например, 30 (это время выдержки в
миллисекундах, но реальное время выдержки будет больше - см. раздел 5.7) и
установите свойство Enabled
равным false
(это означает, что
таймер не будет запускаться автоматически в момент запуска приложения). В обработчик события этого компонента OnTimer
вставьте
операторы
// Стирание прежнего изображения
. Ellipse (Х-5, Y, X+5, Y-1Q);(X); // Рисование нового изображения
. Ellipse (Х-5, Y, X+5, Y-10); // Останов при достижении конца формы
if
(X >=
ClientWidth-20) then
. Enabled: = false;
Первый из этих операторов рисует окружность в том месте, где она
была нарисована ранее, т.е. стирает прежнее изображение. Последний оператор останавливает изображение у края формы. Теперь перенесите на форму кнопку Button
и в обработчик
щелчка на ней поместите операторы
Х: =10;: =100;. Ellipse (X-5, Y, X+5, Y-10);. Enabled: =true;
Первые два оператора задают начальные координаты окружности.
Третий оператор рисует окружность в ее начальном положении, а четвертый -
запускает таймер. Оттранслируйте приложение, запустите его на выполнение, щелкните
на кнопке. Вы увидите изображение окружности, перемещающееся по форме слева
направо. А дальше уж подключите вашу фантазию и преобразуйте это не слишком
интересное приложение во что-нибудь более увлекательное. На канве можно отображать не только программно создаваемые
изображения, но и изображения, хранящиеся в графических файлах. Только сама
канва не имеет метода загрузки изображения из файла. Поэтому загружать файл
надо в какой-нибудь другой графический объект, способный воспринимать
информацию графических файлов. А затем переписывать изображение из этого объекта
на канву с помощью метода канвы Draw
. Его описание: Draw (X, Y: Integer; Graphic: TGraphic);
Здесь параметры Х
и Y
определяют координаты левого
верхнего угла размещения изображения на канве, a Graphic
- объект,
хранящий информацию. В качестве такого объекта может выступать, например,
объект типа TBitMap
, предназначенный для хранения битовых матриц.
Давайте посмотрим, как все это выглядит на практике. Откройте новое приложение, перенесите на форму компонент OpenPictureDialog
со страницы Dialogs (это компонент диалога открытия графических файлов - см.
раздел 8.2 procedure
TForm1. Button1Click (Sender: TObject); var
:
TBitMap; // Выбор пользователем графического файла
if
OpenPictureDialog1. Execute then
// Создание объекта BitMap типа TBitMap
: =TBitMap. Create; // Перенос изображения на канву формы
. Draw (10, 10, BitMap); // Уничтожение объекта BitMap
. Free; end
;
Этот код создает временный объект типа TBitMap
с именем BitMap
.
Затем вызывается диалог открытия графического файла OpenPictureDialog1
и, если пользователь выбрал файл, то он загружается в BitMap
методом LoadFromFile
.
Затем методом Draw
загруженное изображение копируется на канву в
область, с координатами левого верхнего угла (10,10). После этого временный
объект BitMap
уничтожается. Запустите ваше приложение и щелкните на его кнопке. Вы увидите,
что можете загрузить любой графический файл типа. bmp
и он отобразится
на канве формы (см. рис.4.2 а). Графические файлы вы можете найти в каталоге
Images. В Delphi 5 и 4 он обычно расположен в каталоге. \program files\Common
Files\Borland Shared. В Delphi 3 он расположен в каталоге. \program
files\Borland\Delphi 3, а в Delphi 1 - в каталоге Delphi 16. В каталоге Images
имеется, в частности, подкаталог \Images\Splash\16Color\, в котором хранится
файл, загруженный в примере рис.4.2
Вы создали неплохое приложение для просмотра графических
файлов. Но теперь давайте попробуем увидеть его крупный недостаток. Не закрывая
своего приложения, перейдите в какую-нибудь другую программу, например,
вернитесь в Delphi. Затем, ничего там не делая, опять перейдите в свое
выполняющееся приложение. Если окно программы, в которую вы уходили, целиком
перекрыло окно вашего приложения, то вернувшись в него вы увидите, что картинка
в окне исчезла. Если же окно вашего приложения перекрывалось только частично,
то вернувшись в свое приложение вы, возможно, увидите результат, подобный
представленному на рис.4.2 б. Вы видите, что если окно какого-то другого приложения
перекрывает на время окно вашего приложения, то изображение, нарисованное на
канве формы, портится. Посмотрим, как можно устранить этот недостаток. Если окно было перекрыто и изображение испортилось,
операционная система сообщает приложению, что в окружении что-то изменилось и
что приложение должно предпринять соответствующие действия. Как только
требуется обновление окна, для него генерируется событие OnPaint
. В
обработчике этого события (в нашем случае события формы) нужно перерисовать
изображение. Перерисовка может производиться разными способами в
зависимости от приложения. В нашем примере можно было бы вынести объявление
переменной BitMap
(оператор var
BitMap: TBitMap) за пределы
приведенной выше процедуры, т.е. сделать эту переменную глобальной, разместив
непосредственно в разделе implementation
. Оператор BitMap. Free
можно было бы перенести в обработчик события формы OnDestroy
,
происходящего в момент закрытия приложения. Тогда в течение всего времени
выполнения вашего приложения вы будете иметь копию картинки в компоненте BitMap
и вам достаточно ввести в обработчик события OnPaint
формы всего один
оператор: Draw (10, 10, BitMap);
Сделайте это, и увидите, что изображение на форме не портится
при любых перекрытиях окон. Помимо рассмотренного метода Draw
канва имеет еще
метод копирования CopyRect
: CopyRect (Dest: TRect; Canvas: TCanvas; Source: TRect);
Метод копирует указанную параметром Source
область
изображения в канве источника изображения Canvas
в указанную параметром Dest
область данной канвы. Тип TRect
, характеризующий прямоугольные области Source
и Dest
, уже описывался в разделе 3.2
Например, оператор CopyRect (MyRect2, Bitmap. Canvas, MyRect1);
копирует на канву формы в область MyRect2
изображение из
области MyRect1
канвы компонента Bitmap
. Копирование методом CopyRect
производится в режиме,
установленном свойством CopyMode
. По умолчанию это свойство имеет
значение cmSrcCopy
, что означает просто замену изображения,
содержащегося ранее в области Dest
, на копируемое изображение. Другие
возможные значения CopyMode
позволяют комбинировать изображения, но их
рассмотрение выходит за рамки данной книги. Этими основными сведениями о выводе графической информации на
канву мы ограничимся. В разделе 3.2
Оконного компонента, имеющего свойство Canvas
- канва. Компоненты Image и PaintBox
Компоненты Image
и PaintBox
представляют собой
некоторую ограниченную поверхность с канвой, на которую можно заносить
изображения, как это описано в разделе 4.2
Но помимо этих возможностей у компонента Image
имеются
свойства, позволяющие работать с различными типами графических
файлов.поддерживает три типа файлов - битовые матрицы, пиктограммы и метафайлы.
Все три типа файлов хранят изображения; различие заключается лишь в способе их
хранения внутри файлов и в средствах доступа к ним. Битовая матрица (файл с
расширением. bmp
) отображает цвет каждого пикселя в изображении. При
этом информация хранится таким образом, что любой компьютер может отобразить
изображение с разрешающей способностью и количеством цветов, соответствующими
его конфигурации. Пиктограммы (файлы с расширением. ico
) - это маленькие
битовые матрицы. Они повсеместно используются для обозначения значков
приложений, в быстрых кнопках, в пунктах меню, в различных списках. Способ
хранения изображений в пиктограммах схож с хранением информации в битовых
матрицах, но имеются и различия. В частности, пиктограмму невозможно
масштабировать, она сохраняет тот размер, в котором была создана. Метафайлы (Metafiles) хранят не последовательность битов, из
которых состоит изображение, а информацию о способе создания картинки. Они
хранят последовательности команд рисования, которые и могут быть повторены при
воссоздании изображения. Это делает такие файлы, как правило, более
компактными, чем битовые матрицы. Компонент Image
позволяет отображать информацию,
содержащуюся в графических файлах всех указанных типов. Для этого служит его
свойство Picture
- объект типа TPicture
.
Рис.4.3
Окно Picture Editor Чтобы познакомиться с этим свойством откройте новое
приложение и перенесите на форму компонент Image
. Растяните его или
задайте его свойство Align
равным alClient
, чтобы он занял всю
клиентскую область формы. Нажмите на кнопку с многоточием около свойства Picture
в окне Инспектора Объектов или просто сделайте двойной щелчок на Image
.
Перед вами откроется окно Picture Editor (рис.4.3), позволяющее загрузить в
свойство Picture
какой-нибудь графический файл (кнопка Load), а также
сохранить открытый файл под новым именем или в новом каталоге. Щелкните на
Load, чтобы загрузить графический файл. Перед вами откроется окно открытия
графического файла, представленное на рис.4.4 По мере перемещения курсора в
списке по графическим файлам в правом окне отображаются содержащиеся в них
картинки, а над ними - цифры, характеризующие размер картинки. Вы можете
выбрать требуемый вам графический файл любого типа. Напомним, что поставляемые
с Delphi графические файлы вы можете найти в каталоге Images. В Delphi 5 и 4 он
обычно расположен в каталоге. \program files\Common Files\Borland Shared. В
Delphi 3 он расположен в каталоге. \program files\Borland\Delphi 3, а в Delphi
1 - в каталоге Delphi 16. После загрузки файла щелкните на OK в окне Picture
Editor и в вашем компоненте Image
отобразится выбранная вами картинка.
Можете запустить ваше приложение и полюбоваться ею. Впрочем, вы и так видите
картинку, даже не выполняя приложение.
Когда вы в процессе проектирования загрузили изображение из
файла в компонент Image
, он не просто отображает его, но и сохраняет в
приложении. Это дает вам возможность поставлять ваше приложение без отдельного
графического файла. Впрочем, как мы увидим позднее, в Image
можно
загружать и внешние графические файлы в процессе выполнения приложения. Вернемся к рассмотрению свойств компонента Image
. Если установить свойство AutoSize
в true
, то
размер компонента Image
будет автоматически подгоняться под размер
помещенной в него картинки. Если же свойство AutoSize
установлено в false
,
то изображение может не поместиться в компонент или, наоборот, площадь
компонента может оказаться много больше площади изображения. Другое свойство - Stretch
позволяет подгонять не
компонент под размер рисунка, а рисунок под размер компонента. Установите AutoSize
в false
, растяните или сожмите размер компонента Image
и
установите Stretch
в true
. Вы увидите, что рисунок займет всю
площадь компонента, но поскольку вряд ли реально установить размеры Image
точно пропорциональными размеру рисунка, то изображение исказится.
Устанавливать Stretch
в true
может иметь смысл только для
каких-то узоров, но не для картинок. Свойство Stretch
не действует на
изображения пиктограмм, которые не могут изменять своих размеров. Свойство - Center
, установленное в true
,
центрирует изображение на площади Image
, если размер компонента больше
размера рисунка. Рассмотрим еще одно свойство - Transparent
(прозрачность). Если Transparent
равно true
, то изображение в Image
становится прозрачным. Это можно использовать для наложения изображений друг на
друга. Поместите на форму второй компонент Image
и загрузите в него
другую картинку. Только постарайтесь взять какую-нибудь мало заполненную,
контурную картинку. Можете, например, взять картинку из числа помещаемых обычно
на кнопки, например, стрелку (файл. \program files\common files\borland
shared\images\buttons\arrow1l. bmp). Передвиньте ваши Image
так, чтобы
они перекрывали друг друга, и в верхнем компоненте установите Transparent
равным true
. Вы увидите, что верхняя картинка перестала заслонять
нижнюю. Одно из возможных применений этого свойства - наложение на картинку
надписей, выполненных в виде битовой матрицы. Эти надписи можно сделать с
помощью встроенной в Delphi программы Image Editor. Учтите, что свойство Transparent
действует только на
битовые матрицы. При этом прозрачным (т.е. заменяемым на цвет расположенного
под ним изображения) делается по умолчанию цвет левого нижнего пикселя битовой
матрицы. Мы рассмотрели загрузку изображения из файла в процессе
проектирования. Но свойство Picture
позволяет также легко организовать
обмен с графическими файлами любых типов в процессе выполнения приложения. Чтоб
пояснить технику такого обмена, надо сначала подробнее рассмотреть свойство Picture
. Это свойство является объектом, который имеет в свою очередь
подсвойства, указывающие на хранящийся графический объект. Если в Picture
хранится битовая матрица, на нее указывает свойство Picture. Bitmap
.
Если хранится пиктограмма, на нее указывает свойство Picture. Icon
. На
хранящийся метафайл указывает свойство Picture. Metafile
. Наконец, на
графический объект произвольного типа указывает свойство Picture. Graphic
. Объект Picture
и его свойства Bitmap
, Icon
,
Metafile
и Graphic
имеют методы файлового чтения и записи LoadFromFile
и SaveToFile
:
procedure
LoadFromFile (const
FileName: string
); procedure
SaveToFile (const
FileName: string
);
Для свойств Picture. Bitmap
, Picture. Icon
и Picture.
Metafile
формат файла должен соответствовать классу объекта: битовой
матрице, пиктограмме, метафайлу. При чтении файла в свойство Picture.
Graphiс
файл должен иметь формат метафайла. А для самого объекта Picture
методы чтения и записи автоматически подстраиваются под тип файла. Поясним это
на примере. Давайте построим приложение, аналогичное рассмотренному в разделе
4.2 примеру просмотра графических файлов. Для разнообразия можно организовать
управление им не кнопкой Button
, а меню. Поместите на форму компонент Image
.
Растяните его или задайте его свойство Align
равным alClient
,
чтобы он занял всю клиентскую область формы. Перенесите на форму компонент
диалога открытия графического файла OpenPictureDialog
(см. раздел 8.2
(OpenPictureDialog1. Execute) then
. Picture. LoadFromFile
(. FileName);
Этот оператор вызовет диалог открытия графического файла (см.
рис.4.4) и загрузит в компонент Image1
изображение из выбранного
пользователем файла (см. рис.4.5). Причем файл может быть любого типа: битовая
матрица, пиктограмма или метафайл.
Рис.4.5
Изображение в компоненте Image
битовой матрицы (а) и пиктограммы (6) В этом приложении метод LoadFromFile
применен к Image1.
Picture
. Если будут открываться только файлы битовых матриц, то оператор загрузки
файла можно заменить на Picture. Bitmap. LoadFromFile (. FileName); Для пиктограмм можно было бы использовать оператор. Picture.
Icon. LoadFromFile (. FileName); а для метафайлов - оператор. Picture. Metafile. LoadFromFile
(. FileName); или. Picture. Graphic. LoadFromFile (. FileName);
Но во всех этих случаях, если формат файла не совпадет с
предполагаемым, возникнет ошибка. Аналогично работает и метод SaveToFile
с тем отличием, что примененный к Picture
или к Picture. Graphic
он сохраняет в файле изображение любого формата. Например, если вы дополните
свое приложение диалогом SavePictureDialog
(см. раздел 8.2
SavePictureDialog1. Execute then
. Picture. SaveToFile
(SavePictureDialog1. FileName);
то пользователь получит возможность сохранить изображение любого
формата в файле с новым именем. Только при этом, чтобы не возникало в
дальнейшем путаницы, расширение сохраняемого файла все-таки должно
соответствовать формату сохраняемого изображения. Абсолютно идентично для изображений любого формата будет работать
программа, если оператор сохранения вы замените на Picture. Graphic. SaveToFile (. FileName);
использующий свойство Picture. Graphic
. А если вам известен
формат хранимого в компоненте Image
изображения, то вы можете применить
метод SaveToFile
к свойствам Picture. Bitmap
, Picture. Icon
и Picture. Metafile
. Для всех рассмотренных объектов Picture
, Picture. Bitmap
,
Picture. Icon
и Picture. Metafile
определены методы присваивания
значений объектов: Assign (Source: TPersistent);
Однако, для BitMap
, Icon
и Metafile
присваивать можно только значения однородных объектов: соответственно битовых
матриц, пиктограмм, метафайлов. При попытке присвоить значения разнородных
объектов генерируется исключение ЕConvertError
. Объект Picture
-
универсальный, ему можно присваивать значения объектов любых из остальных трех
классов. А значение Picture
можно присваивать только тому объекту, тип
которого совпадает с типом объекта, хранящегося в нем. Метод Assign
можно использовать и для обмена изображениями
с буфером Clipboard. Например, оператор Assign (Image1. Picture);
занесет в буфер обмена изображение, хранящееся в Image1
.
Аналогично оператор графика delphi изображение приложение Image1. Picture. Assign (Clipboard);
прочитает в Image1
изображение, находящееся в буфере
обмена. Причем это может быть любое изображение и даже текст. Надо только не забыть при работе с буфером обмена вставить в
оператор uses
вашего модуля ссылку на модуль Clipbrd
.
Автоматически Delphi эту ссылку не вставляет. Возвращаясь к свойствам компонента Image
, можно
отметить один недостаток, присущий нашему тестовому приложению, приведенному на
рис.4.5 При загрузке разных изображений размер окна приложения может оказаться
или слишком маленьким, и тогда вы увидите только часть изображения, или слишком
большим, и тогда изображение будет некрасиво размещено в левом верхнем углу
формы, оставляя много пустого пространства. Этот недостаток можно устранить,
если воспользоваться свойствами Height
(высота) и Width
(ширина)
компонента Image
. При свойстве AutoSize
установленном в true
размеры Image
автоматически устанавливаются равными размерам
загруженного изображения. И этими размерами можно воспользоваться для
соответствующего изменения размеров формы. Например, приведенный ранее код
загрузки изображения из файла можно заменить на следующий: OpenPictureDialog1. Execute then
begin
. Picture. LoadFromFile (. FileName);. ClientHeight:
= Image1. Height+10;. Top: = Form1. ClientRect. Top + (Form1. ClientHeight - Image1. Height) div 2;. ClientWidth:
= Image1. Width+10;. Left: = Form1. ClientRect. Left + (Form1. ClientWidth - Image1. Width) div 2; end
;
В этом коде размеры клиентской области формы устанавливаются
несколько больше размеров компонента Image1
, которые в свою очередь
адаптируются к размеру картинки благодаря свойству AutoSize
. Внесите эти
исправления в свое приложение, выполните его и увидите, что форма стала
автоматически адаптироваться к размерам загруженного изображения Компонент Shape
Компонент Shape
только условно может быть отнесен к
средствам отображения графической информации, поскольку просто представляет
собой различные геометрические фигуры, соответствующим образом заштрихованные.
Основное свойство этого компонента - Shape
(форма), которое может
принимать значения:
Примеры этих форм показаны на рис.4.7
Рис.4.7
Примеры компонента Shape
Другое существенное свойство компонента - Brush
(кисть).
Это свойство является объектом типа TBrush
, имеющим ряд подсвойств, в
частности: цвет (Brush. Color
) и стиль (Brush. Style
) заливки
фигуры. Заливку при некоторых значениях Style
вы можете видеть на
рис.4.7 Третье из специфических свойство компонента Shape
- Pen
(перо), определяющее стиль линий. Это свойство, как и свойство Brush
,
уже рассматривались в разделе 4.2
Компонент Chart
Теперь рассмотрим компонент Chart
. Этот компонент позволяет
строить различные диаграммы и графики, которые выглядят очень эффектно
(рис.4.8). Компонент Chart
имеет множество свойств, методов, событий,
так что если все их рассматривать, то этому пришлось бы посвятить целую главу.
Поэтому ограничимся рассмотрением только основных характеристик Chart
. А
с остальными вы можете ознакомиться во встроенной справке Delphi или просто
опробовать их, экспериментируя с диаграммами.
Компонент Chart
является контейнером объектов Series
типа TChartSeries
- серий данных, характеризующихся различными стилями
отображения. Каждый компонент может включать несколько серий. Если вы хотите
отображать график, то каждая серия будет соответствовать одной кривой на
графике. Если вы хотите отображать диаграммы, то для некоторых видов диаграмм
можно наложить друг на друга несколько различных серий, для других (например,
для круговых диаграмм) это, вероятно, будет выглядеть некрасиво. Однако, и в
этом случае вы можете задать для одного компонента Chart
несколько серий
одинаковых данных с разным типом диаграммы. Тогда, делая в каждый момент
времени активной одну из них, вы можете предоставить пользователю выбор типа диаграммы,
отображающей интересующие его данные. Разместите один или два (если захотите воспроизвести рис.4.8)
компонента Chart
на форме и посмотрите открывшиеся в Инспекторе Объектов
свойства. Приведем пояснения некоторых из них.
Определяет
возможность пользователя прокручивать наблюдаемую часть графика во время
выполнения, нажимая правую кнопку мыши. Возможные значения: pmNone -
прокрутка запрещена, pmHorizontal, pmVertical или pmBoth - разрешена
соответственно прокрутка только в горизонтальном направлении, только в
вертикальном или в обоих направлениях. Позволяет
пользователю изменять во время выполнения масштаб изображения, вырезая
фрагменты диаграммы или графика курсором мыши (на рис.4.8 б внизу показан
момент просмотра фрагмента графика, целиком представленного на рис.4.8 а). Определяет
заголовок диаграммы. Определяет
подпись под диаграммой. По умолчанию отсутствует. Текст подписи определяется
подсвойством Text. Определяет
рамку вокруг диаграммы. Легенда
диаграммы - список обозначений. MarginLeft,
MarginRight, MarginTop, MarginBottom Значения
левого, правого, верхнего и нижнего полей. BottomAxis,
LeftAxis, RightAxis Эти свойства
определяют характеристики соответственно нижней, левой и правой осей. Задание
этих свойств имеет смысл для графиков и некоторых типов диаграмм. LeftWall,
BottomWall, BackWall Эти свойства
определяют характеристики соответственно левой, нижней и задней граней
области трехмерного отображения графика (см. рис.4.8 а, нижний график). Список серий
данных, отображаемых в компоненте. Разрешает или
запрещает трехмерное отображение диаграммы. Характеристики
трехмерного отображения. Масштаб
трехмерности (для рис.4.8 это толщина диаграммы и ширина лент графика). Рядом со многими из перечисленных свойств в Инспекторе
Объектов расположены кнопки с многоточием, которые позволяют вызвать ту или
иную страницу Редактора Диаграмм - многостраничного окна, позволяющего установить
все свойства диаграмм. Вызов Редактора Диаграмм возможен также двойным щелчком
на компоненте Chart
или щелчком на нем правой кнопкой мыши и выбором
команды Edit Chart во всплывшем меню. Если вы хотите попробовать воспроизвести приложение, показанное
на рис.4.8, сделайте двойной щелчок на верхнем компоненте Chart
. Вы
попадете в окно Редактора Диаграмм (рис.4.9) на страницу Chart, которая имеет
несколько закладок. Прежде всего вас будет интересовать на ней закладка Series.
Щелкните на кнопке Add - добавить серию. Вы попадете в окно (рис.4.10), в
котором вы можете выбрать тип диаграммы или графика. В данном случае выберите
Pie - круговую диаграмму. Воспользовавшись закладкой Titles вы можете задать
заголовок диаграммы, закладка Legend позволяет задать параметры отображения
легенды диаграммы (списка обозначений) или вообще убрать ее с экрана, закладка
Panel определяет вид панели, на которой отображается диаграмма, закладка 3D
дает вам возможность изменить внешний вид вашей диаграммы: наклон, сдвиг, толщину
и т.д. Когда вы работаете с Редактором Диаграмм и выбрали тип
диаграммы, в компонентах Chart
на вашей форме отображается ее вид с
занесенными в нее условными данными (см. рис.4.11).
Рис.4.10
Выбор типа диаграммы в Редакторе
Диаграмм Поэтому вы сразу можете наблюдать результат применения
различных опций к вашему приложению, что очень удобно. Страница Series, также имеющая ряд закладок, дает вам
возможность выбрать дополнительные характеристики отображения серии. В
частности, для круговой диаграммы на закладке Format полезно включить опцию
Circled Pie, которая обеспечит при любом размере компонента Chart
отображение диаграммы в виде круга. На закладке Marks кнопки группы Style
определяют, что будет написано на ярлычках, относящихся к отдельным сегментам
диаграммы: Value - значение, Percent - проценты, Label - названия данных и т.д.
В примере рис.4.8 включена кнопка Percent, a на закладке General установлен
шаблон процентов, обеспечивающий отображение только целых значений.
Вы можете, если хотите, добавить на этот компонент Chart
еще одну тождественную серию, нажав на закладке Series страницы Chart кнопку
Clone, а затем для этой новой серии нажать кнопку Change (изменить) и выбрать
другой тип диаграммы, например, Bar. Конечно, два разных типа диаграммы на
одном рисунке будут выглядеть плохо. Но вы можете выключить индикатор этой
новой серии на закладке Series, а потом предоставить пользователю выбрать тот
или иной вид отображения диаграммы (ниже будет показано, как это делается). Выйдите из Редактора Диаграмм, выделите в вашем приложении
нижний компонент Chart
и повторите для него задание свойств с помощью
Редактора Диаграмм. В данном случае вам надо будет задать две серии, если
хотите отображать на графике две кривые, и выбрать тип диаграммы Line.
Поскольку речь идет о графиках, вы можете воспользоваться закладками Axis и
Walls для задания координатных характеристик осей и трехмерных граней графика. На этом проектирование внешнего вида приложения завершается.
Осталось написать код, задающий данные, которые вы хотите отображать. Для
тестового приложения давайте зададим в круговой диаграмме просто некоторые
константные данные, а в графиках - функции синус и косинус. Для задания отображаемых значений надо использовать методы
серий Series
. Остановимся только на трех основных методах. Метод Clear
очищает серию от занесенных ранее данных. Метод Add
: (Const AValue: Double; Const ALabel: String;: TColor)
позволяет добавить в диаграмму новую точку. Параметр AValue
соответствует добавляемому значению, параметр ALabel
- название, которое
будет отображаться на диаграмме и в легенде, AColor
- цвет. Параметр ALabel
- не обязательный, его можно задать пустым: "".
Метод AddXY
:(Const AXValue, AYValue: Double;ALabel:
String; AColor: TColor)
позволяет добавить новую точку в график функции. Параметры AXValue
и AYValue
соответствуют аргументу и функции. Параметры ALabel
и AColor
те же, что и в методе Add
. Таким образом, процедура, обеспечивающая загрузку данных в
нашем примере, может иметь вид: 155;=251;=203;=404; var
: word; begin
Series1 do
begin
;(A1, "Цех 1", clYellow);(A2, "Цех 2",
clBlue);(A3, "Цех 3", clRed);(A4, "Цех 4", clPurple); end
;. Clear;. Clear; for
i: =0 to
100 do
begin
. AddXY (0.02*Pi*i, sin (0.02*Pi*i), "", clRed);.
AddXY (0.02*Pi*i, cos (0.02*Pi*i), "", clBlue); Если вы предусмотрели, например, для данных, отображаемых в
диаграмме, две серии Series1
и Series4
разных видов - Pie
и Bar
, то можете ввести процедуру, изменяющую по требованию пользователя
тип диаграммы. Эту процедуру можно ввести в событие OnClick
какой-нибудь
кнопки, в команду меню или, например, просто в обработку щелчка на компоненте Chart
.
Для того, чтобы загрузить данные в Series4
и сделать эту диаграмму в
первый момент невидимой, можно вставить в конце приведенной ранее процедуры
операторы Assign (Series1);. Active: =false;
Первый из этих операторов переписывает данные, помещенные в Series1
,
в серию Series4
. А второй оператор делает невидимой серию Series4
.
Смена типа диаграммы осуществляет процедура Active: = not
Series1. Active;. Active: = not
Series4. Active;
На рис.4.8 б вы можете видеть результат переключения
пользователя на другой вид диаграммы. Тема:
Студенты должны научиться: Теоретическая часть
(таблица рисунков) (диаграммы и графики) (окно для рисования) Shape
Brush
Image:
Chart:
Метод Clear
Метод Add
Метод AddXY
PaintBox:
Задание
1
Задание 2
Задание 3
with PaintBox1, canvas do Brush.Color:= clRed; Pen.Color:= clGreen; Pen.Style:= psDash; Pen.Color:= clRed; Пояснение:
Задание
4
Var i:integer;
Series1.Clear;
for i:=0 to 22 do
Series1.
AddXY(i*0.29,10*
sin(i*0.29),”,
clGreen);,
где i*0.29 (AXValue)
это аргумент, а 10*
sin(i*0.29) (AYValue)
Задание
5
with ComboBox1 do begin
Items:=Screen.Fonts;
Цель лабораторной работы
– Познакомиться с графическими возможностями Delphi
. Студенты должны научиться: Теоретическая часть
Delphi позволяет разрабатывать приложения, которые могут выводить графику: схемы, чертежи, иллюстрации. Для отображения графической информации в библиотеке Delphi предусмотрены компоненты, список которых дан в следующей таблице: (таблица рисунков) (диаграммы и графики) (окно для рисования) Кроме того, отображать и вводить графическую информацию можно на поверхности любого оконного компонента, имеющего свойство Canvas. Рисунки, создаваемые при выполнении приложения, могут быть как неподвижными, так и анимированными. Shape
: только условно может быть отнесен к средствам отображения графической информации, поскольку просто представляет собой различные геометрические фигуры, соответствующим образом заштрихованные. Основное свойство этого компонента - Shape (форма), которое может принимать значения, Brush
(кисть) – это свойство является объектом типа TBrush, имеющим ряд подсвойств, в частности: цвет (Brush.Color) и стиль (Brush.Style) заливки фигуры. Третье из специфических свойство компонента Shape - Pen (перо), определяющее стиль линий. Image:
основные свойства: Picture – отвечает за загрузку изображения, Stretch – отвечает за размер изображения в компоненте Image, AutoSize – отвечает за размер компонента, в который было загружено изображение с учетом размера изображения. Chart:
Для задания отображаемых значений надо использовать методы серий 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 и AYValue соответствуют аргументу и функции. Параметры ALabel и AColor те же, что и в методе Add. PaintBox:
находиться на странице System. Он представляет из себя простое окно с канвой, где можно рисовать произвольные изображения. Графические инструменты содержаться в свойствах Font, Brush и Pen. Канва (холст) содержится в свойстве Canvas компонента. Само рисование программируется в обработчике события onPaint. Задание
1
Задание 2
Задание 3
with PaintBox1, canvas do Brush.Color:= clRed; Pie(12,100,140,280,12,100,140,280); Pen.Color:= clGreen; Pen.Style:= psDash; Rectangle(120,60,Width,Height); Pen.Color:= clRed; Polyline(); TextOut(75,20,’Здесь может быть Ваш текст!’); Пояснение:
Первая строка задает цвет заполнения: Brush.Color:= clRed; Вторая рисует часть эллипса: Pie(12,100,140,280,12,100,140,280); Следующие строки задают параметры пера (какая будет окантовка у фигур), ширину, цвет и стиль линии: Pen.Width:= 4; Pen.Color:= clGreen; Pen.Style:= psDash; Но в данном случае мы будем видеть одну сплошную линию, так как при толщине более одного пиксела стиль линий будет psSolid (сплошной). За прорисовку квадрата отвечает следующая строка: Rectangle(120,60,Width,Height); Красную звездочку рисует нижеследующая команда: Polyline(); За вывод текста отвечает последняя строка: TextOut(75,20,’Здесь может быть Ваш текст!’); Задание
4
Var i:integer;
Series1.Clear;
for i:=0 to 22 do
Series1.AddXY(i*0.29,10*sin(i*0.29),”,clGreen);
Пояснение: метод Series1.Clear; очищает серию от занесенных ранее данных, чтоб при обновлении не было старых значений. Для рисования графика, необходимы значения, в нашем случае 22 значения, при которых происходит прорисовывание графика функцией Series1.
AddXY(i*0.29,10*
sin(i*0.29),”,
clGreen);,
где i*0.29 (AXValue)
это аргумент, а 10*
sin(i*0.29) (AYValue)
значение вычисления функции, ” (ALabel) название, которое будет отображаться на диаграмме и в легенде, можно оставить пустым, и clGreen (AColor) – цвет линий. Задание
5
DrawGrid1.Canvas.textrect(rect, Rect.Left, Rect.Top, char ((ARow+1)*32+acol));
with ComboBox1 do begin
Items:=Screen.Fonts;
ItemIndex:=Items.IndexOf(Font.Name);
DrawGrid1.Font.Name:=ComboBox1.Text;
Работа с графикой
в 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
. Следующая таблица содержит некоторые свойства и методы канвы: Первое, что мы сделаем, это инициализацию переменных при старте программы. Необходимо определить размеры области рисования (создадим для этого глобальную переменную Rect типа TRect) и сделать цвет фона Image
белым: procedure
TForm1.FormCreate(Sender: TObject); Затем нарисуем рамку по сторонам Image: procedure
TForm1.page; Попробуем, что получилось. Всё работает, но рамка пока не выводится. Поэтому добавим процедуру page
в в процедуру FormCreate
. Теперь красиво. Далее напишем простую процедуру стирания, очищения Image. Её нужно будет вызывать перед любым обновлением изображения, иначе предыдущее и последующее изображения будут перекрываться. procedure
TForm1.clearing; Теперь пришла очередь непосредственно процедуры вывода текста. Начнём выводить текст от точки (3, 3) - верхнего левого угла листа, с небольшим отступом в 3 пиксела. Каждую последующую строку будем смещать на высоту строки: procedure
TForm1.prn; Теперь всё готово для вывода текста. Делать это будем по событию OnChange: procedure
TForm1.Memo1Change(Sender: TObject); Ну и напоследок процедура изменения размера шрифта: procedure
TForm1.Edit1Change(Sender: TObject); Можно модифицировать эту программу для вывода текста на печать. Для работы с принтером нужно подключить модуль Printers
: unit
Unit1; Interface
uses
При работе с принтером как с полотном для начала печати вызывается метод BeginDoc
, затем производится вывод документа, завершается печать вызовом метода EndDoc
: Printer.BeginDoc; Ширина и высота полотна принтера доступны через свойства Printer.PageWidth
и Printer.PageHeight
. Закончить печать на одной странице и начать печатать на другой можно с помощью метода Printer.NewPage
.
Кроме того, отображать и вводить графическую информацию можно на
поверхности любого Отображение графики на канве Canvas.
Цель лабораторной работы
Delphi
.
Пиктограмма
Название
Страница
Назначение
Image (изображение)
Additional
Shape (форма)
Additional
DrawGrid
Additional
Chart
Additional
PaintBox
System
Пиктограмма
Название
Страница
Назначение
Image (изображение)
Additional
Используется для отображения графики: пиктограмм, битовых изображений и метафайлов
Shape (форма)
Additional
Используется для построения геометрических примитивов
DrawGrid
Additional
Используется для создания в приложении таблицы, которая может содержать графические изображения
Chart
Additional
Используется для создания диаграмм и графиков
PaintBox
System
Используется для создания на форме некоторой области, в которой можно рисовать
1. Сделать программу, которая строит заданный график функции y=10*sin(x)
Для стандартных цветов в 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
:
begin
Rect.Left:=0;
Rect.Top:=0;
Rect.Right:=Image1.Width;
Rect.Bottom:=Image1.Height;
Image1.Canvas.Brush.Color:=clWhite;
end
;
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
;
begin
Image1.Canvas.FillRect(Rect); //Прямоугольник Rect
заполняется белым цветом, изображение стирается.
end
;
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
;
begin
clearing;
prn;
page;
end
;
begin
Memo1.Font.Size:=UpDown1.Position;
Image1.Canvas.Font.Size:=UpDown1.Position;
Memo1Change(Sender);
end
;
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, StdCtrls, Printers
;
with
Printer.Canvas do
begin
... Печать документа...
end
;
Printer.EndDoc;