§ 4. Элементы управления для работы с графикой

4.1. Элемент управления для вставки рисунка (Image)

При создании приложений нередко возникает необходимость украсить их графическим изображением. В этом случае можно воспользоваться компонентом Image (изображение). На панели компонентов Additional компонент изображение представлен в виде , имя объекта Image. Компонент Image, помещенный на форму, получает имя ImageN, где N — номер 1, 2, 3… (пример 4.1).

Некоторые свойства компонента Image приведены в таблице (пример 4.2).

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

Компонент поддерживает вставку рисунков в форматах JPEG, PNG, BMP. Если требуется обработка изображения (любые изменения рисунка), то рисунок должен быть сохранен в формате BMP. Для рисунков формата PNG с прозрачным фоном при загрузке сохраняется прозрачность.

Свойство Picture компонента Image обладает методами LoadFromFile и SaveToFile, которые используются для загрузки и сохранения изображения. Метод LoadFromFile может быть использован для загрузки изображения при открытии приложения. В этом случае файл с рисунком должен находиться в папке проекта (или нужно прописать полный путь к файлу).

Пример 4.3. Создать проект, в котором на форме разместить фоновое изображение. При нажатии на кнопку поверх фонового изображения должно появиться другое изображение.

Этапы выполнения задания

  1. Поместить на форму два компонента Image и кнопку.
  2. Загрузить в компонент Image1 фоновое изображение. Задайте размеры Image1: Height = 370, Width = 550. Свойство Stretch = True.
  3. Для компонента Image2 установить значения для свойства Visible = False (изображение невидимо при запуске приложения). Размеры Height = 120, Width = 200. Свойство Stretch = True.
  4. Загрузить изображение в компонент Image2. Изображение может быть формата PNG с прозрачным фоном или формата BMP с фоном однородного цвета (в этом случае значение свойства Transparent = True).
  5. Написать обработчик события OnClick для компонента Button1.

Пример 4.1. Компонент Image (изображение) на форме:

Пример 4.2. Некоторые свойства компонента Image (изображение).

Свойство

Назначение

Picture

Используется для отображения изображений

Autosize

При значении true размер компонента будет автоматически подгоняться под размер помещенной в него картинки

Stretch

При значении true рисунок будет занимать весь компонент. При этом возможно искажение изображения

Center

При значении true рисунок будет отцентрирован относительно компонента

Transparent

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

Proportional

Значение true показывает, что при изменении размеров изображения будут сохраняться пропорции

Пример 4.3. Форма на этапе конструирования:

Обработчик события OnClick для Button1.

procedure TForm1.Button1Click(Sender: TObject);
begin
   Image2.Top := 220;
   Image2.Left := Random(300);
   Image2.Visible := True;
end;

Работающее приложение:

До нажатия на кнопку:

После нажатия на кнопку:

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