2.Система координат
Если вы внимательно посмотрите на нарисованный отрезок, то, возможно, удивитесь, а может даже возмутитесь:
— Pascal неверно изобразил отрезок! Отрезок с координатами концов (100;200) и (200;100) должен
быть наклонён в другую сторону:
— Нет, Pascal не ошибся, просто вертикальная ось у него направлена сверху вниз и отсчёт начинается с верхнего левого угла:
• Используя процедуру рисования отрезка Line, нарисуйте ещё два отрезка:
ПРОВЕРЬ СЕБЯ
4.Управление цветом линии
Вам хочется увидеть что-то более весёлое? Это возможно — давайте воспользуемся теми шестнадцатью цветами, которые нам предлагает выбранный режим:
Процедура setCoIor(n) устанавливает текущим цвет с номером n. Ей мы сейчас и воспользуемся.
• Установите для рисования треугольника тёмно-красный цвет (в Pascal он имеет номер 4):
• Запустите программу — у вас получилось так?
Обратите внимание! Цвет рисования устанавливается процедурой setColor(n) ПЕРЕД тем, как будет рисоваться линия.
И действительно, вы ведь перед тем, как нарисовать красную линию, берёте в руки красный карандаш! Аналогично этому происходит рисование и в Pascal:
Как говорится — никакой разницы!
5.Заливка области
Ну, а теперь пора брать в руки краски — закрасим (зальём) нарисованный треугольник. В Pascal можно не только задать цвет заливки области, но и указать шаблон штриховки (стиль заливки):
• Залейте треугольник ярко-красной косой клеткой:
Как видите, процесс заливки подобен процессу рисования линий — сначала задаётся цвет и стиль заливки (процедурой setFillStyle(p,c), где р— номер шаблона, с— номер цвета), а затем заливается некоторая область.
Процедура FloodFill(x,y.c) производит заливку замкнутой области. При этом (х,у)— координаты точки, находящейся внутри (не обязательно в центре) области, с — цвет линии, ограничивающей область.
6.Некоторые графические примитивы
Наш треугольник очень уж смахивает на крышу домика— не правда ли? Так давайте домик и нарисуем!
И помогут нам в этом следующие процедуры:
Rectangle(x1,y1,x2,y2) — контур прямоугольника;
Bar(xl,yl,x2,y2) — заливка прямоугольника.
В этих процедурах (x1.y1) и (х2,у2) — координаты точек противоположных вершин прямоугольника.
• Самостоятельно нарисуйте подобный домик:
ПРОВЕРЬ СЕБЯ
Замечание 1. Наша программа достаточно большая, и чтобы не запутаться в её коде, удобно писать комментарии — пояснение, которое программист даёт к своей программе. Комментарии пишутся в фигурных скобках, они нужны только человеку, читающему программу, при компиляции же они опускаются.
Замечание 2. Обратите внимание, что прямоугольник с заливкой в программе можно рисовать двумя способами:
Сначала рисуется «заливка» прямоугольника процедурой Ваг, затем эта заливка обводится контуром с помощью процедуры Rectangle. Именно так был нарисован сам домик:
Сначала рисуется контур прямоугольника (Rectangle), а затем он заливается (FloodFill). Таким способом были нарисованы окна:
Какой способ применять в каждом конкретном случае, зависит только от программиста, то есть, от вас.
• Сохраните работу — на следующем уроке она нам понадобится.
СПРАВКА
Команда |
Действие |
Circle(x,y,r) |
Рисование окружности с центром в точке (х.у) радиусом г |
EUipse(x,y,0,360,rx,ry) |
Рисование эллипса с центром в точке (х,у), горизонтальным радиусом гх и вертикальным радиусом гу |
Ellipse(x,y,an,ak,rx,ry) |
Рисование эллиптической дуги, ограниченной углами an и ак (аn<ак) |
При рисовании дуги стоит помнить, что её нельзя нарисовать через нулевой угол. В этом случае дугу разбивают на две части. Например, правую полуокружность рисуют как сумму дуг Ellipse(x,y,0,90,rx,ry) и Ellipse(x,y,270,360,rx,ry).
ЭКРАННАЯ СИСТЕМА КООРДИНАТ
Любое изображение в графическом режиме строится с использованием системы координат, где каждый пиксель характеризуется двумя координатами (х, у). Начало координат находится в левом верхнем углу. Горизонтальная координата х увеличивается слева направо, а вертикальная координата у — сверху вниз. Количество пикселей (разрешение экрана) на экране зависит от типа графического адаптера. В нашем случае для адаптера VGA разрешение составляет 640x480.
Основные функции для работы с координатами:
Функция |
Назначение |
getMaxX |
Возвращает максимальную координату X |
getMaxY |
Возвращает максимальную координату Y |
getX |
Возвращает текущую координату х |
getY |
Возвращает текущую координату у |
getPixel(x,y) |
Возвращает цвет точки с координатами (х,у) |
Процедура |
Назначение |
|
Заштрихованный прямоугольник с координатами (x1, y1) — |
Bar(x1,y1,x2,y2) |
верхний угол и (x1, y1) — нижний правый угол, используется |
|
текущий цвет и стиль |
|
Параллелепипед с координатами противоположных вершин |
|
(x1,y1) и (x1,y1); -width — ширина боковой грани (отсчитывается |
Bar3D(x1,y1,x2,y2,width, height) |
по горизонтали), height — признак включения верхней грани |
|
(если true — верхняя грань вычерчивается, false — не вычерчивается) |
|
|
Line(x1,y1,x2,y2) |
Рисует линию от точки (x1,y1), до точки (х2,у2). |
LineTo(x,y) |
Рисует линию от текущего указателя к точке (х,у) |
Rectangle(x1,y1x2,y2) |
Рисует контур прямоугольника с координатами противоположных вершин (x1.y1) и (х2,у2) |
PutPixeI(x,y,color) |
Выводит на экран точку с координатами (х.у) и цветом color |
УПРАВЛЕНИЕ ЦВЕТОМ
Цвет выводимых на экран фигур, линий, текста определяется по соответствующей константе, либо его коду в десятичной системе.
Константы цвета:
Значение |
Константа |
Название |
Цвет |
Яркость |
R |
G |
в |
0 |
black |
чёрный |
|
0 |
0 |
0 |
0 |
1 |
blue |
синий |
|
0 |
0 |
0 |
1 |
2 |
green |
зелёный |
|
0 |
0 |
1 |
0 |
3 |
cyan
|
голубой |
|
0 |
0 |
1 |
1 |
4 |
red |
красный |
0 |
1 |
0 |
0 |
|
5 |
magenta |
фиолетовый |
0 |
1 |
0 |
1 |
|
б |
brown |
коричневый |
0 |
1 |
1 |
0 |
|
7 |
LightGray |
светло-серый |
|
0 |
1 |
1 |
1 |
8 |
darkGray |
темно-серый |
|
1 |
0 |
0 |
0 |
9 |
lightBlue |
ярко-синий |
|
1 |
0 |
0 |
1 |
10 |
lightGreen |
ярко-зелёный |
|
1 |
0 |
1 |
0 |
11 |
HghtCyan |
ярко-голубой |
|
0 |
1 |
1 |
||||
12 |
lightRed |
ярко-красный |
|
1 |
0 |
0 |
||||
13 |
lightMagenta |
ярко-фиолетовый 1 |
|
1 |
0 |
1 |
||||
14 |
yellow |
жёлтый |
|
|
1 |
1 |
0 |
|||
15 |
white |
белый |
|
|
1 |
1 |
1 |
|||
Коротко о главном
Команды, позволяющие работать в графическом режиме, расположены в модуле Graph.
Модули подключаются в разделе USES.
Инициализация графического режима производится процедурой InitGraph(gd,gm,path).
Параметрами этой процедуры являются номер графического драйвера gd, номер графического режима gm и путь к файлу драйвера path.
Рисование в программе Pascal производится по координатам. Начало координат расположено в верхнем левом углу экрана, ось х направлена вправо, ось у — вниз. Рисование графических примитивов производится с помощью процедур Line, Rectangle, Bar.
Замкнутую область можно залить командой FloodFill.
Перед тем, как произвести рисование или заливку, необходимо установить цвет рисования
(процедура setColor) и цвет и стиль заливки (процедура SetFillStyle).
Типичные ошибки
В программах, использующих графический режим, не забывайте подключать модуль Graph, инициализировать графику командой InitGraph и закрывать графический режим командой CIoseGraph.
В среде Borland Pascal ошибка Graphics not initialized возникает в том случае, когда не указан путь к файлу драйвера egavga.bgi в процедуре InitGraph. В среде Free Pascal такая ошибка не возникает, потому что используются драйверы операционной системы.
Ошибка File not found возникает в том случае, когда компилятор не может найти файл модуля Graph. Чаще всего это происходит из-за того, что среда Borland Pascal была не инсталлирована, а скопирована с другого компьютера.
Команда FloodFill заливает замкнутую область, граница которой нарисована одним цветом. Этот цвет указывается вторым параметром процедуры FloodFill.
Не указывайте вторым параметром процедуры FloodFill цвет заливки — этот параметр показывает цвет границы. Цвет заливки устанавливается командой setFillStyle.
Не пренебрегайте комментариями — если через месяц вам придётся вернуться к работе с
программой, вы вряд ли вспомните детали реализации алгоритма. Комментировать необходимо
назначения переменных, подпрограмм, основные этапы программы.
Задание к уроку
Замечание. Линии сетки выводить не надо, они даны для более удобного подбора координат.
ЗАДАНИЕ 1
Составьте программу для вывода следующей картинки:
ЗАДАНИЕ 2
Составьте программу для вывода следующей картинки:
ЗАДАНИЕ 3
Составьте программу для вывода следующей картинки:
ЗАДАНИЕ 4
Составьте программу для вывода следующей картинки:
ЗАДАНИЕ 5
Составьте программу для вывода следующей картинки:
Урок №6
Относительные координаты
Сегодня вы научитесь:
Использовать процедуры в графических программах.
Использовать рисование в относительных координатах.
Рисовать окружности, эллипсы и дуги.
А не хочется ли вам продолжить рисование картинки, начатой на прошлом уроке? Действительно, выглядит она очень уж незавершённой — ни земли, ни неба, ни забора... Висит домик среди экрана...
Согласны? Значит, за дело!