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

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

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

Пример 4.3.

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

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

Установить размеры формы Height = 450, Width = 670.
Загрузить фоновое изображение для формы. Задать для свойства формы BackgroundImageLayout значение Stretch.
Поместить на форму компонент изображение и кнопку.
Для компонента PictureBox установить значение для свойства Visible = False (изображение невидимо при запуске приложения). Размеры Height = 120, Width = 200. Свойство SizeMode = StretchImage.
Загрузить изображение в компонент PictureBox. Изображение может быть формата PNG, или GIF с прозрачным фоном, или формата BMP с фоном однородного цвета. Свойство BackColor = Transparent.
Написать обработчик события 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) на промежутке, заданном пользователем.

Этапы выполнения задания
Поместить на форму компоненты: PictureBox, два компонента Label, два компонента TextBox и компонент Button.
Изменить свойства Text у компонентов Label1, Label2 на x₀ и x_n соответственно.
Изменить свойства Text у компонентов Edit1 и Edit2 на –20 и 20 соответственно.
Изменить свойства Text у компонента Button1 на «Построить график».
Написать обработчик события Click для компонента Button1 и строить в нем график функции по точкам.
1. Нарисовать оси координат в виде двух перпендикулярных линий, пересекающихся в центре компонента PictureBox.
2. Чтобы получить видимость сплошной линии, количество точек, которые образуют график функции, должно быть не менее 10 000 (n = 10 000).
3. Шаг изменения значения x определяется как h=(x_n-x₀)/n
4. При построении нужно учитывать масштаб: ширина компонента PictureBox должна соответствовать длине заданного промежутка. Тогда масштабный коэффициент можно рассчитать по формуле k=PictureBox1.Width/(x_n-x₀)
5. Поскольку расположение осей координат на экране не совпадает с расположением осей, принятым в математике, то нужно преобразовать координаты: точке (0; 0) должна соответствовать точка в центре компонента PictureBox. Для этого полученное значение x нужно увеличить на величину c_x=PictureBox1.Width div 2, а значение у на c_y=PictureBox1.Height div 2. Так как ось Y направлена вниз, а не вверх, то у значения Y нужно еще поменять знак на противоположный. На канве будет закрашиваться точка с координатами (x_ekr= x*k+c_x, y_ekr=–y*k+c_y).
6. Необходимo учитывать, что при вычислении значения x и y будут вещественными, а значения графических координат могут быть только целыми. Поэтому перед прорисовкой точки нужно преобразовать вещественные числа в целые с помощью функции trunc.
7. Некоторые точки графика при построении могут оказаться за пределами графической области, поэтому необходима проверка значения y₁: значение должно быть неотрицательным и меньше высоты графической области.

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;

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

Пример 4.6

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

Поместить на форму компоненты: PictureBox и два компонента Button.
Изменить свойства Text у компонента Button1 на «Диаграмма с константными данными».
Изменить свойства Text у компонента Button2 на «Диаграмма со случайными данными».
Написать обработчик события Click для компонента Button1, в котором диаграмма строится с помощью прямоугольников.
1. Найти максимальный элемент в массиве max.
2. Рассчитать масштабный коэффициент: m=PictureBox1.Heigth/max.
3. В цикле строить n прямоугольников одинаковой ширины. Ширина прямоугольника h= PictureBox1.Width/(2n+1)
Обработчик для компонента 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;

Анимация

Пример 4.8

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

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

Поместить на форму компоненты PictureBox и Button, добавить компонент Timer.
Загрузить изображение города в компонент как фон формы (свойство формы BackgroundImage).
Установить прозрачный цвет фона для компонента PictureBox1 (значение Transparent у свойства BackColоr). Установить режим изменения размера - AutoSize (свойство SizeMode).
Написать обработчик события Load для формы и описать начальное положение самолета, указав координаты верхнего левого угла PictureBox1 за пределами формы. Загрузить в PictureBox1 изображение из файла с рисунком самолета.
Изменить свойства Text у компонента Button1 на «Полетели!».
Установить значение False у свойства таймера Enabled в инспекторе объектов.
Установить в инспекторе объектов время срабатывания таймера, равным 10.
Написать обработчик события Click для компонента Button1, запустить таймер.
В инспекторе объектов установить прозрачность для компонента PictureBox1.
Написать обработчик события 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;

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

Упражнения

Добавьте в проект из примера 4.3. еще одно животное (например, белку). Для размещения белки нужно добавить еще одну кнопку. Местоположение определить случайным образом в верхушке какого-либо дерева.
Добавьте в проект 4.5 перечисленные возможности.
1. Оси координат со стрелками и подписями.
2. Единичный отрезок на оси X.
3. График функции y = 0,3x² – 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π.

Google Sites

Report abuse