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

Лабораторная работа 16

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

Теория

Довольно часто появляется необходимость разместить в приложении графики, чертежи, рисунки. Для этой цели используются компоненты, имеющие свойство Canvas (канва, холст): Image, PaintBox, Bitmap и другие. Канва представляет собой область компонента, на которой можно рисовать или отображать готовые изображения. Каждая точка канвы имеет свои координаты x и y, которые измеряются в пикселях, отсчет ведется от левого верхнего угла канвы.

Рисование по пикселям осуществляется с помощью оператора:

Image1->Canvas->Pixels[x][y]=clBlack;

где x и y – координаты пикселя, задающиеся переменными типа int, которые до этого в программе должны быть описаны и инициализированы, или целыми числами; clBlack – описание цвета, которым будет рисоваться точка, в данном случае цвет - черный.

Пример

Для того чтобы нарисовать точку синего цвета с координатами (20,30) можно использовать следующие операторы:

int x = 20, y = 30;

Image1->Canvas->Pixels[x][y]=clBlue;

или:

Image1->Canvas->Pixels[20][30]=clBlue;

Для того чтобы нарисовать график функции f(x), которая имеет диапазон изменения значений от ymin до ymax, а ее аргумент изменяется от xmin до xmax, можно использовать следующий код:

float x,y, px, py;

for (int px=0; px<=Image1->Width; px++)

{

x = xmin+px*(xmax-xmin)/Image1->Width;

y=f(x);

py=Image1->Height-(y-ymin)*Image1->Height/(ymax-ymin);

Image1->Canvas->Pixels[px][py]=clBlue;

}

Здесь ввелись переменные x и y, соответствующие аргументу и значению функции и переменные px и py, являющиеся координатами пикселов, соответствующих x и y. Цикл проходит по всем горизонтальным координатам px компонента Image. В цикле px пересчитывается в соответствующее значение x, затем вызывается функция и вычисляется y, после этого у пересчитывается в вертикальную координату пикселя py.

Например, возьмем функцию у = sin(x), пусть нам нужно нарисовать график функции на промежутке от 0 до 4π, тогда xmin = 0, xmax = 4 π, ymin = -1, ymax = 1.

Рисовать можно не только попиксельно, но и с помощью пера. Перо (Pen) – свойство канвы. Перо в свою очередь тоже имеет ряд свойств – цвет (Color), ширину (Width), стиль (Style). Перо проводит линию, соединяющую соседние точки. Для рисования пером используется оператор:

Image2->Canvas->LineTo(x,y);

Перо можно переместить в точку с координатами (x,y) без прорисовывания линии с помощью оператора:

Image2->Canvas->MoveTo(x,y);

Цвет пера можно задать следующим образом (в нашем случае он будет красным):

Image2->Canvas->Pen->Color = clRed;

Чтобы нарисовать график функции пером зеленого цвета, необходимо использовать следующий код:

Image2->Canvas->MoveTo(xbegin,ybegin);

Image2->Canvas->Pen->Color = clGreen;

float x,y, px, py;

for (int px=0; px<=Image2->Width; px++)

{

x = xmin+px*(xmax-xmin)/Image2->Width;

y=f(x);

py=Image2->Height-(y-ymin)*Image2->Height/(ymax-ymin);

Image2->Canvas->LineTo(px,py);

}

где xbegin, ybegin – координаты пикселя, с которого начинается рисование графика.

Задание

1. Поместите в форму компонент Image, он будет иметь Name = Image1. Поместите в форму кнопку. В обработчике события для кнопки onClick введите код, позволяющий нарисовать график функции попиксельно. В результате ваш исходный файл должен выглядеть так:

#include <vcl.h>

#pragma hdrstop

# define Pi 3.14

#include "Unit1.h"

#include <math.h>

#pragma package(smart_init)

#pragma resource "*.dfm"

TForm1 *Form1;

__fastcall TForm1::TForm1(TComponent* Owner)

: TForm(Owner)

{

}

void __fastcall TForm1::Button1Click(TObject *Sender)

{

float x,y, xy, xmin = 0, xmax = 4*Pi, ymin = -1, ymax = 1;

for (int i=0; i<=Image1->Width; i++)

{

x = xmin+px*(xmax-xmin)/Image1->Width;

y=f(x);

py=Image1->Height-(y-ymin)*Image1->Height/(ymax-ymin);

Image1->Canvas->Pixels[px][py]=clBlue;

}

}

Откомпилируйте и запустите программу, посмотрите, что у вас получилось.

2. Поместите в форму еще один компонент Image, он будет иметь Name = Image2. Добавьте в функцию обработчика события onClick для кнопки код, позволяющий нарисовать график функции с помощью пера. После добавления кода ваш исходный файл должен выглядеть так:

#include <vcl.h>

#pragma hdrstop

# define Pi 3.14

#include "Unit1.h"

#include <math.h>

#pragma package(smart_init)

#pragma resource "*.dfm"

TForm1 *Form1;

__fastcall TForm1::TForm1(TComponent* Owner)

: TForm(Owner)

{

}

void __fastcall TForm1::Button1Click(TObject *Sender)

{

float x,y, xy, xmin = 0, xmax = 4*Pi, ymin = -1, ymax = 1;

for (int i=0; i<=Image1->Width; i++)

{

x = xmin+px*(xmax-xmin)/Image1->Width;

y=sin(x);

py=Image1->Height-(y-ymin)*Image1->Height/(ymax-ymin);

Image1->Canvas->Pixels[px][py]=clBlue;

}

Image2->Canvas->MoveTo(0,Image2->Height/2);

Image2->Canvas->Pen->Color = clGreen;

for (int px=0; px<=Image2->Width; px++)

{

x = xmin+px*(xmax-xmin)/Image2->Width;

y = sin(x);

py = Image2->Height-(y-ymin)*Image2->Height/(ymax-ymin);

Image2->Canvas->LineTo(px,py);

}

}

Откомпилируйте и запустите программу, посмотрите, что у вас получилось.

3. Составьте программу, рисующую график функции для вашего варианта (таблица) попиксельно и пером при трёх различных значениях , выделив их разным цветом.

Варианты

№	Функция

Продолжение табл.

№	Функция

Дата добавления: 2015-08-31