Работа с простейшими графическими объектами Delphi. Использование Радио-кнопок

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

В этой лабораторной работе мы покажем, как можно придать приложению совершенно оригинальный вид с помощью компонентов: 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, доступные в Инспекторе Объектов, которыми можно воспользоваться во время разработки приложения:

Табл. 1

Свойство	Значение
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 (Вид фигуры) - задает вид объекта, причём размер объекта определяется рамкой, в которую он вписан. Размеры рамки можно изменить по желанию. Может принимать следующие значения:

Табл. 2

Значение	Перевод
stCircle	Круг
stEllipse	Эллипс
stRectangle	Прямоугольник
stRoundRect	Скругленный прямоугольник
stRoundSquare	Скругленный квадрат
stSquare	Квадрат

Brush (Кисть) - задает цвет и вид заполнения объекта;

Pen (Перо) - определяет цвет и вид границы объекта.

Эти свойства можно менять как во время разработки (дизайна), так и во время выполнения программы, написав нужные строки кода.

Bevel (Рамка) - объект, принимающий вид рамки или линии. Внешний вид задаётся с помощью следующих свойств:

Shape (Вид рамки) - может принимать значения:

Табл. 3

Значение	Перевод
bsBottomLine	Линия снизу
bsBox	Объемный прямоугольник
bsFrame	Прямоугольная рамка
bsLeftLine	Линия слева
bsRightLine	Линия справа
bsSpacer	Пунктирная рамка
bsTopLine	Линия сверху

Style (Стиль) - может принимать значения:

Табл. 4

Значение	Перевод
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 на “Открыть” и “Выход” соответственно.

В результате всех Ваших действий окно формы приложения должно выглядеть примерно так, как на Рис. 1.

Рис. 1. Примерный вид формы разрабатываемого приложения

Теперь осталось написать код обработки нажатий кнопок. Ниже полностью приведён текст модуля с необходимыми комментариями.

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 и поработайте с ним. Покажите результаты работы преподавателю.

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

Рис. 2. Вид окна приложения после запуска

Компонент RadioButton.

Этот компонент носит название «Зависимый переключатель» или «Радио-кнопка» и расположен на странице Standard Палитры Компонентов. Компоненты этого типа всегда объединяются в группы и работают согласованно: при включении одного из них все остальные выключаются (подобно кнопкам обычного радиоприемника, откуда и взялись их названия).

В задании, приведенном ниже, будет показано, как осуществить такое согласованное взаимодействие отдельных RadioButton в коде программы. Но гораздо быстрее и удобнее это можно сделать с помощью компонента RadioGroup, о чем будет рассказано в следующей лабораторной работе.

Задание 4. Создадим ещё одну программу для просмотра графических файлов. Её идея состоит в следующем: при помощи зависимых переключателей (радио-кнопок) выводить на форму различные картинки. Вид формы представлен на рис. 3

Рис. 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. Рабочий вид формы после установки трёх картинок

выделите первую картинку. Установите значение свойства Stretch компонента Image равным True для того, чтобы размеры картинки масштабировались под размеры компонента. Аналогичные действия проделайте и для остальных двух картинок;

Примечание. Так как картинки растровые, то при изменении масштаба их вид может значительно измениться. В этом случае лучше воспользоваться свойством AutoSize компонента Image, установив его значение равным True.

выделите компонент RadioButton1. Текущее состояние зависимого переключателя контролируется свойством Checked. Если одна радио-кнопка включена, то остальные должны быть выключены, поэтому установите значения свойства Checked, согласно таблице, приведенной ниже:

Табл. 5

Компонент	Checked
RadioButton1	True
RadioButton2	False
RadioButton3	False

по очереди, активизируя компоненты Image мышью, установите для них следующие значения свойства Visible в Инспекторе Объектов:

Табл. 6

Компонент	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) оставьте без изменения;

запустите проект. Он должен выглядеть, как показано на рис. 3. Проверьте работу радио-кнопок. Размеры компонентов Image мож-но увеличить так, чтобы использовать всю, незанятую кнопками, область формы. Покажите результаты работы преподавателю.

Задание для самостоятельной работы:

Попробуйте модифицировать проект, используя вместо радио-кнопок две обычные кнопки «Вперед» и «Назад», которые бы позволяли просматривать любое заданное количество картинок.

Вопросы

Как поместить рисунок на форму? Какие способы для этой цели существуют и в чем их принципиальное отличие?

Картинки, какого формата может подключать к приложению компонент Image?

Какое свойство компонента Image отвечает за изменение размеров картинки до размеров компонента? Компонента до размеров картинки? За видимость картинки?

Для чего и как можно использовать компонент Shape?

Какие значения и каким свойствам компонента Bevel нужно задать для получения выпуклого прямоугольника?

Каким компонентом задаётся Радио-кнопка? В чём особенность работы нескольких Радио-кнопок, присутствующих на форме одновременно?

Какое свойство отвечает за текущее состояние компонента RadioButton и каким образом?

программный графический image

Резюме

Для встраивания изображения в приложение используется компонент Image, который имеет свойство Picture (путь к файлу с картинкой, задаваемой в процессе разработки приложения) и метод LoadFromFile (загрузка картинки из файла во время выполнения приложения по следующей схеме:

Image1.Picture.LoadFromFile(`<путь к графическому файлу>').

Встраивать в приложение можно только картинки, имеющие формат: *.bmp, *.wmf, *.ico. Графические файлы, имеющие другой формат должны быть предварительно преобразованы (конвертированы) в нужный формат подходящими для этой цели программами.

Простейшие графические объекты могут быть созданы в окне приложения следующими компонентами:

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

Bevel (Рамка)- графический объект, принимающий вид рамки или линии.

4. Компонент RadioButton (Радио-Кнопка), представляет собой «зависимый» переключатель. Один такой переключатель в приложении использовать не имеет смысла, поэтому они объединяются в группы, для того, чтобы там можно было выбрать один из них. Текущее состояние зависимого переключателя контролируется свойством Checked. Если одна радио-кнопка включена, то остальные должны быть отключены, именно поэтому к нему применяется термин «зависимый».

Размещено на Allbest.ru

...