Canvas.TextOut(X, Y, Текст)




где:

ü X, Y — координаты точки графической поверхности, от которой выполняется выведение текста.

ü Текст — переменная или константа символьного типа, значение которой определяет текст, который выводится методом.

Шрифт, который используется для выведения текста, определяется значением свойства Font соответствующего объекта Сanvas.

В табл.4.2 заданы свойства объекта TFont.

 

Таблица 4.2 Свойства объекта TFont

Name Задается название шрифта, например, Arial.
Size Размер шрифта в пунктах (points). Пункт— это единица измерения размера шрифта, используемая в полиграфии. Один пункт равен 1/72 дюйма.
Style Стиль изображения символов: нормальным, полужирным (fsBold), курсивным (fsltalic), подчеркнутым (fsUnderline), перечеркнутым (fsStrikeOut). Свойство Style позволяет комбинировать необходимые стили. Например, оператор программы, который устанавливает стиль «полужирный курсив», выглядит так: Canvas. Font. Style: = [fsBold, fs Italic];
Color Задание цвета шрифта, например, Canvas. Font.Color:=RGB(255,0,0) – буквы красного цвета.

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

procedure TForm1.N7Click(Sender: TObject);

begin canvas. font.name:='Arial';

canvas. font.size:=12;

canvas. font.style:=[fsBold];

canvas. font.color:=rgb(255,0,0);

canvas.TextOut(100,100,'Вывод текста на экран');

end;

Текст выводится красным цветом, размером 12, жирным и стилем Arial.

Для очистки экрана от изображений используется команда Refresh.

Основные положения темы:

 

ü Для создания графических изображений в среде Delphi можно использовать свойство Canvas. ü Методы Canvas позволяют варьировать при изображении цветом, толщиной и стилем карандаша (пера); выбирать заливку объектов разного цвета и вида штриховки.ü При создании изображений необходимо учитывать особенности системы координат. Центр координат располагается в левом верхнем углу экрана, таким образом ось Х направлена, как обычно, слева направо, а ось У сверху вниз.ü При задании координат объектов используются только целые положительные числа.ü Оператор Refresh используется для очистки экрана.

 

 

ЧАСТЬ 2

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

 

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

На рисунке показана форма с объектами, необходимыми для построения графика. Компонент MainMenu использован для организации меню, состоящего из трех пунктов: «Расчет данных» для определения координат точек графика; «Построение графика» как основная часть программы и пункта «Выход» для завершения работы с программой.

Для графика использован компонент Image панели Additional. Он используется как полотно для рисования с помощью метода Canvas, для загрузки графических файлов, если они вставляются в программу из внешнего источника. Основным свойством является свойство Picture, определяющее какой файл вставляется в приложение.

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

Для ввода начальных, конечных значений Х и шага взяты три компонента Edit (см. рис.4.3).

 

 

Рисунок 4.3 - Форма для построения графика

 

Если бы Вы строили график вручную, на миллиметровой бумаге, то сначала бы посчитали значения в каждой точке, чтобы выбрать масштаб, посмотреть, в каких пределах изменяются данные. Для этой цели в программу введен пункт меню «Расчет данных».

При щелчке по этому пункту меню выполняются следующие действия:

ü Вводятся начальное, конечное значение Х и шаг, определяющие в каком интервале по оси абсцисс строится график. Данные преобразуются в числовые значения. Это организовано с помощью операторов

xn:=strtoint(edit1.Text); xk:=strtoint(edit2.Text);

dx:=strtoint(edit3.Text);

ü Значения У, которые будут откладываться по оси ординат, записываются в массив. Для этого вводится переменная i, определяющая порядковый номер элемента в массиве. При x:=xn номер элемента массива равен единице, каждому следующему х соответствует очередной элемент массива У.

ü С помощью оператора while x<=xk do организован цикл, позволяющий перебрать все значения Х с заданным шагом. Т.к. в цикле выполняются четыре оператора, после оператора do введена операторная скобка begin.

ü В теле цикла происходит расчет значений массива У, вывод их на экран, а также изменение порядкового номера элемента массива (i:=i+1;) и изменение значения х на введенный шаг (x:=x+dx;).

ü После завершения цикла определяется количество точек графика по формуле n:=i—1;

Текст программы процедуры, компилируемый при выборе пункта меню «Расчет данных» (N1) приводится ниже.

Нами строится график функции

 

procedure TForm1.N1Click(Sender: TObject);

var i:integer; xx:string;

begin

xn:=strtoint(edit1.Text); xk:=strtoint(edit2.Text);

dx:=strtoint(edit3.Text); {Ввод исходных значений для задания интервала Х}

x:=xn; i:=1;

while x<=xk do

begin

y[i]:= 3.2*sqr(x/2)-9*(x/8) +20*sin(x)-50; {Расчет значений массива У}

str(y[i]:1:1,xx);

memo1.lines.add('x ='+ inttostr(x) + ' y ='+xx); {Вывод элементов массива на экран}

i:=i+1;

x:=x+dx;

end;

n:=i—1; {Расчет количества точек на графике}

end;

На рис. 4.4 показаны результаты расчетов точек для последующего построения графика.

«Построение графика». При щелчке по этому пункту меню выполняется ряд действий. Рассмотрим их поэтапно.

Изображение графика будет создаваться на компоненте Image с помощью метода Canvas. Это приведет к тому, что при заказывании любых опций, например, цвета карандаша, придется набирать image1.Canvas. pen.Color:=rgb(0,0,0). Чтобы избежать столь повторяющихся записей введем новый оператор With. Это оператор присоединения, используемый для сокращения при обращении к полям записей.

Оператор With имеет формат

With объект do begin операторы end;

 

Рисунок 4.4 - Результаты расчета точек

 

В операторах, следующих за словом do, можно не указывать название объекта, это название будет автоматически присоединяться, причем только к тем операторам, к которым это присоединение необходимо.

Для построения осей следует определить центр системы координат.

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

Анализируем имеющиеся данные, у нас могут быть и отрицательные, и положительные значения как по оси Х, так и по оси У, в этом случае логично расположить центр декартовой системы координат в центре компонета Image. Определим координаты его центра. Для этого производим расчеты. xc:=image1.width div 2;yc:=image1.height div 2. Напомним, что операция div является целочисленным делением, следовательно, если ширина компонента Image равнялась, допустим, 301 пикселю, а высота 400, то центр будет располагаться в точке (150, 200) от левого края Image. Это означает, что центр координат будет располагаться в центре компонента Image. В центре координат х=0 и у=0, но в пикселях это будет расстояние, равное половине ширины компонента по ширине и по высоте соответственно.

Операторы pen.Width:=5; и pen.Color:=rgb(0,0,0); задают изображение координатных осей черного цвета толщиной в пять пикселей.

Для изображения осей использованы операторы

 

moveto(0,image1.height div 2);

lineto(image1.width, image1.height div 2);

moveto(image1.width div 2,0);

lineto(image1.width div 2,image1.height);

 

Сначала карандаш с помощью moveto(0,image1.height div 2) ставится в соответствующую точку экрана, а затем с помощью оператора lineto(image1.width, image1.height div 2) протягивается по всей ширине Image. Аналогично ставим карандаш в верхнюю точку(mage1.width div 2,0) и протягиваем по всей высоте. На приводимом ниже рисунке(рис. показаны четыре координаты, определяющие начальные и конечные точки осей.

 

 


 

Рисунок 4.5 –Построение координатных осей

 

Для изображения масштабной сетки меняется толщина карандаша и стиль. Нами задан карандаш толщиной в один пиксель, черного цвета и пунктирного стиля.

 

pen.Width:=1;pen.Color:=rgb(0,0,0); pen.Style:=psDot;

Определим, с какой частотой должна выводиться на экран координатная сетка. Допустим, слева и справа от оси ординат строится одинаковое количество вертикальных линий. Тогда их количество определяют оператором m:=xc div 5;

 

Цикл

for i:=0 to 8 do begin

moveto(xc+i*m, 0);

lineto(xc+m*i, height);

moveto(xc—i*m, 0);

lineto(xc—m*i,height);

moveto(0,yc—m*i);

lineto(2*xc, yc—m*i);

moveto(0,yc+m*i);

lineto(2*xc, yc+m*i);

end;

создает изображение масштабной сетки. Результат показан на рисунке 4.6.

 

Рисунок 4.6 – Построение координатной сетки

 

В левой части экрана в компоненте Memo указаны значения Х и У, на основании которых будет строится график, в правой – построенная ось координат и масштабная сетка.

Идея построения непосредственно графика состоит в следующем. График строят с помощью набора линий. Сначала карандаш устанавливается в первую точку с помощью оператора moveto, а затем в цикле происходит добавление по одной линии, соединяющей соседние точки графика. Если был задан небольшой шаг, то изображение графика будет выглядеть как построенное по точкам, если шаг задан большим, то получится кусочная кривая. Предварительно задается цвет графика и толщина его линии.

Необходимым при построении графика является определение масштаба. Представьте себе, что строится график синуса. Как известно, значения у варьируются в пределах от -1 до 1. Если оставить построение графика без масштаба, то мы не сможем заметить график, т.к не сможем увидеть один пиксель то выше оси, то ниже ее.

Следовательно, при необходимости, следует подбирать масштаб для построения графика. Нами определялся масштаб для оси Х с помощью оператора: mx:=trunc(2*xc/(xk—xn));

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

Таким образом, координата точки графика определяется следующим образом

(x*mx+xc, yc- trunc(y[i])) – к центру координат прибавляют значение х, умноженное на величину масштаба. Аналогично с координатой по оси У, за исключением того, что значение вычитается. Это связано с тем, что номера пикселей увеличиваются сверху вниз, а не наоборот. Нулевое значение находится в верхнем левом углу экрана, а самое большое в его нижнем правом углу.

Ниже приводится текст программы и результаты ее выполнения.

x:=xn; i:=1;

pen.color:=rgb(0,0,255); pen.width:=8;

mx:=trunc(2*xc/(xk—xn));

moveto(x*mx+xc,yc- trunc(y[i]));

while x<=xk do begin

px:= x*mx +xc;

py:=yc—trunc(y[i]);

lineto (px,py);

x:=x+dx; i:=i+1;

end;

 

И последнее. Следует ввести подписи осей и название графика. Используем метод Textout. Нами задана высота букв и их цвет. С учетом масштаба откладывались надписи на масштабной сетке.

font.Size:=10; font.color:=rgb(0,0,0);

textout(xc+5,10, 'Y');

textout(2*xc—25,yc—20, 'X');

textout(xc—15,yc—20, '0');

textout(xc+50,20,'График функции’);

for i:=1 to 3 do

textout(xc—24,yc—m*i, inttostr(50*i));

for i:=1 to 3 do

textout(xc—24,yc+m*i, inttostr(—50*i));

for i:=1 to 4 do

textout(xc+m*i,yc+14, inttostr(3*i));

for i:=1 to 4 do

textout(xc—m*i,yc+14, inttostr(3*i));

 

Так как массив У и значения, определяющие интервал х, использовались в двух процедурах (расчет данных и построение графика), то они описывались в разделе

 

public y:array[1..20] of real; x,xn,dx,xk,n:integer;

Но можно и в разделе implementation/

Ниже приводится полный листинг программы.

 

public y:array[1..20] of real; x,xn,dx,xk,n:integer;

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.N1Click(Sender: TObject); { Расчет данных }

var i:integer; xx:string;

begin

xn:=strtoint(edit1.Text); xk:=strtoint(edit2.Text);

dx:=strtoint(edit3.Text);

x:=xn; i:=1;

while x<=xk do

begin

y[i]:= 3.2*sqr(x/2)-9*(x/8) +20*sin(x)-50;

str(y[i]:1:1,xx);

memo1.lines.add('x ='+ inttostr(x) + ' y ='+xx);

i:=i+1;

x:=x+dx;

end;

n:=i—1;

end;

procedure TForm1.N2Click(Sender: TObject); { Построение графика }

var xc,yc,i,m,px,py,mx:integer;

begin

with image1.Canvas do

begin

xc:=image1.width div 2;

yc:=image1.height div 2;

pen.Width:=5;pen.Color:=rgb(0,0,0);

moveto(0,image1.height div 2);

lineto(image1.width, image1.height div 2);

moveto(image1.width div 2,0);

lineto(image1.width div 2,image1.height);

pen.Width:=1;pen.Color:=rgb(0,0,0); pen.Style:=psDot;

m:=xc div 5;

for i:=0 to 8 do begin

moveto(xc+i*m, 0);lineto(xc+m*i, height);

moveto(xc—i*m, 0);lineto(xc—m*i,height);

moveto(0,yc—m*i);

lineto(2*xc, yc—m*i);

moveto(0,yc+m*i);

lineto(2*xc, yc+m*i);

end;

x:=xn; i:=1;

pen.color:=rgb(0,0,255); pen.width:=8;

mx:=trunc(2*xc/(xk—xn));

moveto((x)*mx+xc,yc— trunc(y[i]));

while x<=xk do

begin

px:= x*mx +xc;

py:=yc—trunc(y[i]);

image1.canvas.lineto (px,py);

x:=x+dx; i:=i+1;

end;

font.Size:=10;

textout(xc+5,10, 'Y');

textout(2*xc—25,yc—20, 'X');

textout(xc—15,yc—20, '0');

textout(xc+50,20, 'График функции’);

for i:=1 to 3 do

textout(xc—24,yc—m*i, inttostr(50*i));

for i:=1 to 3 do

textout(xc—24,yc+m*i, inttostr(—50*i));

for i:=1 to 4 do

textout(xc+m*i,yc+14, inttostr(3*i));

for i:=1 to 4 do

textout(xc—m*i,yc+14, inttostr(3*i));

end;

end;

procedure TForm1.N3Click(Sender: TObject); {Прекращение работы программы}

begin

close;

end;

end.

 

Основные положения темы: ü Для построения графиков в среде Delphi используют свойство Canvas. ü Для сокращения записи при обращении к свойствам Canvas можно использовать оператор With. ü При построения графиков необходимо учитывать особенности системы координат и при необходимости вводить масштабирование.ü При задании координат точек графика используются только целые положительные числа.ü Подрисуночные надписи, поясняющий текст удобно вводить с помощью метода Textout.

 

§4.3 Компонент Image и его свойства

Этот компонент используется для встраивания графических файлов в программу. Откройте панель Additional и щелкните по кнопке, на экран будет помещен компонент Image. Свойство, определяющее какой файл должен быть загружен, называется Picture. На рис.4.7 показано окно выбора графического файла. Сначала щелкают по кнопке с изображением многоточия в строке Picture, а затем в открывшемся окне редактора с помощью кнопки Load выбирают файл.

 

 

 

Рисунок 4.7 – Загрузка файла в компонент Image

 

Размерами рисунка управляют два свойства Stretch и AutoSize. Если свойство AutoSize=true, то размер Image автоматически подбирается под размер файла; в противном случае размер компонента может быть недостаточен для представления всего рисунка или наоборот, окажется слишком большим. Свойство Stretch масштабирует рисунок под размер компонента.

Свойство Center =true располагает рисунок по центру компонента.

Свойство Transparent (прозрачность) позволяет сделать рисунок прозрачным, что можно использовать при наложении одного файла на другой. На рис.4.8 показан различный вид наложенных файлов в зависимости от значения этого свойства.

 

 

Рисунок 4.8 – Использование свойства Transparent

а- Transparent =true; б- Transparent =false

 

Используя компонент Image можно сделать просмотрщик рисунков. Для этого откройте страницу Win3.1 и добавьте на форму компонент FilelistBox. Установить его свойство Mask =*.jpg. Это позволит просматривать файлы с соответствующим расширением. Для элемента Image задайте свойство Stretch =True. Введите оператор

 

Image1.picture.loadfromfile(Filelistbox1.filename);

 

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

 

procedure TForm1.FormCreate(Sender: TObject);

begin

k:=0; Filelistbox1.directory:='H:\Картинки';

end;

 

В нашем случае предполагается открывать диск H: и в нем папку Картинки.

На рис.4.9 результат работы процедуры.

 

 

Рисунок 4.9 – Просмотр рисунков

Основные положения темы: ü Компонент Image используется для встраивания графических файлов в программу.ü Основным свойством является свойство Picture, определяющее какой файл должен быть загружен.ü Масштабированием файлов управляют два свойства Stretch и AutoSize. ü Свойство Transparent позволяет делать рисунки прозрачными и накладывать их друг на друга.

 

 

§4.4 Компонент Chart2, построение графиков

Для быстрого построения диаграмм используется компонент Chart, расположенный на панели Additional. Рассмотрим использование этого компонента на примере.

Допустим, требуется построить два графика функций параболы у=3•x2 - 6•x-100 или гиперболы y=1.3• x3 -6•x2 +2•x-5.

На форму переносятся два компонента RadioButton, которые будут организовывать выбор вида графика, компонент Chart, на котором будет строиться график.

На рис.4.10 показана форма с нанесенными на нее объектами.

 

 
 

 


Рисунок 4.10 –Форма для построения графиков функций

 

На Форме могут быть построены одновременно два графика или один из выбранных. Для выбора типа диаграммы следует щелкнуть правой кнопкой мыши внутри компонента Chart. Выбрать подменю «Edit Chart…». Для добавления серии (графика или диаграммы) выбирается пункт «Add»(рис. 4.10, окно 1), кнопка «Delete » используется для удаления ненужных серий, «Title » для ввода заголовка, «Clone» для создания копии графика и кнопка «Change » для изменения внешнего вида диаграммы (рис. 4.10, окно 2).

Программно можно задать цвет, размер шрифта, стиль оформления и текст заголовка, а также ввести уравнение для построения графика, как это сделано в приводимой процедуре.

procedure TForm1.RadioButton1Click(Sender: TObject);

var x:integer; color:tcolor;

begin

if RadioButton1.Checked=true then {Если выбрана парабола}

begin

color:=rgb(128,128,128);

Chart1.Title. font.size:=12; {Размер шрифта заголовка}

Chart1.Title. font.color:=rgb(255,255,255); {Цвет шрифта заголовка}

Chart1.Title. brush.color:=rgb(0,255,0); {Оформление заголовка}

Chart1.Title. brush. style:=bscross; Chart1.Title.Text.add('Парабола'); {Текст заголовка}

for x:= -10 to 10 do {Цикл для расчета значений у}

Series1.AddXY(x, 3*x*x-6*x-100, clBlack);

end; end;

Рассмотрим подробнее использование функции AddXY (x, y, цвет). В качестве первого параметра задается переменная. Которая будет откладываться по оси Х, в качестве второго – зависимость, описывающая У, затем указывается цвет графика.

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

 

for x:= -10 to 10 do

Series2.AddXY(x, 1.3*sqr(x)*x -6*x*x+2*x-5, clblue);

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

 

Рисунок 4.11 – Графики функций

На рис.4.10 показано окно редактирования диаграммы (Editing Chart). Нами была рассмотрена первая страница «Series». Страница «General » используется для задания внешнего вида прямоугольной области, в которой строится график: наличие полос прокрутки, размеров и полей по краям графика.

Страница «Axis » задает расположение осей, надписи на них, шаг откладываемых делений (рис.4.12, а), минимальное и максимальное значения.

Рисунок 4.12 – Модификация диаграмм

а) изменение осей; б) изменение параметров отдельных серий

 

Страница «Titles » используется для задания заголовка и вариантов его оформления. Страница «Legend » позволяет задавать легенду графика, «Panel» - изменять внешнее оформление прямоугольника, в котором строится график, последующие три страницы также определяют внешнее оформление графика.

Кроме вкладки «Chart », которая задает стиль диаграммы в целом, при редактировании можно изменять внешний вид каждой серии отдельно (вкладка «Series»), рис.4.12б.

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

После ввода данных в таблицу, задается построение серий с помощью процедуры.

 

procedure TForm1.N3Click(Sender: TObject);

var i,n:integer;

begin

n:=9; {Количество данных в каждой серии}

i:=1;

for i:= 1 to n do

begin {Задание значений по осям Х и У}

form1.Series1.AddXY(strtofloat(StringGrid1.Cells[i,0]),strtofloat(StringGrid1.Cells[i,1]));

form1.Series2.AddXY(strtofloat(StringGrid1.Cells[i,0]),strtofloat(StringGrid1.Cells[i,2]));

form1.Series3.AddXY(strtofloat(StringGrid1.Cells[i,0]),strtofloat(StringGrid1.Cells[i,3]));

end;

end;

 

Как видно из приводимого текста программы, данные для оси Х считываются из нулевой строки таблицы, это года от 1994 по 2002. Первая серия строится на основании данных первой строки таблицы (ВВП), вторая соответственно из второй (Доходы) и аналогично третья серия.

 

 

Рисунок 4.13 – Построение серий на основании информации таблиц

 

Основные положения темы: ü Компонент Chart используется для быстрого и удобного отображения информации в виде графиков и диаграмм. ü Основным методом добавления данных в диаграмму является метод AddXY.ü Подменю EditChart позволяет модифицировать внешний вид диаграмм, удалять их, менять вид графического представления информации.

 

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-04-26 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: