Печатать книгуПечатать книгу

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

Сайт: Профильное обучение
Курс: Информационные технологии. 11 класс (Базовый уровень)
Книга: § 4. Элементы управления для работы с графикой
Напечатано:: Гость
Дата: Суббота, 4 Май 2024, 18:56

Оглавление

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;

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

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

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

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

4.2. Построение графиков функций

Некоторые компоненты в Delphi, такие как форма, компонент Image и др., имеют свойство Canvas (канва, холст). Канва представляет собой область, на которой можно рисовать или выводить на нее растровые изображения. Система координат у канвы такая же, как и для любого компонента в Delphi — точка с координатами (0, 0) расположена в верхнем левом углу, ось ОY направлена вниз. Каждая точка имеет координаты X и Y. Координаты измеряются в пикселях. Важнейшее свойство пикселя — его цвет. Цвет пикселя канвы определяется значением свойства Pixels. Это свойство представляет собой двумерный массив, в котором хранится цвет каждого пикселя. Для задания цвета в Delphi можно воспользоваться несколькими способами (пример 4.4).

Класс TCanvas содержит большое количество свойств и методов, позволяющих строить изображения. Многие из методов канвы совпадают с процедурами, которые использовались в библиотеке GraphABC среды программирования PascalABC.Net. Описание этих методов приведено в приложении.

Пример 4.5. Создать проект, в котором построить график функции  y = xsinx на промежутке, заданном пользователем.

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

  1. Поместить на форму компоненты: Image, два компонента Label, два компонента Edit и компонент Button.
  2. Изменить свойства Caption у компонентов Label1, Label2 на x0 и xn соответственно.
  3. Изменить свойства Text у компонентов Edit1 и Edit2 на — 20 и 20 соответственно.
  4. Изменить свойства Caption у компонента Button1 на «Построить график».
  5. Написать обработчик события OnClick для компонента Button1, график функции по точкам.

5.1. Нарисовать оси координат в виде двух перпендикулярных линий, пересекающихся в центре компонента Image.
5.2. Чтобы получить видимость сплошной линии, количество точек, которые образуют график функции, должно быть не менее 10000 (n = 10000 ).
5.3. Шаг изменения значения x определяется как
5.4. При построении нужно учитывать масштаб: ширина компонента Image должна соответствовать длине заданного промежутка. Тогда масштабный коэффициент можно рассчитать по формуле
5.5. Поскольку расположение осей координат на экране не совпадает с расположением осей, принятым в математике, то нужно преобразовать координаты: точке (0; 0) должна соответствовать точка в центре компонента Image. Для этого полученное значение x нужно увеличить на значение cx = Image1.Widt div2, а значение у на cy = Image1.Height div2. Так как ось Y направлена вниз, а не вверх, то значение  нужно изменить, поменяв знак на противоположный. На канве будет закрашиваться точка с координатами ( xekr = x · k + cx,  yekr = –y · k + cy).
5.6. Необходимо учитывать, что при вычислении значения x и y будут вещественными, а значения координат на канве могут быть только целыми. Поэтому перед прорисовкой точки нужно преобразовать вещественные числа в целые с помощью функции trunc.

Если в работающем приложении изменить концы промежутка, то график будет порисован поверх уже имеющегося (пример 4.6). Чтобы избежать такой ситуации, перед построением графика нужно очистить компонент. Для этого можно использовать команду:

  Image1.Picture := Nil;

Пример 4.4. Способы задания цвета в Delphi:

  1. Задание цвета с помощью констант. Значения констант начинаются на буквосочетание cl. Далее может следовать имя цвета (например, clSkyBlue — небесно-синий, clRed — красный) или элементов Windows, цвет которых зависит от настроек пользователя (clBtnFace — цвет поверхности кнопки, clActivCaption — цвет строки заголовка активного окна). Список возможных значений можно посмотреть в инспекторе объектов у любого компонента, обладающего свойством Color или посмотреть в приложении.
  2. Задание цвета с помощью шестнадцатеричных чисел. Пары цифр шестнадцатеричного числа задают интенсивность синего, зеленого и красного цветов соответственно. Например, $FF0000 — синий цвет, $00FF00 — зеленый, $000000 — черный, $FFFFFF — белый.
  3. Шестнадцатеричные числа можно перевести в десятичную систему счисления и пользоваться этими значениями.
  4. Для задания цвета можно воспользоваться функцией RGB, три параметра которой задают интенсивность красного, синего и зеленого цветов соответственно. Значения параметров могут изменяться от 0 до 255.

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

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

procedure TForm1.Button1Click(Sender: TObject);
var x0, xn, x, y, h, k :real;
    x_ekr, y_ekr, c_x, c_y, n, i :integer;
 begin
  // количество точек
  n := 10000;
  // концы промежутка
  x0 := StrToFloat(Edit1.Text);
  xn := StrToFloat(Edit2.Text);
  // центр области построения
  c_x := Image1.Width div 2;
  c_y := Image1.Height div 2;
  // масштабный коэффициент
  k := Image1.Width / (xn - x0);
  // шаг
  h := (xn - x0) / n;
  // оси
  Image1.Canvas.MoveTo(0, c_y);
  Image1.Canvas.LineTo(2*c_x, c_y);
  Image1.Canvas.MoveTo(c_x, 0);
  Image1.Canvas.LineTo(c_x, 2*c_y);
  x := x0;
  for i := 1 to n do
  begin
    y := x * sin(x);
    //преобразование координат
    x_ekr := trunc(x * k) + c_x;
    y_ekr := trunc(-y * k) + c_y;
    //построение точки синим цветом
    Image1.Canvas.Pixels[x_ekr, y_ekr] := clBlue;
    //следующая точка
    x := x + h;
  end;
end;

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

Пример 4.6. Изменение начальных значений концов промежутка:

Константа Nil, имеет значение «ничего». Формально — это значение указателя, который не ссылается ни на какой объект.

4.3. Построение диаграмм

Основные принципы построения гистограмм и круговых диаграмм разбирались в 10-м классе (примеры 4.6 и 6.8). Используя аналогичные методы канвы диаграммы можно построить в Delphi.

Пример 4.7. Создать проект, в котором построить гистограмму по данным массива из n элементов (n = 10). Массив описать с константными данными или добавить данные в массив случайным образом.

1. Поместить на форму компоненты: изображение (Image), и два компонента Button.

2. Изменить свойства Caption у компонента Button1 на «Диаграмма с константными данными».

3. Изменить свойства Caption у компонента Button2 на «Диаграмма со случайными данными».

4. Написать обработчик события OnClick для компонента Button1, в котором диаграмма строится с помощью прямоугольников.

4.1. Найти максимальный элемент в массиве — max.
4.2. Рассчитать масштабный коэффициент: .
4.3. В цикле строить n прямоугольников одинаковой ширины. Ширина прямоугольника  .

5. Обработчик для компонента Button2 будет отличаться от обработчика для компонента Button1 только способом получения элементов массива.

5.1.  Массив должен быть описан в разделе
var a: array[1..10] of integer;
5.2. Элементы массива со значениями от 20 до 100 можно получать следующим образом:

randomize;
for i := 1 to n do
   a[i] := random(80) + 20;

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

Обработчик события OnClick для компонента Button1:

procedure
TForm1.Button1Click(Sender: TObject);
const a: array[1..10] of integer =
 (10, 14, 22, 75, 63, 12, 37, 61, 42, 48);
     n = 10;
var max, x, y1, y2, h, i, cr, cg, cb : integer;
    m :real;
begin
  max := a[1];
  for i := 2 to n do
    if a[i] > max then
      max := a[i];
  h:= trunc(Image1.Width/(2*n+1));
  m:= Image1.Height / max;
  x:= h;
  for i := 1 to n do
  begin
    cr := random(256);
    cg := random(256);
    cb := random(256);
    Image1.Canvas.Brush.Color := RGB(cr, cg, cb);
    y1 := Image1.Height;
    y2 := y1 - trunc(a[i] * m);
    Image1.Canvas.Rectangle(x, y1, x+h, y2);
    x := x + 2 * h;
  end;
end;

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

4.4. Анимация

Эффект анимации достигается за счет того, что перед взглядом пользователя происходит быстрая смена изображений. Каждый из кадров анимации остается на экране очень небольшой промежуток времени.

Для замера интервалов времени можно использовать компонент таймер. Он расположен на панели System и представлен в виде . Компонент Timer, помещенный на форму, получает имя TimerN, где N — номер 1, 2, 3… (пример 4.8).

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

Компонент имеет единственный обработчик — OnTimer, в котором описываются действия, происходящие по истечении интервала срабатывания таймера.

Пример 4.10. Создать проект, в котором самолет будет пролетать над городом.

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

  1. Поместить на форму два компонента Image, компоненты Timer и Button.
  2. Загрузить изображение города в компонент Image1.
  3. Написать обработчик события OnCreate для формы, и описать начальное положение самолета, указав координаты верхнего левого угла Image2 за пределами формы. Загрузить в Image2 изображение из файла (файл должен быть размещен в папке ...\Win32\Debug).
  4. Изменить свойства Caption у компонента Button1 на «Полетели!».
  5. Установить значение False у свойства таймера Enabled в инспекторе объектов.
  6. Установить в инспекторе объектов время срабатывания таймера равным 10.
  7. Написать обработчик события OnClick для компонента Button1, в котором запустить таймер.
  8. В инспекторе объектов установить прозрачность для компонента Image2 (Transparent = True).
  9. Написать обработчик события OnTimer, и менять в нем значение свойства Left у компонента Image2. Если самолет вылетел за границу, то вернуть его в начальное положение.
Если при работе приложения возникает мерцание, то необходимо установить значение Ttrue для свойств формы AlphaBlend и DoubleBuffered.

Пример 4.8. Компонент таймер на форме:

Компонент Timer не виден при работе приложения, поэтому место его размещения на форме не имеет значения.

Пример 4.9. Некоторые свойства компонента таймер.

Свойство

Назначение

Enabled

Значение True обозначает, что таймер запущен

Interval

Время в миллисекундах, через которое происходит срабатывание таймера и вызов обработчика OnTimer

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

Обработчик события OnCreate для формы:

procedure
TForm1.FormCreate(Sender: TObject);
begin


Image2.Picture.LoadFromFile ('plane.bmp');

   x := -Image2.Width;

   y := 20;

   Image2.Left := x;

   Image2.Top := y;

end;

Обработчик события OnClick для компонента Button1:

procedure TForm1.Button1Click(Sender: TObject);
begin
   Timer1.Enabled := True;
end;

Обработчик события OnTimer для компонента Timer1:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
   x := x + 1;
   Image2.Left := x;
   if Image2.Left >
Image1.Width + Image2.Width
then
      x := -Image2.Width;
end;

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

Вопросы к параграфу

1. Какой компонент используется для размещения изображений?

2. Какое свойство позволяет загрузить готовое изображение в компонент Image?

3. С помощью какого свойства можно установить прозрачный фон для изображения?

4. Что такое канва?

5. Какой метод канвы позволяет закрасить пиксель?

6. Какой компонент используется для отсчета времени?

Упражнения

 

1. Добавьте в проект из примера 4.4. еще одно животное (например, белку). Для размещения белки нужно добавить еще одну кнопку. Местоположение определить случайным образом в верхушке какого-либо дерева.

2. Добавьте в проект 4.5 перечисленные возможности.

2.1. Оси координат со стрелками и подписями.
2.2. Единичный отрезок на оси X.
2.3. График функции y = 0.3x2 – 4x + 2, в той же системе координат, красным цветом.

3. Измените проект из примера 4.8 так, чтобы строилась линейчатая диаграмма (столбики расположены горизонтально).

4*. Измените проект из примера 4.8 так, чтобы значения в массив можно было вводить. Для этого числа необходимо записывать в компонент Edit, считывать строку из чисел и пробелов, выделять цифры и преобразовывать их в числовые значения.

5. Изменить проект из примера 4.10. Заменить самолет на вертолет и добавить кнопку «Стоп», при нажатии на которую вертолет остановится. *После остановки вертолета должен появиться парашют с грузом, который опустится вниз.

6*. Создайте анимацию движения Луны вокруг Земли. Для расчета координат верхнего левого угла Image2, содержащего Луну, можно воспользоваться параметрическим уравнением окружности: x = Rsin(t), y = Rcos(t), где R — радиус, t — параметр, изменяющий свое значение от 0 до 2π.