Вывод текста в графическом режиме
Для выведения текста на поверхность графического объекта используется метод TextOut. Оператор вызова метода TextOut в общем виде выглядит следующим образом:
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) и протягиваем по всей высоте. На приводимом ниже рисунке(рис. показаны четыре координаты, определяющие начальные и конечные точки осей.
78888888888888
Рисунок 4.5 –Построение координатных осей
Для изображения масштабной сетки меняется толщина карандаша и стиль. Нами задан карандаш толщиной в один пиксель, черного цвета и пунктирного стиля.
pen.Width:=1;pen.Color:=rgb(0,0,0); pen.Style:=psDot;
Определим, с какой частотой должна выводиться на экран координатная сетка. Допустим, слева и справа от оси ординат строится одинаковое количество вертикальных линий. Тогда их количество определяют оператором m:=xc div 5;
Цикл
f
or
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.