Графика в среде программирования
Turbo Pascal
Преподаватель ЕАДК: Неверова И.Ю.
План урока:
- Особенности подключения графического режима в среде программирования Turbo Pascal
- Составление структуры программы
- Расчёт координат для процедур
- Особенности рисования контуром и заливкой цветом
- Рассмотрение образцов программы
И.Г. Семакин, А.П. Шестаков. Основы программирования, с.88-98, 398-409.
Графические возможности языка Turbo Pascal – библиотека Graph
- Подключение графической библиотеки прописывается в программе процедурой:
- Для установки графического режима экрана используется процедура:
InitGraph (Var Driver, Mode: Integer, Path: String);
Путь к графической библиотеке
Режим работы драйвера
Код драйвера
Режимы работы графической программы
- Текстовый режим. Используется для написания программы. Переход из режима текста программы в графический режим выполнения программы осуществляется процедурой RUN или клавишами Ctrl+F9.
- Графический режим. Изображение строится из отдельных точек (пикселей). Режим работы графического драйвера VGAHi соответствует графической сетке 640х480 пикселей, с палитрой из 16 цветов, автоматическим определением типа драйвера и установке графического режима. Выход из программы в режим текста программы клавишей Enter.
Структура программы
Program ricunok ; {заголовок программы}
Uses Graph ; {подключение графической библиотеки}
Var Dr , Md: integer ; {описание переменных драйвера}
Begin {начало тела программы}
Dr:= Detect ; {тип драйвера}
InitGraph (Dr , Md ,‘ C:\ TP 70\ BGI ’); {включение графики с
библиотекой graph }
ReadLn ; {задержка программы}
End . {конец программы}
Расчёт координат для процедур вывода геометрических фигур
Bar(50,100,150,150)
Fillellipse(250,125,25,25)
Монитор типа VGA
Использование графических процедур
Программа, выводящая на экран японский флаг белого цвета с красным кругом в центре
на бирюзовом фоне экрана.
Var Dr, Md: Integer;
InitGraph (Dr, Md, ‘C:\TP70\BGI’);
ClearViewPort ; {Очистка экрана, для установления фона экрана}
SetBkColor (Cyan); {Установка цвета фона экрана бирюзовая}
SetFillStyle (1, 15); {Цвет заполнения прямоугольника по шаблону и цвету}
Bar (10, 10, 410, 210); {Рисование закрашенного прямоугольника по координатам}
SetColor (4); {Установка цвета линий круга}
Circle (210, 110, 30); {Рисование окружности с координатой центра и радиусом}
SetFillStyle (1, 4); {Цвет заполнения круга по шаблону и цвету}
FloodFill (200, 100, 4); {Заполнение цветом замкнутой фигуры вокруг координаты до границ}
ReadLn ; {задержка программы}
CloseGraph ; {выход из графического режима}
End . {конец тела программы}
Программа выводящая на экран блок-схему
var dr,md:integer;
begin dr:=detect;
setlinestyle(0,1,3);
ellipse(320,40,0,360,50,10);
line(320,50,320,70);
line(270,70,390,70); line(390,70,370,100); line(370,100,250,100); line(250,100,270,70); line(320,100,320,120);
rectangle(260,120,380,150);
line(320,150,320,170); line(320,170,400,190); line(400,190,320,210); line(320,210,240,190); line(240,190,320,170);
line(240,190,200,190); line(200,190,200,210);
rectangle(140,210,260,240);
line(200,240,200,260);
rectangle(140,260,260,290);
line(200,290,200,310);
Line(140,310,260,310); Line(260,310,240,340); Line(240,340,120,340); Line(120,340,140,310); line(200,340,200,360);
line(200,360,100,360); line(100,360,100,170); line(100,170,320,170); line(400,190,440,190);
line(440,190,440,380); line(440,380,320,380); line(320,380,320,400);
ellipse(320,410,0,360,50,10);
settextstyle(7,0,2);
outtextXY(300,75,’F"); outtextXY(300,125,"N:=0"); outtextXY(292,178,’N
Результат выполнения программы
Написать программу выводящую следующий рисунок
Program paravoz;
var dr,md:integer;
begin dr:=detect;
initgraph(dr,md,"C:\tp70\bgi");
SetFillStyle (1, 2);
Bar(150,30,250,225);
SetFillStyle (1, 1);
Bar(180,55,220,115);
SetFillStyle (1, 2);
Bar(250,120,450,225);
Line(350,65,390,65);
Line(350,65,360,120);
Line(390,65,380,120);
Line(380,120,360,120);
SetFillStyle(1,1);
Sector(420,245,0,360,20,20);
Sector(300,245,0,360,20,20);
Sector(185,245,0,360,20,20);
SetFillStyle(1,7);
Sector(400,50,0,360,30,10);
Sector(425,25,0,360,20,10);
Sector(445,5,0,360,10,5);
Домашнее задание
В рабочих тетрадях Тема № 4 выполнить задания 1 и 2, по использованию графических процедур.
Таблица основных графических процедур в Приложении 4.
Слайд 2
Каждый пиксель (точка) имеет две координаты: х и у Геометрические размеры пикселя определяются разрешением монитора.
Слайд 3
Пример 1. Демонстрация подключения модуля GraphAbc program tochka; uses graphabc; {подключение модуля GraphAbc} begin setwindowsize(640,480);{устанавливает размеры графического окна} setpixel(100,120,clBlack); {устанавливает черный цвет пера и рисует точку с координатами (100,120)} end. В данном примере мы познакомились с использованием команды setpixel в частном случае. В общем виде эта команда выглядит так: setpixel(x:integer,y:integer,c:color) – рисует точку с координатами (х,у) цветом с. clBlack – черный clPurple – фиолетовый clWhite – белый clRed – красный clGreen – зеленый clBrown – коричневый clBlue – синий clSkyBlue – голубой clYellow – желтый
Слайд 4
Программа рисования отрезка, соединяющего две точки с координатами (120,150) и (150,80) красным цветом пера, может выглядеть так: Пример 2. Демонстрация рисования линии program Linii; uses graphabc; begin setwindowsize(640,480); setpencolor(clred); {устанавливает красный цвет пера} line(120,150,300,100); {рисует отрезок от (120,150) до (300,100)} end.
Слайд 5
Пример 3. Демонстрация рисования линий разным цветом пера program treugolnik; uses graphabc; begin setwindowsize(640,480); setpenwidth(5); {устанавливает ширину текущего пера. В скобках указывается количество пикселей, образующих ширину линии} setpencolor(clred); {устанавливает красный цвет пера} line(100,200,170,70); {рисует отрезок от точки с координатами (100,200)до точки с координатами с координатами (170,70)} setpencolor(clGreen); {устанавливает зеленый цвет пера} line(170,70,250,200); {рисует отрезок от точки(170,70)до точки(250,200)} setpencolor(clBlue); {устанавливает синий цвет пера} line(250,200,100,200);{рисует отрезок от точки(250,200) до точки(100,200)} {результат - треугольник со сторонами разных цветов} end.
Слайд 6
Важно помнить: 1. Рисуя линии, можно задавать ее размер (координатами ее концов), цвет, ширину (толщину) и стиль. 2. Для задания стиля линии в модуле GraphAbc существует процедура SetPenStyle (Style), где Style - константы стилей пера (см. Приложение к главе 3). 3. Линия может быть сплошной, пунктирной, штрихпунктирной, штриховой. Замкнутые фигуры можно закрашивать.
Слайд 7
Пример 4. Демонстрация рисования замкнутых фигур с помощью линий и их закрашивание Program treug_zakrash; uses graphabc; begin setwindowsize(640,480); clearwindow(clWhite);{очищает графическое окно белым цветом} setpenwidth(3); {устанавливает ширину текущего пера} setpenstyle(pssolid); {устанавливает стиль линии – сплошная линия} setpencolor(clgreen);{устанавливает зеленый цвет пера} line(100,200,170,70); {рисует линии зеленым цветом} line(170,70,250,200); line(250,200,100,200); floodfill(440,120,clred); {Закрашивает треугольник красным цветом} end.
Слайд 8
В результате выполнения программы на экране монитора в графическом окне появится треугольник, нарисованный зеленым и закрашенный красным цветом Важно помнить: 1. Закрашивать можно только замкнутые фигуры, контур которых нарисован одним цветом. 2. В процедуре заливки floodfill(х,у,c) указывается координата точки (х,у), которая обязательно должна попасть во внутреннюю область закрашиваемой фигуры.
Слайд 9
Прямоугольники и окружностиможно рисоватьс помощью командrectangle(x1,y1,x2,y2) и circle(x,y,r) соответственно. Как это можно сделать, рассмотрим на примере программы, которая рисует прямоугольник и окружность. Пример 5. Демонстрация рисования прямоугольника и окружности program gemetry; uses graphabc; begin setwindowsize(640,480); setpencolor(clBlue); {устанавливает голубой цвет пера для рисования контура прямоугольника} setpenwidth(6); {устанавливает ширину пера} rectangle(50,50,250,150);{рисует прямоугольник, заданный координатами противоположных вершин} setpencolor(clred); {устанавливает красный цвет пера для рисования контура окружности} circle(350,100,60); {рисует окружность с центром в точке с координатами (350,100) и радиусом 60} end.
Слайд 10
Демонстрация закрашивания прямоугольника и окружности и их надписи program gemetry3; uses graphabc; begin setwindowsize(640,480); clearwindow(clYellow);{устанавливает желтый цвет фона} setpencolor(clteal); {устанавливает сине-зеленый цвет пера} setpenwidth(5); {устанавливает ширину линии} setbrushcolor(clolive);{устанавливает оливковый цвет кисти} rectangle(100,100,300,200); {рисует закрашенный оливковым цветом прямоугольник} setbrushcolor(clblue);{устанавливает синий цвет кисти} circle(400,150,50); {рисует закрашенный синим цветом круг} setfontstyle(fsbold);{устанавливает стиль шрифта} setfontsize(15);{устанавливает размер шрифта} setbrushcolor(clwhite);{устанавливает белый цвет кисти} setfontcolor(clolive);{устанавливает оливковый цвет шрифта} textout(100,220,"Прямоугольник"); {делает надпись} setfontcolor(clblue); {устанавливает синий цвет шрифта} textout(380,220,"Круг"); {делает надпись} end.
Слайд 11
Графические процедуры АВС Паскаля: 1. SetPixel(x,y,color: integer); - закрашивает один пиксель с координатами (x,y) цветом color. 2. Line(x1,y1,x2,y2: integer); - рисует отрезок от точки (x1,y1) и до точки (x2,y2). 3. Circle(x,y,r: integer); - рисует окружность с центром в точке (x,y) и радиусом r. 4. Rectangle(x1,y1,x2,y2: integer); -рисует прямоугольник, заданный координатами противоположных вершин (x1,y1) и (x2,y2). 5. TextOut(x,y: integer; s: string); - выводит строку s в позицию (x,y) (точка (x,y) задает верхний левый угол прямоугольника, который будет содержать текст из строки s). 6. FloodFill(x,y,color: integer); - заливает область одного цвета цветом color, начиная с точки (x,y). 7. FillRect(x1,y1,x2,y2: integer); - заливает прямоугольник, заданный координатами противоположных вершин (x1,y1) и (x2,y2), цветом текущей кисти.
Слайд 12
Что будет выведено на экран монитора в результате выполнения данных программ? program grafika1; uses graphabc; begin setpenwidth(10); setpencolor(clred); Line(100,100,270,90); End. Рrogram grafika2; uses graphabc; begin setpenwidth(8); setpencolor(clblue); circle(200,150,50); End.
Слайд 13
Перепишите в тетрадь: Тема: Графические возможности языка программирования. 1. Line(x1,y1,x2,y2; - отрезок от (x1,y1) до (x2,y2). 2. Circle(x, y, r); - окружность с центром в (x,y) и радиусом r. 3. Rectangle(x1,y1,x2,y2); - прямоугольник, заданный координатами противоположных вершин (x1,y1) и (x2,y2). 4. FloodFill(x, y, color); - заливает область одного цвета цветом color, начиная с точки (x,y).
Посмотреть все слайды
Серогодская Н.И. ГБОУ школа №118 ЮЗАО
Графический режим
Учитель информатики ГБОУ школа №118 ЮЗАО
Серогодская Н.И.
Г.Москва
Урок №1
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Цели
Обучающие:
познакомить учащихся с программной средой Pascal ABC, со структурой программы на языке Паскаль;
сформировать у учащихся первичные знания по применению изученного материала.
Развивающие:
учить анализировать, обобщать и систематизировать;
обогащать словарный запас учащихся.
Воспитательные:
развивать информационную культуру учащихся, способность к самостоятельной и коллективной деятельности, рефлексию.
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
- Учащиеся должны знать:
- основные команды и функции в среде GraphPascal ABC;
- правила оформления и работы программы;
- Учащиеся должны уметь:
- разрабатывать программы рисования графических примитивов;
- производить необходимые действия с программой;
- разрабатывать процедуры с параметрами и без них для рисования объектов;
- разрабатывать программы на основе типовых конструкций алгоритма;
- Дополнительно: решать более сложные графические задачи
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Для работы в графическом режиме необходимо подключение модуля GraphABC :
Графический экран PasсalABC содержит 640 точек по горизонтали и 400 точек по вертикали.
Обратите внимание, что начало отсчета – левый верхний угол экрана, в отличие от осей координат в математике
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
УПРАВЛЕНИЕ ЭКРАНОМ
SetWindowWidth(w) - устанавливает ширину графического окна;
SetWindowHeight(h) - устанавливает высоту графического окна;
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
ClearWindow; - очищает графическое окно белым цветом.
ClearWindow(cl название цвета ); - очищает графическое окно указанным цветом.
ClearWindow (clMoneyGreen);
Цвет зеленых денег
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Графические примитивы
- Точка
- Линия
- Прямоугольник
- Окружность
- Эллипс
- Сектор
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
SetPixel(x,y,cl название цвета ) - закрашивает один пиксел с координатами (x,y,) цветом
SetPixel(300,200,clred);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
LineTo(x,y) - рисует отрезок от текущего положения пера до точки (x,y); координаты пера при этом также становятся равными (x,y).
begin LineTo(300,200);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Линии
Line(x1,y1,x2,y2) - рисует отрезок с началом в точке (x1,y1) и концом в точке (x2,y2).
line(100,50,500,250);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Используемые цвета
clBlack – черный clPurple – фиолетовый clWhite – белый clMaroon – темно-красный clRed – красный clNavy – темно-синий clGreen – зеленый clBrown – коричневый clBlue – синий clSkyBlue – голубой clYellow – желтый clCream – кремовый
clAqua – бирюзовый clOlive – оливковый clFuchsia – сиреневый clTeal – сине-зеленый clGray – темно-серый clLime – ярко-зеленый clMoneyGreen – цвет зеленых денег clLtGray – светло-серый clDkGray – темно-серый clMedGray – серый clSilver – серебряный
Random(16777215) – случайный цвет из всей палитры цветов Паскаля
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Цвет линии
SetPenColor(color) - устанавливает цвет пера, задаваемый параметром color .
setpencolor(clred);
line(30,30,400,350);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Пунктирная линия
SetPenStyle(); -
устанавливает стиль пера, задаваемый номером.
Setpencolor(clred);
SetPenStyle(1); {1 - длинный штрих}
Line(10,100,350,100);
SetPenStyle(2); {2 - короткий штрих}
Line(10,125,350,125);
SetPenStyle(3); {3 - штрих-пунктир}
Line(10,150,350,150);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Толщина линии
SetPenWidth(n) - устанавливает ширину (толщину) пера, равную n пикселям.
setpenwidth(20);
setpencolor(clred);
line(30,30,400,350);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Треугольник
Рисуется процедурами
Line(x1,y1,x2,y2); LineTo(x,y);
Program treugolnik;
setpenwidth(20);
setpencolor(clPurple);
line(300,100,500,300);
lineto(100,300);
lineto(300,100);
floodfill(300,200, clSkyBlue) ;
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Прямоугольник
Rectangle(x1,y1,x2,y2) - рисует прямоугольник, заданный координатами противоположных вершин (x1,y1) и (x2,y2 ).
Program pryamougolnik;
Rectangle(50,50,200,200);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Заливка цветом
FloodFill(x,y,color) - заливает область одного цвета цветом color, начиная с точки (x,y).
Program pryamougolnik;
Rectangle(50,50,200,200);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Заливка кистью
SetBrushColor(color) - устанавливает цвет кисти.
Заливка кистью распространяется на замкнутый контур , описание которого следует за процедурой установки цвета кисти.
Program zalivka_kist;
SetBrushColor(clMoneyGreen );
Rectangle(50,50,300,300);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Заливка кистью
SetBrushStyle(номер от 0 до 7 или название) - устанавливает стиль кисти, задаваемый номером или символической константой.
Program p12_zalivka;
uses GraphABC;
SetBrushColor(clAqua);
SetBrushStyle(1);
Rectangle(10,10,100,100);
SetBrushColor(clRed);
SetBrushStyle(2);
Rectangle(110,10,200,100);
SetBrushColor(clBlue);
SetBrushStyle(3);
Rectangle(210,10,300,100);
SetBrushColor(clGreen);
SetBrushStyle(4);
Rectangle(10,110,100,210);
SetBrushColor(clYellow);
SetBrushStyle(5);
Rectangle(110,110,200,210);
SetBrushColor(clBlack);
SetBrushStyle(6);
Rectangle(210,110,300,210);
По умолчанию задается стиль 0 – сплошная заливка цветом.
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Заливка кистью
SetBrushPicture (‘fname’) -
устанавливает в качестве образца для закраски кистью образец, хранящийся в файле fname, при этом текущий цвет кисти при закраске игнорируется.
begin SetBrushPicture("brush4.bmp"); Ellipse(0,0,640,400);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Цвет и толщина контура
задаются процедурами SetPenWidth(w); SetPenColor(color);
Program pryamougolnik;
SetPenColor(clred);
SetPenWidth(20);
Rectangle(50,50,200,200);
FloodFill(100,100, clSkyBlue);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Окружность
Circle(x,y,r) - рисует окружность с центром в точке (x,y) и радиусом r .
Circle(500,200,100);
FloodFill(500,200, clGreen );
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Эллипс
Ellipse(x1,y1,x2,y2) - рисует эллипс, заданный своим описанным прямоугольником с координатами противоположных вершин (x1,y1) и (x2,y2).
Ellipse(50,50,200,350);
FloodFill(50+100,50+100,clred);
Ellipse(250,150,550,300);
FloodFill(250+100,150+100,clBlue);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Дуга окружности
Arc(x,y,r,a1,a2) - Рисует дугу окружности с центром в точке (x,y) и радиусом r, заключенной между двумя лучами, образующими углы a1 и a2 с осью OX (a1 и a2 – вещественные, задаются в градусах и отсчитываются против часовой стрелки).
SetPenWidth(10);
Arc(300,250,150,45,135);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Сектор
Pie(x,y,r,a1,a2) - рисует сектор окружности, ограниченный дугой (параметры процедуры имеют тот же смысл, что и в процедуре Arc).
Pie(300,200,100,0,90);
FloodFill(300+10,200-10,clAqua);
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Список литературы
- Федоренко Ю. Алгоритмы и программы на Турбо Паскале .
- Фаронов В.В. Turbo Pascal 7.0. Начальный курс . - Нолидж, 1998. -620 с.
- Грызлов В.И., Грызлова Т.П. Турбо Паскаль 7.0 . - М.: "ДМК", 2000. - 416 с.
- Зуев Е.А. Язык программирования Turbo Pascal 6.0 . - М.: Унитех, 1992. - 298с.,ил.
- Зуев Е.А. Turbo Pascal. Практическое программирование .
Серогодская Н.И. ГБОУ СОШ №1 корпус 2
Спасибо за внимание!