Лабораторная работа 4
Работа с простейшими графическими объектами Delphi.
Использование Радио-кнопок.
В этой лабораторной работе мы покажем, как можно придать приложению совершенно оригинальный вид с помощью компонентов: Image (DBImage), Shape и Bevel, а также как управлять приложением, используя «зависимые» переключатели (радио-кнопки).
Image (Изображение) - позволяет поместить графическое изображение в любое место на форме. Этот объект очень прост в использовании - достаточно выбрать его на странице Additional, поместить в нужное место формы и задать требуемые размеры.
Картинка должна храниться в файле одного из форматов: BMP (bitmap), WMF (Windows Meta File) или ICO (icon). Компонент DBImage используется при программировании баз данных и отображает картинку только формата BMP.
Примечаие. Как известно, существует множество других форматов для хранения изображений, например: РCX, GIF, TIFF, JPEG. Для включения в приложение изображений в этих форматах, нужно предварительно перевести их в формат BMP, WMF или ICO. Перевод изображения из одного формата в другой «умеют» осуществлять ряд программ (например, графический редактор Paint, пакет PhotoShop и др.).
Картинку можно поместить на форму во время создания приложения, изменив свойство Picture компонента Image в Инспекторе Объектов, прописав туда путь к нужному графическому файлу.
При проектировании приложения следует помнить, что изображение, помещенное на форму, включается в файл ресурсов (*.dpr) и затем включается в EXE-файл. Поэтому такой EXE-файл может получиться достаточно большим и занимать много места в оперативной памяти компьютера.
Как альтернативу, можно рассмотреть загрузку картинки во время выполнения программы. Для этого у свойства Picture, которое является объектом со своим набором свойств и методов, есть специальный метод LoadFromFile (Загрузка из файла). Это делается, например, так:
Image1.Picture. LoadFromFile(<[Путь]Имя загружаемого файла>);
Примечание. В этом случае путь к файлу должен быть заключен в апострофы, например: ‘C:\Galery\Картина.bmp’.
Ниже приведены наиболее важные свойства компонента Image, доступные в Инспекторе Объектов, которыми можно воспользоваться во время разработки приложения:
Свойство | Значение |
Align | Позволяет автоматически изменить масштаб изображения и установить месторасположение картинки в окне формы. |
AutoSize | При значении равным True, размеры компонента Image автоматически подгоняются под размеры картинки. |
Center | При значении равным True картинка цент-рируется в пределах компонента Image. |
Picture | Определяет изображение, отображаемое в области компонента в одном из следую-щих форматов: *.bmp (точечный рисунок), *.wmf (метафайл), *.ico (значок). |
Stretch | При значении равным True, изображение масштабируется так, чтобы его размеры совпадали с размерами компонента Image. Масштабирование выполняется только для точечных рисунков *.bmp и метафайлов *.wmf. |
Задание 1. Выполните следующие действия:
· откройте новый проект;
· дайте форме название “Работа с графическими объектами”;
· поместите на форму компонент Image со страницы Additional Палитры Компонентов и задайте в его свойстве Picture путь к любому графическому файлу формата *.bmp, имеющемся на Вашем компьютере;
· поэкспериментируйте со свойствами компонента Image, приведенными в таблице выше;
· покажите результаты Вашей работы преподавателю. Удалите объект Image с формы. Проект не закрывайте – он Вам еще пригодится.
Shape (Геометрическая фигура) - простейший графический объект, принимающий форму по желанию разработчика: эллипс, прямоугольник, квадрат, прямоугольник (квадрат) с закругленными углами. Ниже приводятся его важнейшие свойства:
Shape (Вид фигуры) - задает вид объекта, причём размер объекта определяется рамкой, в которую он вписан. Размеры рамки можно изменить по желанию. Может принимать следующие значения:
Значение | Перевод |
stCircle | Круг |
stEllipse | Эллипс |
stRectangle | Прямоугольник |
stRoundRect | Скругленный прямоугольник |
stRoundSquare | Скругленный квадрат |
stSquare | Квадрат |
Brush (Кисть) - задает цвет и вид заполнения объекта;
Pen (Перо) - определяет цвет и вид границы объекта.
Эти свойства можно менять как во время разработки (дизайна), так и во время выполнения программы, написав нужные строки кода.
Bevel (Рамка) - объект, принимающий вид рамки или линии. Внешний вид задаётся с помощью следующих свойств:
Shape (Вид рамки) - может принимать значения:
Значение | Перевод |
bsBottomLine | Линия снизу |
bsBox | Объемный прямоугольник |
bsFrame | Прямоугольная рамка |
bsLeftLine | Линия слева |
bsRightLine | Линия справа |
bsSpacer | Пунктирная рамка |
bsTopLine | Линия сверху |
Style (Стиль) - может принимать значения:
Значение | Перевод |
bsLowered | Вдавленый |
bsRaised | Выпуклый |
Задание 2. Выполните следующие действия:
· поместите на форму проекта задания 1 компонент Shape и Bevel;
· поэкспериментируйте с их свойствами, приведенными в таблице выше;
· создайте несколько различных геометрических фигур с различным заполнением и цветом, используя свойства Shape, Brush и Pen компонента Shape;
· продемонстрируйте результаты работы преподавателю. Покиньте проект без сохранения.
Задание 3. Пользуясь этими компонентами, создадим простейшую программу для просмотра графических файлов.
Выполните следующие действия:
· откройте новый проект;
· задайте свойству Caption формы значение "Просмотр графических файлов";
· поместите на форму следующие компоненты: Image, Shape, Label, два компонента Button со страницы Standart и компонент OpenDialog со страницы Dialogs;
· у компонента Image измените свойство Align на значение alLeft для того, чтобы ваша картинка была выровнена по левому краю;
· у компонента Label задайте свойству Caption значение "Просмотр";
· у компонента Shape измените свойство Shape по своему усмотрению;
· поэкспериментируйте со свойствами Pen и Brush у компонента Shape, а так же со свойством Color у компонента Label для создания различных визуальных эффектов;
Примечание. Компонент Label должен быть расположен поверх компонента Shape. Для этого на форму должен быть сначала помещен компонент Shape, а затем – Label.
· измените значения свойств Caption у компонентов Button на “Открыть” и “Выход” соответственно.
В результате всех Ваших действий окно формы приложения должно выглядеть примерно так, как на Рис. 4.1.
 |
Рис. 4.1. Примерный вид формы разрабатываемого приложения
Теперь осталось написать код обработки нажатий кнопок. Ниже полностью приведён текст модуля с необходимыми комментариями.
Примечание. Подчеркнутым шрифтом выделено то, что предсто-
ит написать Вам, обычным шрифтом – заготовка, созданная Del-
phi. Служебные слова выделены жирным шрифтом.
unit Unit1;
-Раздел интерфейса
interface
uses // Список используемых модулей
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, Buttons, ExtCtrls;
type //Раздел типов
TForm 1= class(TForm)
Image1: TImage;
Button1: TButton;
Button2: TButton;
OpenDialog1: TOpenDialog;
Shape1: TShape;
Label1: TLabel;
procedure Button1Click(Sender: TObject); //Процедуры, исполь-
procedure Button2Click(Sender: TObject); // зуемые программой
private
{ Private declarations }
public
{ Public declarations }
end;
var //Раздел переменных
Form1: TForm1;
Раздел реализации---
implementation
{$R *.DFM} //Подключение файлов ресурсов
procedure TForm1. Button1Click(Sender: TObject);
// Процедура обработки события - нажатие кнопки "Выход"
begin
Close //метод, обеспечивающий закрытие окна приложения
end;
procedure TForm1. Button2Click(Sender: TObject);
// Процедура обработки события - нажатие кнопки "Открыть"
begin
if OpenDialog1.Execute then //Проверка подтверждения выбора файла
begin
Caption:= OpenDialog1.FileName; //Изменение заголовка формы
Image1.Picture. LoadFromFile(OpenDialog1.FileName)
//Загрузка картинки
end
end;
-----Раздел инициализации (отсутствует)-----
end.
Примечание. В тексте программы использован метод OpenDialog1.Execute,открывающий стандартное диалоговое окно Windows для открытия файлов (принимает значение True в случае успешного открытия, False – в ином случае).
В заключение работы с этим заданием выполните следующее:
· сохраните файлы проекта на диске в отдельной папке. Файлу проекта присвойте имя Prosmotr. dpr, имя файла кода программы (Unit1.pas) оставьте без изменения;
· откомпилируйте программу, создав ЕХЕ-файл (Project/Compile). Помните, что этот файл будет иметь имя проекта, т. е. Prosmotr. ехе;
· запустите Ваш ЕХЕ-файл из Windows95/98/NT и поработайте с ним. Покажите результаты работы преподавателю.
После запуска окно приложения должно выглядеть примерно так, как на рис. 4.2 (картинка, естественно, Ваша).
 |
Рис. 4.2. Вид окна приложения после запуска
Компонент RadioButton.
Этот компонент носит название «Зависимый переключатель» или «Радио-кнопка» и расположен на странице Standard Палитры Компонентов. Компоненты этого типа всегда объединяются в группы и работают согласованно: при включении одного из них все остальные выключаются (подобно кнопкам обычного радиоприемника, откуда и взялись их названия).
В задании, приведенном ниже, будет показано, как осуществить такое согласованное взаимодействие отдельных RadioButton в коде программы. Но гораздо быстрее и удобнее это можно сделать с помощью компонента RadioGroup, о чем будет рассказано в следующей лабораторной работе.
Задание 4. Создадим ещё одну программу для просмотра графических файлов. Её идея состоит в следующем: при помощи зависимых переключателей (радио-кнопок) выводить на форму различные картинки. Вид формы представлен на рис. 4.3.
Рис. 4.3. Вид формы приложения «Переключение картинок»
Выполните следующие действия:
· откройте новый проект;
· измените заголовок формы в свойстве Caption на значение «Переключение картинок»;
· установите компонент RadioButton (Радио-кнопка) на форму со страницы Standart Палитры Компонентов;
· замените в свойстве Caption стандартное значение RadioButton1 на новое значение «1 картинка»;
· аналогичным образом установите второй и третий компоненты Радио-кнопка и дайте им соответственно имена «2 картинка» и «3 картинка»;
· расположите на форме компонент Button (кнопка);
· замените в свойстве Caption стандартное значение Button1 на значение «Выход»;
· двойным щелчком по объекту Button1 раскройте Редактор Кода, вставьте строку: Close;
· выберете на Палитре Компонентов вкладку Additional. Щелкнув по компоненту Image, обведите курсором мыши место предполагаемой вставки рисунка на форме;
· сделайте двойной щелчок в поле свойства Picture в Инспекторе Объектов. Раскроется диалоговое окно Редактора Изображений (Picture Editor). Загрузите файл рисунка (можно загрузить любой рисунок формата bmp), щелкнув по кнопке Load. По окончании работы с Picture Editor щелкните по кнопке Ok. Рисунок перенесется на форму. Размеры его можно подредактировать мышью;
· установите аналогичным образом ещё две картинки (см. рис. 4.4.);
Рис. 4.4. Рабочий вид формы после установки трёх картинок
· выделите первую картинку. Установите значение свойства Stretch компонента Image равным True для того, чтобы размеры картинки масштабировались под размеры компонента. Аналогичные действия проделайте и для остальных двух картинок;
Примечание. Так как картинки растровые, то при изменении масштаба их вид может значительно измениться. В этом случае лучше воспользоваться свойством AutoSize компонента Image, установив его значение равным True.
· выделите компонент RadioButton1. Текущее состояние зависимого переключателя контролируется свойством Checked. Если одна радио-кнопка включена, то остальные должны быть выключены, поэтому установите значения свойства Checked, согласно таблице, приведенной ниже:
Компонент | Checked |
RadioButton1 | True |
RadioButton2 | False |
RadioButton3 | False |
· по очереди, активизируя компоненты Image мышью, установите для них следующие значения свойства Visible в Инспекторе Объектов:
Компонент | Visible |
Image1 | True |
Image2 | False |
Image3 | False |
Примечание: За видимость картинок на форме отвечает свойство Visible компонента Image. Когда включена RadioButton1, то должна отображаться первая картинка, остальные не должны быть видны.
· для управления переключением картинок необходимо написать программный код. Активизируйте RadioButton1, двойным щелч-ком мыши откройте Редактор Кода и впишите код:
procedure TForm1.RadioButton1Click(Sender: TObject);
begin
Image1.Visible:=True; // показать картитку
Image2.Visible:=False; // спрятать картинку
Image3.Visible:=False; // спрятать картинку
end;
· аналогично, запишите код обработчиков событий для других радио-кнопок RadioButton2 и RadioButton3:
procedure TForm1.RadioButton2Click(Sender: TObject);
begin
Image2.Visible:=True; // показать картитку
Image1.Visible:=False; // спрятать картинку
Image3.Visible:=False; // спрятать картинку
end;
procedure TForm1.RadioButton3Click(Sender: TObject);
begin
Image3.Visible:=True; // показать картитку
Image2.Visible:=False; // спрятать картинку
Image1.Visible:=False; // спрятать картинку
еnd;
· свойство Left всех картинок сделайте одинаковым, например, равным 10, чтобы поместить все картинки в одно место;
Примечание. Этого же эффекта можно добиться простым наложением картинок друг на друга.
· сохраните результаты работы в отдельной папке. На запрос Delphi о задании имён файлов при сохранении введите: для проекта – Рrosmotr2.dpr, а имя файла программного кода (Unit1.pas) оставьте без изменения;
· запустите проект. Он должен выглядеть, как показано на рис. 4.3. Проверьте работу радио-кнопок. Размеры компонентов Image мож-но увеличить так, чтобы использовать всю, незанятую кнопками, область формы. Покажите результаты работы преподавателю.
Задание для самостоятельной работы:
Попробуйте модифицировать проект, используя вместо радио-кнопок две обычные кнопки «Вперед» и «Назад», которые бы позволяли просматривать любое заданное количество картинок.
Вопросы
1. Как поместить рисунок на форму? Какие способы для этой цели существуют и в чем их принципиальное отличие?
2. Картинки какого формата может подключать к приложению компонент Image?
3. Какое свойство компонента Image отвечает за изменение размеров картинки до размеров компонента? Компонента до размеров картинки? За видимость картинки?
4. Для чего и как можно использовать компонент Shape?
5. Какие значения и каким свойствам компонента Bevel нужно задать для получения выпуклого прямоугольника?
6. Каким компонентом задаётся Радио-кнопка? В чём особенность работы нескольких Радио-кнопок, присутствующих на форме одновременно?
7. Какое свойство отвечает за текущее состояние компонента RadioButton и каким образом?
Резюме
1. Для встраивания изображения в приложение используется компонент Image, который имеет свойство Picture (путь к файлу с картинкой, задаваемой в процессе разработки приложения) и метод LoadFromFile (загрузка картинки из файла во время выполнения приложения по следующей схеме:
Image1.Picture. LoadFromFile(‘<путь к графическому файлу>’)
2. Встраивать в приложение можно только картинки, имеющие формат: *.bmp, *.wmf, *.ico. Графические файлы, имеющие другой формат должны быть предварительно преобразованы (конвертированы) в нужный формат подходящими для этой цели программами.
3. Простейшие графические объекты могут быть созданы в окне приложения следующими компонентами:
Shape (Геометрическая фигура) - графический объект принимающий форму по желанию разработчика: эллипс, прямоугольник, квадрат, прямоугольник (квадрат) с закругленными углами.
Bevel (Рамка)- графический объект, принимающий вид рамки или линии.
4. Компонент RadioButton (Радио-Кнопка), представляет собой «зависимый» переключатель. Один такой переключатель в приложении использовать не имеет смысла, поэтому они объединяются в группы, для того, чтобы там можно было выбрать один из них. Текущее состояние зависимого переключателя контролируется свойством Checked. Если одна радио-кнопка включена, то остальные должны быть отключены, именно поэтому к нему применяется термин «зависимый».
