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

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

Пример 4.3. 

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

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

  1. Установить размеры формы Height = 450, Width = 670.

  2. Загрузить фоновое изображение для формы. Задать для свойства формы BackgroundImageLayout значение Stretch.

  3. Поместить на форму компонент изображение и кнопку.

  4. Для компонента PictureBox установить значение для свойства Visible = False (изображение невидимо при запуске приложения). Размеры Height = 120, Width = 200. Свойство SizeMode = StretchImage.

  5. Загрузить изображение в компонент PictureBox. Изображение может быть формата PNG, или GIF с прозрачным фоном, или формата BMP с фоном однородного цвета. Свойство BackColor = Transparent.

  6. Написать обработчик события OnClick для компонента Button1. Если при запуске приложения изображение мерцает, то устранить мерцание можно с помощью включения двойной буферизации: 

DoubleBuffered := true;

Эта команда должна быть прописана в обработчике события Load для формы.

procedure Form1.button1_Click (sender: Object; e: EventArgs);

begin

PictureBox2.Top := 220;

var rnd: Random := new Random();

PictureBox2.Left := rnd.

Next(300);

PictureBox2.Visible := True;

end;

До нажатия на кнопку:
После нажатия на кнопку:
Рисунки для проекта можно скачать отсюда:Медведь, Лес, Шар, БелкаРисунки

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

Пример 4.5

Создать  проект  и  построить график функции y=x*sin(x) на промежутке, заданном пользователем.

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

  2. Поместить на форму компоненты: PictureBox, два компонента Label, два компонента TextBox и компонент Button.

  3. Изменить свойства Text у компонентов Label1, Label2 на x0 и xn соответственно.

  4. Изменить свойства Text у компонентов Edit1 и Edit2 на –20 и 20 соответственно.

  5. Изменить свойства Text у компонента Button1 на «Построить график».

  6. Написать обработчик события Click для компонента Button1 и строить в нем график функции по точкам.

    1. Нарисовать оси координат в виде двух перпендикулярных линий, пересекающихся в центре компонента PictureBox.

    2. Чтобы получить видимость сплошной линии, количество точек, которые образуют график функции, должно быть не менее 10 000 (n = 10 000).

    3. Шаг изменения значения x определяется как h=(xn-x0)/n

    4. При построении нужно учитывать масштаб: ширина компонента PictureBox должна соответствовать длине заданного промежутка. Тогда масштабный коэффициент можно рассчитать по формуле k=PictureBox1.Width/(xn-x0)

    5. Поскольку расположение осей координат на экране не совпадает с расположением осей, принятым в математике, то нужно преобразовать координаты: точке (0; 0) должна соответствовать точка в центре компонента PictureBox. Для этого полученное значение x нужно увеличить на величину cx=PictureBox1.Width div 2, а значение у на cy=PictureBox1.Height div 2. Так как ось Y направлена вниз, а не вверх, то у значения Y нужно еще поменять знак на противоположный. На канве будет закрашиваться точка с координатами (xekr= x*k+cx, yekr=–y*k+cy).

    6. Необходимo учитывать, что при вычислении значения x и y будут вещественными, а значения графических координат могут быть только целыми. Поэтому перед прорисовкой точки нужно преобразовать вещественные числа в целые с помощью функции trunc.

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

procedure Form1.button1_Click (sender: Object; e: EventArgs);

var x, y, h, k, x0, xn :real;

x1, y1, n, c_x, c_y : integer;

gr: Graphics;

bm: Bitmap;

p_c: Pen;

begin

//подготовка графической области

//для рисования по пикселям

bm:=new Bitmap (PictureBox1.Width, Picturebox1.Height);

pictureBox1.Image:=(Image)(bm);

gr:=Graphics.FromImage(pictureBox1.Image);

//закраска графической области

//белым цветом

gr.Clear(Color.White);

//количество точек

n:=10000;

//концы промежутка

x0:=StrToFloat(TextBox1.Text);

xn:=StrToFloat(TextBox2.Text);

// центр области построения

c_x:=PictureBox1.Width div 2;

c_y:=PictureBox1.Height div 2;

// масштабный коэффициент

k:=PictureBox1.Width/(xn-x0);

// шаг

h:=(xn-x0)/n;

x:=x0;

//оси

p_c:=new Pen(Color.Black,1);

gr.DrawLine(p_c,0,c_y,2*c_x,c_y);

gr.DrawLine(p_c,c_x,0,c_x,2*c_y);

for var i := 1 to n do

begin

y:=x*sin(x);

x1:=trunc(x*k)+c_x;

y1:= trunc(-y*k)+c_y;

//проверка попадания точки

//в графическую область

if (y1 >= 0) and (y1 < 2*c_y) then

bm.SetPixel(x1,y1,Color.Blue);

x:=x+h;

end;

end;

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

Пример 4.6

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

  1. Поместить на форму компоненты: PictureBox и два компонента Button.

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

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

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

    1. Найти максимальный элемент в массиве max.

    2. Рассчитать масштабный коэффициент: m=PictureBox1.Heigth/max.

    3. В цикле строить n прямоугольников одинаковой ширины. Ширина прямоугольника h= PictureBox1.Width/(2n+1)

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

    1. Массив должен быть описан в разделе var: a: array[1..10] of integer;

    2. Элементы массива со значениями от 20 до 100 можно получать следующим образом:

rnd := new Random();

for i := 1 to n do

a[i] := rnd.next(80)+20;

procedure Form1.button1_Click (sender: Object; e: EventArgs);

  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;

    gr : Graphics;

    rnd : Random;

    sb : SolidBrush;

begin

  max := a[1];

  for i := 2 to n do

    if a[i] > max then

      max := a[i];

  h:=trunc(PictureBox1.Width/(2*n+1));

  m := PictureBox1.Height / max;

  x := h;

//подготовка графической области

//для рисования примитивов

gr:=PictureBox1.CreateGraphics;

  gr.Clear(Color.White);   

  rnd := new Random();  

  for i := 1 to n do

  begin    

cr := rnd.next(256);

cg := rnd.next(256);

cb := rnd.next(256);

sb := new SolidBrush(Color.FromArgb(cr,cg,cb));  

y1 := PictureBox1.Height -1;

y2 := y1 - trunc(a[i] * m)-1;

gr.FillRectangle(sb,x,y2,h,y1);

x := x + 2 * h;

  end;

end;

Анимация

Пример 4.8

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

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

  1. Поместить на форму компоненты PictureBox и Button, добавить компонент Timer.

  2. Загрузить изображение города в компонент как фон формы (свойство формы BackgroundImage).

  3. Установить прозрачный цвет фона для компонента PictureBox1 (значение Transparent у свойства BackColоr). Установить режим изменения размера - AutoSize (свойство SizeMode).

  4. Написать обработчик события Load для формы и описать начальное положение самолета, указав координаты верхнего левого угла PictureBox1 за пределами формы. Загрузить в PictureBox1 изображение из файла с рисунком самолета.

  5. Изменить свойства Text у компонента Button1 на «Полетели!».

  6. Установить значение False у свойства таймера Enabled в инспекторе объектов.

  7. Установить в инспекторе объектов время срабатывания таймера, равным 10.

  8. Написать обработчик события Click для компонента Button1, запустить таймер.

  9. В инспекторе объектов установить прозрачность для компонента PictureBox1.

  10. Написать обработчик события Tick и менять в нем значение свойства Left у компонента PictureBox1. Если самолет вылетел за границу, то вернуть его в начальное положение.

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

procedure Form1.Form1_Load (sender: Object; e: EventArgs);

begin

  PictureBox1.Load ('plane.png');

  x := -PictureBox1.Width;

  y := 20;

  PictureBox1.Left := x;

  PictureBox1.Top := y;

end;

procedure Form1.button1_Click (sender: Object; e: EventArgs);

begin

  Timer1.Enabled := True;

end;

procedure Form1.timer1_Tick (sender: Object; e: EventArgs);

begin

  x := x + 1;

  PictureBox1.Left := x;

  if PictureBox1.Left > Width +

        + PictureBox1.Width then

    x := -PictureBox1.Width;

end;

Рисунки для проекта можно скачать отсюда:самолет, город, парашютист

Упражнения

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

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

    1. Оси координат со стрелками и подписями.

    2. Единичный отрезок на оси X.

    3. График функции y = 0,3x2  – 4x + 2 в той же системе координат красным цветом.

4. Постройте в одной системе координат графики следующих функций. Каждую кривую рисовать своим цветом. Для ввода значений параметров a, b и c добавьте на форму компоненты Text.

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

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

5. Добавьте в проект из примера 4.8 кнопку «Стоп», при нажатии на которую самолет остановится.

*После остановки самолета должен появиться парашютист и опуститься вниз.

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