- •Лабораторная работа 1
- •Лабораторная работа 2 Переменные и константы. Базовые типы. Арифметические операции
- •Операции
- •Ввод и вывод данных
- •Лабораторная работа 3 Циклический и ветвящийся поток управления
- •Алгоритмы разветвляющейся структуры
- •Операторы выбора
- •Операторы циклов
- •Операторы перехода
- •Задание
- •Лабораторная работа 4 Функции. Вызов функций с формальными параметрами, передаваемыми по значению
- •Задание
- •Лабораторная работа 5 Одномерные массивы
- •Задание
- •Лабораторная работа 6 Многомерные массивы
- •Задание
- •Лабораторная работа 7 Функции для работы с символами
- •Лабораторная работа 8 Строки, литералы. Передача строк в функции
- •Строки и литералы
- •Библиотечные функции для работы со строками
- •Выделение памяти под строки
- •Передача строк в качестве параметров функций
- •Задание
- •Лабораторная работа 9 Указатели и динамические массивы
- •Задание
- •Варианты
- •Лабораторная работа 10 Динамические структуры данных
- •Структуры и указатели
- •Задание
- •Лабораторная работа 11 Объектно-ориентированное программирование. Создание классов и объектов
- •Задание
- •Лабораторная работа 12 Знакомство со средой быстрой разработки приложений. Использование компонент библиотеки vcl
- •Лабораторная работа 13 Вывод в форму результатов работы программы
- •Лабораторная работа 14 Изучение обработчиков событий компонентов библиотеки vcl
- •Лабораторная работа 15 Использование таймера для создания различных эффектов
- •Лабораторная работа 16 Рисование в канве. Построение графиков функций
- •Лабораторная работа 17 Изучение принципа работы текстового редактора
- •Список рекомендуемой литературы
- •Оглавление
Лабораторная работа 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 – координаты пикселя, с которого начинается рисование графика.
Задание
Поместите в форму компонент 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;
}
}
Откомпилируйте и запустите программу, посмотрите, что у вас получилось.
Поместите в форму еще один компонент 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);
}
}
Откомпилируйте и запустите программу, посмотрите, что у вас получилось.
Составьте программу, рисующую график функции для вашего варианта (таблица) попиксельно и пером при трёх различных значениях , выделив их разным цветом.
Варианты
№ |
Функция |
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
Продолжение табл.
№ |
Функция |
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|