graphics.h Рисование дома, дерева, озера, Солнца
Компилятор, который я использую для написания кода, описываемого в этой публикации, является динозавром эпохи компьютеров. Сейчас этот компилятор практически не используется. В современных подключить graphics.h у вас не получится. Но коли так вышло, что начинал я познавать графику в Borland C++ 3.1, эта публикация существует.
Для понимания темы требуются знания
Рисование с помощью WinApi (подойдёт для современных компиляторов из-под Windows):
Один из читателей моих публикаций попросил в комментариях рассмотреть graphics.h. В то время я не знал ни что это натолько устаревшая библиотека, ни чего-то вообще о программировании графики в С++. Хоть и был немного знаком c компьютерной графикой, поскольку до C++ успел немного порисовать на Turbo Pascal. Выполняя ту просьбу, я написал несколько статей, посвящённых программированию графики в неиспользуемом в наше время компиляторе. К тому же, когда я писал эту статью — этот сайт был блогом, поэтому стиль изложения блоггерский.
Чтобы нарисовать рисунок, нужно хорошо его представлять. Если кто-то не художник и рисованием не занимался, то в голове детали ему удержать будет трудно, поэтому правильно будет сделать набросок. Набросок можно сделать на бумаге, а можно в одной из графических программ, наподобие Paint. Я вот не художник вообще, но что-нибудь примитивное рисовать умею. Набросок я рисовал в Paint.net. Срисовывать с листа потом намного легче, чем рисовать сразу в программу.
Вот, что у меня получилось:
На рисунке есть дом, солнце, линия горизонта, три дерева и озеро. У дома есть окно, крыша, двери. У каждого дерева есть ветви, листья и ствол. Чтобы было попроще рисовать объекты, можно использовать объектно-ориентированный подход, т. е. для представления дома, дерева, солнца… использовать классы. Конечно, я постараюсь никаких усложнений не делать читателю темы.
Имеющие опыт рисования в графических программах знают, что сначала рисуется фон, а всё, что рисуется после, отводит фон на задний план, поскольку фон перекрывается более новыми нарисованными элементами. В случае рисования с помощью графических библиотек всё работает точно так же: начинать следует с нарисования фона. В нашем случае фоном являются небо, солнце и трава. Хоть набросок и не раскрашен, на нём видна линия горизонта, делящая небо и землю.
Создаём фон программно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
C++ 3.1 Листинг #1 MS-DOS graphics.h Создание фона #include <stdlib.h> #include <iostream.h> #include <graphics.h> class Fon //СОЗДАЛ КЛАСС ФОН { public: Fon(); //КОНСТРУКТОР }; Fon::Fon() //ВЫЗОВ КОНСТРУКТОРА ВНЕ КЛАССА { setfillstyle(6,GREEN); //Установка стиля заливки bar(0,0,getmaxx(),getmaxy()); //Рисую залитый прямоугольник. Заливаю все зеленым setfillstyle(1,1); //Установка стиля заливки bar(0,0,getmaxx(),150); //Рисую залитый прямоугольник поверх первого. Получил Небо setfillstyle(1,14); //Установка стиля заливки fillellipse(600,50,50,50); //Рисую залитый эллипс. Получил Солнце setfillstyle(1,1); //Установка стиля заливки fillellipse(500,390,200,50); //Рисую залитый эллипс. Получил Озеро }; int main() { int gm,gd=DETECT; //Переменные для инициализации графики initgraph(&gd,&gm,""); //Поиск нужного графического драйвера Fon Fon1; //Объявлю переменную типа Фон cin.get(); closegraph(); return 0; } |
После запуска получилась такая картинка:
Сейчас может быть не особо понятно, почему объявления оказалось достаточно для нарисования картинки. Дело в том, что объекты конструируются до начала работы функции main. Выполнилось то, что написано в конструкторе объекта.
После описания рисования фона нужно приступать к основным объектам картинки. Я решил начать с рисования дерева. Честно признаюсь, рисование дерева отняло у меня некоторое время. Подобное я делал впервые и поэтому подгонял тут точку за точкой.
- moveto — перемещает перо на указанные координаты. Позиция пера – это начало рисования.
- lineto — рисует линию из начала рисования на указанные координаты.
Всмотритесь в дерево на первом бесцветном рисунке. Оно у меня нарисовано линиями и овалами и кругами. Сперва я рисовал дерево без листвы. Чтобы мне было немного проще подгонять точку к точке, я сначала перемещал перо в приблизительное место нужной точки и рисовал линию оттуда на координаты [0,0]. (Тянул отрезок из активной точки в левый верхний угол экрана). Ни разу не попал сразу, поэтому приходилось подгонять вверх, вниз, вправо и влево. Когда точка попадала в нужное место ствола или ветки, я начинал подгонять те координаты, которые [0,0].
Если выражаться проще: сначала брался за первую точку отрезка и пытался поставить ее в нужное место, потом за вторую. Таким образом я смог получить на экране дерево без листвы очень похожее на дерево на моём наброске.
Если выражаться проще: сначала брался за первую точку отрезка и пытался поставить ее в нужное место, потом за вторую. Таким образом я смог получить на экране дерево без листвы очень похожее на дерево на моём наброске.
Следующий шаг — сделать лысое дерево не лысым: нарисовать ему листьев. Листья нарисовать оказалось проще, всё-таки гонять окружности и овалы по экрану — задача несложная.
Вот, что у меня получилось:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
C++ 3.1 Листинг #2 MS-DOS graphics.h Создание дерева, стоящего на фоне #include <stdlib.h> #include <iostream.h> #include <graphics.h> class Fon { public: Fon(); }; Fon::Fon() { setfillstyle(6,GREEN); bar(0,0,getmaxx(),getmaxy()); setfillstyle(1,1); bar(0,0,getmaxx(),150); setfillstyle(1,14); fillellipse(600,50,50,50); setfillstyle(1,1); fillellipse(500,390,200,50); }; /*КЛАСС ДЕРЕВО*/ class Tree { int x,y; //Координаты начала роста public: Tree(int X,int Y) {x=X;y=Y;} //Конструктор с параметрами void ShowTree(); //Метод, отображение дерева на экране }; /*ОПИСЫВАЮ МЕТОД РИСОВАНИЯ ДЕРЕВА ВНЕ КЛАССА*/ void Tree::ShowTree() { y=y+getmaxy(); //Рисую ствол и ветви moveto(x,y-150); lineto(x,y-300); moveto(x,y-(150+75)); lineto(x+70,y-(150+75)-70); moveto(x+20,y-(150+75)-20); lineto(x+70,y-(150+75)-20); moveto(x+40,y-(150+75)-40); lineto(x+45,y-(150+75)-70); moveto(x,y-(150+75)-40); lineto(x+20,y-(150+75)-65); moveto(x,y-(150+75)-10); lineto(x-30,y-(150+75)-20); moveto(x,y-(150+75)-30); lineto(x-25,y-(150+75)-40); //Рисую листву setfillstyle(1,GREEN); fillellipse(x,y-300,5,5); fillellipse(x+20,y-290,7,7); fillellipse(x+45,y-300,3,7); fillellipse(x+75,y-300,10,10); fillellipse(x+20,y-255,5,10); fillellipse(x+70,y-247,10,10); fillellipse(x-30,y-247,10,10); fillellipse(x-30,y-267,7,7); fillellipse(x-15,y-270,5,9); } int main() { int gm,gd=DETECT; initgraph(&gd,&gm,""); Fon Fon1; //Рисование фона с помощью конструктора Tree Derevo1(50,50); //Объявление объекта типа Дерево Derevo1.ShowTree(); //Рисование Дерева cin.get(); closegraph(); } |
Мне трудно досконально описать метод рисования дерева на экране. Как я уже написал, я подгонял точку за точкой, но, надеюсь, несмотря на это, вы понимаете, как это сделано. Мне пришлось запускать программу достаточно много раз, чтобы все точки поставить в нужные места. Такой подход обусловлен получением первого опыта в написании программы, которая что-то рисует. Забегая немного вперед, поясню, что потом я пришёл к способу ставить окружность в качестве точки на выбираемый мной координаты и по ней определять подходящие позиции. Где-то дальше по теме я уже использовал его, а не вот этот вот чудовищный подбор.
После очередного запуска я получил картинку:
Если сравнивать с моим изначально подготовленным рисунком, то заметно небольшое сходство.
Благодаря существованию объектно-ориентированного подхода к программированию и возможности относительного позиционирования мне не нужно мучиться с координатами других деревьев. Вы, наверняка, увидели, что в моем коде использованы обозначения координат (x,y) вместо обычных числовых значений. Эти координаты объявлены внутри класса и, по идее, недоступны из функции main. Конструктор принимает параметры в свои большие (X,Y), которые потом передаются в маленькие (x,y) метода класса, поэтому не прямой, но доступ к ним есть. При объявлении объекта дерево мы указываем два параметра для такой передачи. (У точки на плоскости две координаты).
Теперь деревья можно рисовать в разных местах экрана. Это будет нарисовано чуть позже.
Нарисованный на наброске дом состоит из нескольких элементов: окна, крыша, дверь. Каждый элемент необходимо нарисовать. Чтобы в последствии можно было проще работать с объектами Дом, следует использовать относительный способ рисования: это когда данные закладываются не напрямую числами, а переменными. Подробно всё расписывать долго, я думаю, что не смогу, но что смогу, попробую изложить.
Сначала я пробовал рисовать простые примитивы типа rectangle, контуры линиями с помощью line, но при заливке возникли проблемы, поэтому использованы bar3d, drawpoly.
- Bar3d рисует прямоугольник
- drawpoly рисует многоугольник.
Если всмотреться в дом на наброске, то можно увидеть такие многоугольники, как параллелограмм и треугольник. Чтобы мне было немного проще находить координаты, чем было тогда, когда я находил координаты с деревом, я решил выводить на экран сначала textxy(x,y,"TEXT"). По аналогии с нарисованным деревом нужно плясать от какой-то точки, поэтому я подгонял эти точки в приблизительные места и только потом рисовал многоугольники. Такой момент оставлен в комментариях кода. Подгонял я, разумеется, с многократным запуском программы и изменениями координат вывода текста. В таком подгоне заключается основная идея моего подхода.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
C++ 3.1 Листинг #3 MS-DOS graphics.h Создание дерева, стоящего на фоне и дома #include <stdlib.h> #include <iostream.h> #include <graphics.h> class Fon { public: Fon(); }; Fon::Fon() { setfillstyle(6,GREEN); bar(0,0,getmaxx(),getmaxy()); setfillstyle(1,1); bar(0,0,getmaxx(),150); setfillstyle(1,14); fillellipse(600,50,50,50); setfillstyle(1,1); fillellipse(500,390,200,50); }; class Tree { int x,y; public: Tree(int X,int Y) {x=X;y=Y;} void ShowTree(); }; /*ДОБАВИЛИ КЛАСС ДОМ*/ class Dom { int x,y; //Координаты начала рисования дома public: Dom(int X,int Y) {x=X;y=Y;} //Конструктор класса принимает параметры void ShowHome(); //Метод класса, рисующий Дом }; void Tree::ShowTree() { y=y+getmaxy(); //Рисую ствол и ветви moveto(x,y-150); lineto(x,y-300); moveto(x,y-(150+75)); lineto(x+70,y-(150+75)-70); moveto(x+20,y-(150+75)-20); lineto(x+70,y-(150+75)-20); moveto(x+40,y-(150+75)-40); lineto(x+45,y-(150+75)-70); moveto(x,y-(150+75)-40); lineto(x+20,y-(150+75)-65); moveto(x,y-(150+75)-10); lineto(x-30,y-(150+75)-20); moveto(x,y-(150+75)-30); lineto(x-25,y-(150+75)-40); //Рисую листву setfillstyle(1,GREEN); fillellipse(x,y-300,5,5); fillellipse(x+20,y-290,7,7); fillellipse(x+45,y-300,3,7); fillellipse(x+75,y-300,10,10); fillellipse(x+20,y-255,5,10); fillellipse(x+70,y-247,10,10); fillellipse(x-30,y-247,10,10); fillellipse(x-30,y-267,7,7); fillellipse(x-15,y-270,5,9); } /*МЕТОД РИСОВАНИЯ ДОМА ОПИСАН ВНЕ КЛАССА*/ void Dom::ShowHome() { setfillstyle(3,3); //Установка стиля заливки bar3d(x-150,y,x-50,y-120,2,1); //Рисую фасад дома //Треугольная часть крыши int poly[8]; //3 вершины*2 = 6. Нужна точка замыкания 6+2 =8 poly[0]=x-155; poly[1]=y-120; //A(x,y) poly[2]=x-100; poly[3]=y-200; //B(x,y) poly[4]=x-45; poly[5]=y-120; //C(x,y) poly[6]=poly[0];poly[7]=poly[1]; //Замыкание контура setfillstyle(5,1); //Установка стиля заливки fillpoly(3,poly); //Рисую залитый треугольник //Параллелограммная часть крыши /*Поиск точек для параллелограмма outtextxy(x-45,y-120,"A"); outtextxy(x+100,y-120,"B"); outtextxy(x-100,y-200,"C"); outtextxy(x+100-45,y-200,"D"); */ int poly1[10]; //4 точки параллелограма*2=8 + точка для замыкания =8+2=10 poly1[0]=x-45; poly1[1]=y-120; //A poly1[2]=x+100; poly1[3]=y-120; //B poly1[4]=x+100-45; poly1[5]=y-200; //D poly1[6]=x-100; poly1[7]=y-200; //C poly1[8]=poly1[0]; poly1[9]=poly1[1]; //Замыкание контура setfillstyle(2,1);//Установка стиля заливки fillpoly(4,poly1); //Рисование залитого четырехугольника /*БОКОВАЯ СТЕНА ДОМА*/ /*Поиск точек outtextxy(x-45,y,"A"); outtextxy(x+100,y,"B"); outtextxy(x+100,y-120,"C"); outtextxy(x-45,y-120,"D"); */ setfillstyle(10,2); //Установка стиля заливки bar3d(x-45,y,x+100,y-120,1,1); //Залитый прямоугольник //ПОИСК И РИСОВАНИЕ ОКОН /*outtextxy(x-30,y-50,"A"); outtextxy(x-30,y-80,"B"); outtextxy(x,y-80,"C"); */ setfillstyle(1,7); //Установка стиля заливки bar3d(x-30,y-50,x,y-80,1,1); //Рисование первого окна /*outtextxy(x+15,y-50,"A"); outtextxy(x+45,y-80,"B");*/ bar3d(x+15,y-50,x+45,y-80,1,1); //Рисование второго окна /*outtextxy(x+60,y-50,"A"); outtextxy(x+90,y-80,"B"); */ setfillstyle(5,YELLOW); //Установка стиля заливки bar3d(x+60,y-50,x+90,y-80,1,1); //Рисование третьего окна /*ПОИСК КООРДИНАТ И РИСОВАНИЕ ДВЕРЕЙ outtextxy(x-70,y,"A"); outtextxy(x-100,y-70,"B");*/ setfillstyle(2,6); //Установка стиля заливки bar3d(x-70,y,x-100,y-70,1,1); //Рисование двери } int main() { int gm,gd=DETECT; initgraph(&gd,&gm,""); Fon Fon1; //Рисование фона с помощью конструктора Tree Derevo1(50,50); //Создание объекта типа Дерево Derevo1.ShowTree(); //Рисования дерева Dom Dom1(400,300); //Создание объекта типа Дом Dom1.ShowHome(); //Рисование дома cin.get(); closegraph(); return 0; } |
После запуска программы стала видна такая картинка:
Несмотря на то, что используемый подход к рисованию (относительное позиционирование) труднее понять, чем простая подстановка координат цифрами (абсолютное позиционирование), он все-таки в нашем случае лучше. Ведь теперь можно создавать дом в любом месте экрана, как и дерево. Если нужен пример, то пожалуйста:
Изменена функция main, остальное все остается так, как написано, и получилось вот это:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ int gm,gd=DETECT; initgraph(&gd,&gm,""); Fon Fon1; //Рисование фона с помощью конструктора Tree Derevo1(50,50); //Объяевляем Объект Дерево1 Tree Derevo2(150,150); //Объявляем объект дерево2 Tree Derevo3(300,100); //Объявляем объект Дерево3 Tree Derevo4(400,-100); //Объявляем объект Дерево4 Dom Dom1(400,300); //Объявляем объект Дом один Dom Dom2(150,380); //Объявляем объект Дом два Derevo4.ShowTree(); //Рисуем дерево за домами Dom1.ShowHome(); //Рисуем первый дом Dom2.ShowHome(); //Рисуем второй дом Derevo1.ShowTree(); //Рисуем дерево перед домами Derevo2.ShowTree(); //Рисуем дерево перед домами Derevo3.ShowTree(); //Рисуем дерево перед домами cin.get(); closegraph(); } |
Получили рисунок:
Вот такое вот нелегкое начало рисования приводит к достаточно простому созданию копий объектов, после чего каждый из объектов может быть отдельным рисунком. При всем при этом такие начинания могут стать первым шагом к пониманию анимации изображений.
13 комментариев на «“graphics.h Рисование дома, дерева, озера, Солнца”»
Добавить комментарий
Случайная книга в электронном формате
😀 😀 😀 😀 😀 😀 класс
😳 👿 😥
мудак
Блин…очень много пунктуационных ошибок в изложении.
😥 ➡ ➡ ➡ ➡ ➡ ➡ ➡ ➡ ➡ ➡
Я 5 получил я в.7
ОБОССАТЬСЯ
Спасибо большое тебе за твой труды от души.
здравствуйте, подскажите пожалуйста аналог библиотеки <graphics.h> в Visual Studio 2010-2015
Не аналог, но имеет смысл sfml
у меня матюкается что нет такой директории graphics.h
сижу в code::blockse 13.12
У Вас не выйдет с graphics.h, это для старых компиляторов. Вам может подойти одна из таких библиотек, как OpenGL, sfml, WinApi. Популярно sfml, но как она подключается на моём сайте не описано. Описано как рисовать в WinApi, в Windows специальных танцев не надо, а рисунок там очень похожий: Знакомство с рисованием с помощью WinApi. Рисование дома, дерева, Солнца и озера.
тут чет не правильно