Просмотр графических файлов, или Лови момент!

Часто приходится использовать в приложениях различные графические файлы. Например, графический редактор должен уметь загружать графику из файла и сохранять в файл, используя широко распространённые форматы. Графические файлы применяют и в обычных программах. Например, иногда авторы программы помещают свою фотографию в пункт «О программе…» главного меню.

Задачи урока

  • Знакомство с компонентами выбора файлов и директорий: FileListBoxDirectoryListBox и DriveComboBox.
  • Работа со свойством Ancros.
  • Загрузка графических файлов с помощью компонента Image.
  • Подключение графического формата JPG.

Выполнение упражнения

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

Рисунок 1. Окно приложения

1. Дизайн приложения

1. Расположите компоненты, как показано на рисунке 2. Справа расположен компонент Image.

Рисунок 2

У компонента Panel1 свойство Align = alLeft, а у Image1 — Align = alClient. Это позволяет динамически изменять размер компонентов при изменении размеров формы. Причём ширина панели будет фиксированной. Поставьте её равной 310 пикселям.

2. Просмотрщик графических файлов должен иметь средства для быстрой навигации по папкам и выбора файла для просмотра. Среда Delphi имеет готовые компоненты для навигации по файловой системе. Следует заметить, что те компоненты, которые мы будем использовать в данном приложении, считаются устаревшими — они предназначались ещё для Windows 3.1. Но, тем не менее, они достаточно функциональны и просты в использовании.

Поместите на панель Panel1 компоненты FileListBox DirectoryListBox  и DriveComboBox  (вкладка Win 3.1). Разместите их так, как показано на рисунке 3. Обратите внимание, что компоненты начинают работать уже в режиме DesignTime, показывая текущий диск, папку и список файлов в текущей папке.

Рисунок 3

Выбор диска осуществляется при помощи компонента DriveComboBox, выбор папки — при помощи DirectoryListBox, а выбор файла — при помощи FileListBox.

2. Установка компонентам требуемых свойств

1. Измените имена компонентов следующим образом:

Имя, которое было

Имя, на которое

необходимо изменить

Image1

ImageOut
Panel1 Panel
DirectioryListBox1 DirectioryListBox
DriveListBox1 DriveListBox
FileListBox1 FileListBox

 

2. Очистите свойство Caption компонента Panel1 и измените свойство Caption формы (Form1) согласно рисунку 3.

3. Измените значение свойства Proportional на True у компонента Image. Это позволит компоненту пропорционально масштабировать загружаемые в него изображения, если их высота либо ширина больше размеров Image.

4. Запустите проект и попробуйте изменить директорию и диск. Вы увидите, что при смене директории в компоненте выбора файлов изменения не происходят. Такая же ситуация при выборе дисков. Сейчас эти объекты никак не связаны. Закройте приложение.

5. Установите связь между компонентами DriveComboBoxDirectoryListBox и FileListBox, чтобы они работали как одно целое. Для этого:

  • выделите компонент DriveComboBox и в выпадающем списке свойства DirList выберите компонент DirectoryListBox (рисунок 4а). После этого при смене диска автоматически будет обновляться дерево каталогов;
  • выделите компонент DirectoryListBox и в выпадающем списке свойства FileList выберите компонент FileListBox (рисунок 4б). После этого при смене каталога автоматически будет обновляться список файлов.

 а)  б)

Рисунок 4

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

Рисунок 5

7. Увеличьте высоту формы, потянув за её нижнюю границу (рисунок 5). Панель растянулась, а компоненты выбора каталога и файлов — нет. Для исправления этого недостатка выделите компоненты DirectoryListBoxFileListBox и установите у них значение свойство AkBottom в True (рисунок 6). Как видно из рисунка, оно является одним из свойств составного свойства Anchors (переводится как «закреплять»). Свойство Anchors закрепляет стороны компонента относительно сторон формы. По умолчанию компоненты прикреплены к левому верхнему углу формы.

Рисунок 6

8. Запустите проект и снова увеличьте высоту формы. Теперь компоненты DirectoryListBoxFileListBox будут растягиваться вместе с формой. Закройте приложение.

3. Загружаем файл

1. Теперь настала пора «научить» наше приложение просматривать графические файлы. Создайте событие OnChange у компонента FileListBox и запишите в нём следующие строки:

procedure TForm1.FileListBoxChange(Sender: TObject);
begin

   if FileListBox.FileName <> '' then  ImageOut.Picture.LoadFromFile( FileListBox.FileName );

end;
Листинг 1

Событие OnChange возникает в тот момент, когда выбран другой файл в списке. При этом свойство FileName содержит путь к выбранному файлу и его название. Если ни один файл не выбран, то свойство FileName содержит пустую строку.

Теперь поясним код.

В том случае, если пользователь выбрал какой-то файл, необходимо в компоненте Image отобразить его содержимое.

Компонент Image имеет свойство Picture (класса TPicture), отвечающее за отображаемый рисунок. У класса TPicture есть метод LoadFromFile, позволяющий загружать графический файл, который тут же будет отображён компонентом. Метод LoadFromFile поддерживает несколько форматов файлов, которые отличает друг от друга по расширению файла.

2. Запустите проект. Найдите папку, в которой лежат графические файлы (папка «Обеспечение») и просмотрите их. Обратите внимание на то, что при попытке выбрать файл формата, отличного от BMP, ICO и EMF (например, JPG), возникает исключение (рисунок 7).

Рисунок 7

С помощью этого исключения метод LoadFromFile сигнализирует о том, что он не может загрузить выбранный файл, так как указанное расширение (в данном случае .jpg) ему незнакомо.

Закройте приложение.

4. Подключение формата JPG

Добавим в приложение возможность просматривать файлы ещё одного формата — JPEG (как правило, файлы такого формата имеют расширение .jpg). К счастью, для этого формата уже есть готовый класс TJpegImage. Он находится в дополнительном модуле Jpeg.

Подключите к проекту дополнительный модуль Jpeg. Для этого поднимитесь по тексту программы выше — найдите ключевое слово uses. После него перечислены все используемые модули. Добавьте в конец списка модуль Jpeg.

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls, StdCtrls, FileCtrl, Jpeg;
Листинг 2

Теперь файлы с форматом JPG можно загрузить в компонент Image c помощью метода LoadFromFile.

5. Фильтр расширений

Наше приложение поддерживает только четыре расширения файлов, поэтому нет необходимости отображать файлы с другими расширениями (EXE, DLL, MP3, CFG и т. д.). Для этого необходимо указать фильтр файлов (называемый также маской) для объекта FileListBox.

1. Выберите компонент FileListBox, найдите свойство Mask (рисунок 8) и установите для него следующее значение: *.bmp;*.ico;*.emf;*.jpg.

Здесь мы указываем множественную маску. В таких случаях маски для разных форматов должны отделяться друг от друга точками с запятой.

Рисунок 8

2. Запустите программу. Теперь она полностью готова к использованию.

6. Коротко о главном

С помощью компонента FileListBox  (вкладка Win 3.1) можно выбирать файлы в заданной директории.

С помощью компонента DirectoryListBox  (вкладка Win 3.1) можно выбирать директории на заданном диске.

С помощью компонента DriveComboBox  (вкладка Win 3.1) можно выбирать диск.

Компонент FileListBox имеет свойство Mask, отвечающее за фильтр отображаемых в нём файлов.

Свойство Anchors закрепляет стороны компонента относительно сторон своего контейнера. По умолчанию компоненты прикреплены к левому верхнему углу контейнера.

Свойство Proportional компонента Image позволит пропорционально масштабировать загружаемые в него изображения, если высота либо ширина изображения больше размеров компонента.

Компонент Image имеет свойство Picture, отвечающее за отображаемый рисунок.

Метод LoadFromFile свойства Picture поддерживает несколько форматов файлов: BMP, ICO, EMF.

Для загрузки в компонент Image графических фалов формата JPG необходимо подключить к проекту модуль Jpeg.

7. Выполнение заданий

Задания I уровня сложности

1. Добавьте в интерфейс программы два компонента CheckBox. Первый будет отвечать за включение/выключение режима пропорционального изменения размера рисунка (свойство Proportional), а второй — за центрирование рисунка (свойство Center типа Boolean).

Задания II уровня сложности

1. Добавьте в интерфейс программы дополнительную панель, отображающую информацию о количестве файлов форматов JPG, BMP, ICO и EMF в выбранной папке.

Подсказка:

  • Для определения количества отображаемых файлов в компоненте FileListBox необходимо вызвать свойство Count (тип Integer) через свойство Items класса TStringFileListBox.Items.Count.
  • Для доступа к массиву отображаемых файлов в компоненте FileListBox необходимо вызвать свойство-массив Strings (тип String) через свойство Items класса TStringFileListBox.Items.String[ x ], где х — порядковый номер файла в массиве. Массив начинается с 0.