«Отображение графической информации в 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 .
«Отображение графической информации в Delphi»
План темы:
1. Способы вывода графической
информации в Delphi.
2. Отображение картинок.
3. Отображение геометрических
фигур.
В Delphi существует несколько способов
вывода графической информации:
Вывод заранее приготовленных
изображений (компоненты Image,
Shape);
Построение графиков и диаграмм
(компонент Chart и др.);
Формирование изображений
программным способом (объект
Canvas).2. Отображение картинок.
Отображение картинок при помощи
компонента Image мы рассмотрели в
одной из предыдущих тем.
Здесь мы рассмотрим пример
осуществления простейшей анимации
путем периодического изменения
отображаемой картинки в
компонентах Image.
Перейти на пример.
Отображение простейших
геометрических фигур на форме
обеспечивает компонент Shape.3. Отображение геометрических фигур.
Основные свойства компонента Shape:
Brush
Pen
Shape
Цвет (.Color) и стиль (.Style) для
заполнения фигуры.
Цвет (.Color), стиль (.Style), ширина
(.Width) и способ вывода (.Mode) линий
фигуры.
Вид геометрической фигуры.3. Отображение геометрических фигур.
Из нескольких компонентов Shape
можно создавать несложные рисунки.
Программно изменяя положение
(.Left, .Top) размер (.Width, .Height) и
цвет (Brush.Color) компонентов Shape
в рисунке можно осуществить
элементы простейшей анимации.
Рассмотреть пример.4. Построение графиков и диаграмм.
Диаграммы предназначены для
более наглядного представления
массивов численных данных, их
визуального отображения и анализа.
Пример.
Для построения диаграмм в Delphi
имеется несколько компонентов,
один из них компонент Chart (раздел
TeeChart Std).4. Построение графиков и диаграмм.
Вид компонента Chart после его
установки на форму:4. Построение графиков и диаграмм.
Кроме «Инспектора объектов» доступ к
свойствам компонента Chart можно
получить открыв специальное окно
диалога (правая кнопка на компоненте \
Edit Chart…)
Добавить
серию данных
Изменить тип
диаграммы4. Построение графиков и диаграмм.
Выбор типа диаграммы:4. Построение графиков и диаграмм.
Установка свойств для осей координат
(Axis):4. Построение графиков и диаграмм.
Данные для отображения обычно
передаются в Chart программно,
пример:
Series1.Clear; {очистить серию}
for i:=1 to N do
Series1.addxy(i, A[i], ‘’, clGreen);
Значение по
оси X
Значение по
оси Y
Подпись
по оси X
Цвет данных
на диаграмме
Рассмотреть пример построения
графика функции y = Sin(x)Далее:
Лабораторная работа № 13.1.
«Отображение картинок и геометрических
фигур, их анимация».
Задание:
1) Разработать приложение для осуществления
простейшей анимации путем периодического
изменения отображаемой картинки в
компонентах Image. (Количество картинок не
менее трех, картинки подобрать
самостоятельно).Задание:
2) Придумать и нарисовать рисунок из
компонентов Shape. Программно
изменяя положение, размер или цвет
компонентов Shape в рисунке
осуществить элементы простейшей
анимации.Далее:
Лабораторная работа № 13.2.
«Построение графиков и диаграмм».
Задание:
1) Модифицировать приложение из
лабораторной работы № 9 (Отображение
данных в таблице). Добавить возможность
отображения некоторых данных из таблицы
на гистограмме или круговой диаграмме.
2) Построить график заданной функции.
Слайд 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) Построить график заданной функции.
Посмотреть все слайды
Библиотека визуальных компонентов (англ. 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?
