Тема 14 ОТОБРАЖЕНИЕ ГРАФИЧЕСКОЙ ИНФОРМАЦИИ ØКак происходит отображение

Тема 14 ОТОБРАЖЕНИЕ ГРАФИЧЕСКОЙ ИНФОРМАЦИИ ØКак происходит отображение на экране ØКакие графические средства представляет Delphi пользователю Øпримеры 2/13/2018 1

Как рисуются картинки Ø Любое изображение на экране дисплея формируется из набора светящихся точек, получивших название пиксели. Ø Процесс отображения осуществляется с помощью специальной микросхемы называемой графическим адаптером. Ø Работа графического адаптера осуществляется под управлением специальной программы - драйвера. Ø Адаптер содержит порты ввода-вывода информации, и память в которой размещается таблица, содержащая информацию о каждом светящемся на экране пикселе (его координате, цвете, яркости). 2/13/2018 2

Координаты пикселей 0 0 px xmax xp py ymax yp 2/13/2018 Поле из пикселей называется canvas Разрешающая способность 800× 600 3

Графические средства предоставляемые Delphi пользователю Ø Рисование картинки в системе Delphi происходит в рамках создаваемого проекта на форме. Ø Наиболее удобно для этого использовать компоненты Image (Addition)или Paintbox (Sistem). Можно рисовать непосредственно на форме. Ø Компоненты Image и Paint. Box представляют собой выделенный на форме прямоугольник с канвой, на которую можно наносить изображения. Размеры прямоугольника в пикселях определяются на этапе проектирования. Ø Основное достоинство Image – это возможность записывать в файл и считывать нарисованную картинку, однако анимацию лучше рисовать на Paint. Box. 2/13/2018 4

px py py Image 2/13/2018 px Paintbox 5

Класс TCanvas Ø предоставляет в ваше распоряжение таблицу пикселей с координатами Ø pxmax: =Image 1. Width; pymax: =Image 1. Height; Ø Вместе с набором графических инструментов • Ø Рисование начинается с очистки фона окна: • Image 1. Picture: =Nil; • или • Image 1. Canvas. Brush. color: =cl. White; (cl. Green) • Image 1. Canvas. Rectangle(0, 0, pxmax, pymax); 2/13/2018 6

Рисование по точкам • Оператор - Установить цвет выбранного пикселя • Image 1. Canvas. Pixels[px, py]: =Cl. Black; • Можно начинать рисовать по точкам: • With Image 1 do begin • dp: =Height div 4; • Px 0: =Width div 2; • Py 0: =Height div 2; • For px: =px 0 -dp to px 0+dp do • canvas. pixels[px, py 0]: =Cl. Red; • For py: =py 0 -dp to py 0+dp do • canvas. pixels[px 0, py]: =Cl. Navy; • End; • вычертится красно-синий крест. Он будет нарисован довольно тонккими линиями, т. к. по толщине укладывается один пиксель. 7 2/13/2018

2/13/2018 8

TPen для вычерчивания сплошных линий TBrush для закраски замкнутых фигур • With Image 1 do begin • • • dp: =Height div 4; Px 0: =Width div 2; Py 0: =Height div 2; • With Canvas do begin • Brush. Color: =Cl. Green; • Ellipse(px 0 -dp, py 0 -dp, px 0+dp, py 0+dp); • Pen. Color: =Cl. Red; • Pen. Width: =3; • Move. To(px 0, py 0 -dp); • Line. To(px 0, py 0+dp); • Pen. Color: =Cl. Navy; • Move. To(px 0 -dp, py 0); • Line. To(px 0+dp, py 0); • End; 2/13/2018 9

2/13/2018 10

Рисование отдельных фигур оформляют в виде процедур • Procedure Krest(px, py, dp: integer; color: TColor; Image: TImage); • Begin • With Image. Canvas do begin • Pen. Width: =3; • Pen. Color: =Color; • Move. To(px, py-dp); • Line. To(px, py+dp); • Pen. Color: =Color; • Move. To(px-dp, py); • Line. To(px+dp, py); • End; • Обращение • Krest(200, 100, Clred, Image 1); 2/13/2018 11

2/13/2018 12

Круг • Procedure Sircl(px, py, R: integer; • Color 1, Color 2: TColor; Image: TImage); • Begin • With Image. Canvas do begin • Brush. Color: =Color 2; • Pen. Color: =Color 1; • Pen. Width: =4; • Ellipse(px-R, py-R, px+R, py+R); • End; • Обращение • Sircl(250, 80, Clred, Cl. Green, Image 1); 2/13/2018 13

2/13/2018 14

• • • Рисование фигуры Procedure Show. Krst(x, y, R: integer; C: TColor); Begin Krest(x, y, R, C); End; • • • Стирание фигуры Procedure Hide. Krst(x, y, R: integer); Begin Krest(x, y, R, Cl. White); //цвет фона End. • Изменяя x, y, R легко получить анимацию 2/13/2018 15

Анимацию проще делать на TPaint. Box • Procedure Kvadrat(px, py, R: word; • color: TColor); • Begin • with Form 1. Paint. Box 1. Canvas do begin • Pen. Color: =Color; • Brush. Color: =Color; • Rectangle(px-R, py-R, px+R, py+R); • end; • End; • Procedure Show. Kv(x, y, R: word; color: TColor); • Begin • Kvadrat(x, y, R, color); • End; • Procedure Hide. Kv(x, y, R: word); • Begin • Kvadrat(x, y, R, Cl. White); • End; 2/13/2018 16

Движение квадратика по диагонали • • • Procedure Moov. Kv(Ro: word); var x, y: word; Begin x: =Ro; repeat y: =x; Show. Kv(x, y, Ro, Clred); sleep(100); //замедление Hide. Kv(x, y, Ro); x: =x+2; until x> Form 1. Paint. Box 1. Width-Ro; end; 2/13/2018 17

Подписи на рисунках делают с помощью свойства Font и метода Textout • Canvas. Font. Color: =Cl. Green; • Canvas. Font. Size: =12; • Canvas. Textout(px, py: integer; • const Text: string); • например • Canvas. Textout(200, 150, ’x=5’); 2/13/2018 18

Вставить рисунок в нужное место отчета • Помещение картинки в отчет удобно реализовать через буфер Clipboard. Для этого следует воспользоваться методом Assing • • Uses Clipbrd; //подключить библиотеку . . . . Clipboard. Assing(Image 1. Picture); сброс в буфер 2/13/2018 19

Задача 1 • Составить и оформить в виде отдельного модуля подпрограмму вывода окружности красного цвета радиуса R и отображающую точку (x, y). • Центр окружности расположить в центре области Image • Координаты левого нижнего угла прямоугольника Image установить равными (x 0, y 0) (масштаб h подобрать таким, чтобы окружность занимала примерно 2/3 от области Image). • Формальные параметры: x 0, y 0, R, x, y, h: real; • M : TImage 2/13/2018 20

X 0=0 Y 0=0 2/13/2018 21

• • • • • Procedure Sircl(x 0, y 0, R, x, y, h: extended; Image: TImage); Var px, py, p. R: word; xc, yc: extended; Begin Pxc: =Image. Width div 2; Pyc: =Image. Height div 2; xc: =x 0+h*Pxc; yc: =y 0+h*Pyc; px: =round((x-x 0)/h); py: =2*Pyc-round((y-y 0)/h); p. R: =round(R/h); With Image. Canvas do begin Brush. Color: =Cl. Green; Pen. Color: =Cl. Red; Pen. Width: =4; Ellipse(Pxc-p. R, Pyc-p. R, Pxc+p. R, Pyc+p. R); Brush. Color: =Cl. Red; Ellipse(px-4, py-4, px+4, py+4); //точка End; 2/13/2018 22

Задача 2 • Составить и оформить в виде отдельного модуля подпрограмму вывода графика функции f(x) на интервале [a, b] с шагом h=(b-a)/n с прорисовкой осей. • 2/13/2018 Формальные параметры: a, b, n, f(x), M : TImage 23

po ymax pxmin pymin y po po ymin 2/13/2018 xmin pymax x xmax po 24

Вывод графика y=f(x) • hx: =(xmax-xmin)/(pxmax-pxmin); • hy: =(ymax-ymin)/(pymax-pymin); • {Вывод графика} • With Image 1. Canvas do begin • Rectangle(pxmin, pymin, pxmax, pymax); • h: =(xmax-xmin)/(m-1); • x: =xmin; • y: =f(x); // Первая точка Move. To(Round(x/hx), Round((ymax-y)/hy)); • for i: =1 to m do • begin • x: =x+h; • y: =f(x); • Line. To(pxmin+Round(x/hx), • Round(pymin+(ymax-y)/hy)); • end; 2/13/2018 25

• Procedure Graf(a, b, ymi, yma: extended; n, po: word; f: fun; m: TImage); • var h, x, y, hx, hy: extended; • i, pxma, pyma, pxm, pym: word; • Begin with m. canvas do begin • pen. width: =1; pen. color: =cl. White; • brush. color: =cl. White; • pxma: =m. width; pyma: =m. height; • rectangle(0, 0, pxma, pyma); • pxm: =pxma-2*po; pym: =pyma-2*po; • pen. color: =cl. Black; • rectangle(po, po+pxm, po+pym); • pen. width: =3; pen. color: =cl. Red; • hx: =(b-a)/pxm; hy: =(yma-ymi)/pym; • h: =(b-a)/n; x: =a; y: =f(x); • Move. To(po, po+round((yma-y)/hy)); • for i: =1 to n do begin • x: =x+h; y: =f(x); • Line. To(po+round((x-a)/hx), po+round((yma-y)/hy)); • end; 2/13/2018 26 • end;

В качестве упражнения прорисуйте разметку осей и с помощью метода Textout добавьте надписи осей xmin=…, xmax=…, ymin=…, ymax=… 2/13/2018 27

Конец 2/13/2018 28