Up

8 класс. Графические возможности среды программирования на С++ в CodeBlocks и Dev-C++

Сначала технические моменты.

Мне удалось настроить рисование в С++ через лаунчер CodeBlocks но на Windows 7.

Как это сделать и где взять нужные файлы? Как установить написано в блоге http://forinformatics.blogspot.com/2014/04/code-blocks.html. Я решила упростить вам жизнь. Все файлы уже лежат в нужных папках. Осталось только провести настройку, как это написано в блоге.

Чтобы скачать всё нужно сразу, а не по отдельности, скачайте из облака, там всё то, что использую я (отсюда). Архивчик тяжёлый (около 200 Мб, при распаковке чуть больше 600 Мб), скачав, распакуйте его на любом диске. из папки вам нужен CbLauncher.exe. Создаём ярлык для него и размещаем на Рабочий стол. Далее проводим настройку как указано по ссылке.

Как запустить первый проект?

В главном окне: Create a new Project - KoolPlot Project  - кнопка Go - Next - Add Console - Next - в строке Project Title напишем task1 - Next - Finish. После этого в левом меню перехожу на task1, а в текстовом меню выбираю File - New - Empty file. В появившемся сообщении выбираем Да. Называем файл проекта (пусть тоже task1) - Ok. В новом окне я выставила все птички (галочки и на Debug, и на Release)    - Ok.

В левом дереве проекта рядом с task1 появляется +. Щелкаем по нему, потом по + рядом с Sourses и выходим на пустой пока файл. Копируем туда вот этот шаблон:

#include <graphics.h>
#include <bits/stdc++.h>                
using namespace std;
int main( void)
{
    //---------- Инициализация графики ----------//
    int gdriver = DETECT, gmode, errorcode;
    initgraph(&gdriver,&gmode,"");
    //---------- Конец инициализации -----------//
    setfillstyle(SOLID_FILL,GREEN);
    setcolor(GREEN);
    rectangle(50,50,50+400,50+300);
    floodfill(51,51,GREEN);
    setfillstyle(SOLID_FILL,RED);
    setcolor(RED);
    circle(250,200,100); //круг
    floodfill(240,200,RED);
    //---------- Завершение работы ------------//
      getch();  
    closegraph();
return 0;
}

Запускаем его. У меня получился вот этот экран:


Искренне надеюсь, что у вас тоже.
Далее в этом шаблоне можно производить изменения после строки
  //-------- Конец инициализации --------// и перед строкой //-------- Завершение работы ----------//
снова компилировать, чтобы проверить работу новой программы.
Если Ваша главная цель - научить работать с графикой, то обратите внимание на новый
 #include <graphics.h>. А также строки, которые всегда в любой графической программе должны присутствовать в обязательном порядке: для инициализации и для закрытия графического режима. Одна из последних команд  getch(); нужна для того, чтобы экран с графическими фигурами не исчезал сразу после выполнения программы, а дождался, пока вы нажмёте любую клавишу.
_________________________________________________________________
Dev C++ как работать с графикой в Windows 10.

Откуда скачать: https://drive.google.com/drive/folders/1jgw1EfrwQTXZDBRlaxM1b1E-E4REV0Z9?usp=sharing (это с моего Google-диска)
или с этой страницы, откуда я всё и взяла: https://coderoad.ru/17503112/%D0%BD%D0%B5-%D1%83%D0%B4%D0%B0%D0%B5%D1%82%D1%81%D1%8F-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D1%82%D0%B8%D1%82%D1%8C-%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D1%83-%D0%B2-DEV-C

Там ниже по странице в комментах под статьёй есть строки "Вот шаги, которым я следовал :"
там написано как, куда, что установить.

В пункте: 
6) Нажмите Ctrl+H и выберите вкладку параметры в открывшемся окне. Скопируйте и вставьте следующее в столбец компоновщика -lbgi -lgdi32 -luser32
7) В строке заголовка выберите TDM-GCC 4.9.2 32-опция профилирования битов в раскрывающемся списке
пришлось сделать по-другому (потому что нее работала программа). Сделала вот так:
7) Перейдите на вкладку Компилятор (Compiler) выберите TDM-GCC 4.9.2 32-опция профилирования битов в раскрывающемся списке (самый верхний)
6) Перейдите на вкладку Параметры (Parameters), в последнем окошке Linker скопировала и вставила

-lbgi -lgdi32 -lcomdlg32 -luuid -loleaut32 -lole32

Нажала  Ок.

В окно программы вставила код 

#include<graphics.h>

#include <conio.h> 

int main()

{   

int gd=DETECT,gm;

initgraph(&gd,&gm,"");


circle(200,200,100);


getch();

closegraph();

}

и нажала запуск (обвела жёлтым маркером):


Всё получилось!!! Сохраните шаблон. Изменения можно писать там, где выделена красным команда. Всё остальное не трогать!!!, должно остаться также для любой программы с графикой.

Можете запустить программу с выше приведённым кодом. На место команды circle(200,200,100); вставьте код из вышеприведённой программы:

setfillstyle(SOLID_FILL,GREEN);

setcolor(GREEN);
    rectangle(50,50,50+400,50+300);
    floodfill(51,51,GREEN);
    setfillstyle(SOLID_FILL,RED);
    setcolor(RED);
    circle(250,200,100); //круг
    floodfill(240,200,RED);

Подробнее о работе с Dev C++ (в том числе и графику) можно прочитать в пособии: ССЫЛКА

Далее всё как в параграфе учебника, с поправкой на С++.
__________________________________________________________________
14.1. Основы работы с графикой 
Вы уже знакомы с графическими редакторами, в которых для построения изображений на компьютере используются графические примитивы — простые геометрические фигуры: прямоугольник, окружность, эллипс, отрезок и т. д. Графический редактор — программа, написанная на каком-либо языке программирования. 
Для работы с графикой языки программирования используют специальные библиотеки (модули), содержащие наборы команд для построения изображений. В C++ для работы с графикой используется библиотека <graphics.h>. Для подключения этой библиотеки в программе записывается команда  #include <graphics.h>
Положение фигур задается координатами в графическом окне. Координатная плоскость в нем отличается от той, которую вы используете на уроках математики. Началом координат является верхний левый угол графического окна — точка (0; 0) (пример 14.1). Координаты задают порядковый номер пикселя по горизонтали и вертикали, поэтому они могут быть только целыми числами. Отсчет значений координаты х происходит слева направо, а координаты y — сверху вниз. По умолчанию создается графическое окно размером 640 × 480 пикселей.
Графическое окно среды программирования с изображением координатных осей и точки с координатами (70, 40) будет выглядеть следующим образом. Точка расположена на расстоянии 70 пикселей от левого края окна и на расстоянии 40 пикселей от верхнего края. Размеры графического окна можно задать командой initwindow (x, y)
В скобках указаны размеры окна по горизонтали и вертикали.
Координата X задается слева направо. Т.е. чем больше X, тем правее точка. 
Координата Y задается сверху вниз. Т.е. чем больше Y, тем ниже точка. 
Максимальные X - это ширина окна. Максимальное Y -     это высота окна.
© 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.com

 Первые компьютеры не имели возможностей работы с графикой. На печатающих устройствах выводились «картинки», состоящие из символов . В 1958 г. был запущен компьютер Lincoln TX-2, впервые использующий графический экран. В 1981 г. начали применять цвета. В графическом режиме при разрешении 320 х 200 пикселей использовались 4 цвета из стандартных палитр: пурпурный, сине-зеленый, белый, черный или красный, зеленый, желтый, черный. (примеры рисунков в виде такой графики можно посмотреть по ссылке https://www.asciiart.eu/buildings-and-places/houses).

14.2. Основные графические примитивы 

Рассмотрим команды для рисования графических примитивов (справочная информация):

void arc( int x, int y, int stangle, int endangle, int radius ); // дуга
void bar( int left, int top, int right, int bottom ); // закрашенный прямоугольник
void bar3d( int left, int top, int right, int bottom, int depth, int topflag ); // параллелепипед
void circle( int x, int y, int radius ); // круг 
void cleardevice( );  // очистить экран
void drawpoly(int n_points, int* points); // многоугольник 
void ellipse( int x, int y, int stangle, int endangle, int xradius, int yradius ); // эллипс
void fillellipse( int x, int y, int xradius, int yradius ); // закрашенный эллипс
void fillpoly(int n_points, int* points); // закрашенный многоугольник
void floodfill( int x, int y, int border ); // закрасить область, содержащую точку (x,y)
void line( int x1, int y1, int x2, int y2 ); // рисовать отрезок
void linerel( int dx, int dy ); //продолжить отрезок на вектор
void lineto( int x, int y ); // рисовать линию из текущей точки в заданную
void pieslice( int x, int y, int stangle, int endangle, int radius ); //сектор круга
void putpixel( int x, int y, int color ); // нарисовать точку
void rectangle( int left, int top, int right, int bottom ); // прямоугольник (контур)
void sector( int x, int y, int stangle, int endangle, int xradius, int yradius ); // сектор эллипса

Ещё подробнее можно узнать по ссылкам:

Чтобы задать цвет изображаемого объекта, используется оператор setcolor(номер цвета); Таблица цветов в Си (можно как в шаблоне использовать из англоязычные названия). 
0 черный 
1 синий 
2 зеленый 
3 морской волны 
4 красный 
5 фиолетовый 
6 коричневый 
7 светло-серый 
8 темно-серый 
9 светло-синий 
10 светло-зеленый 
11 светлый морской волны 
12 светло-красный 
13 светло-фиолетовый 
14 желтый 
15 белый 

setcolor(4) ;// устанавливаем красный цвет 

Отображение точки

Для рисования точки в графических программах си используется оператор
putpixel (x, y, номер цвета );
x, y – координаты точки
номер цвета – цвет, которым будет отображена точка

Отображение линии

Для рисования отрезка в графических программах си используется оператор
line( int x1, int y1, int x2, int y2 );
x1, y1 – координаты одного конца отрезка
x2, y2 – координаты другого конца отрезка

Отображение окружности

Для рисования окружности в графических программах си используется оператор
circle( int x, int y, int radius );
 x, y – координаты центра окружности r - радиус окружности 
Пример
Отображение окружности белого цвета с центром 100, 100 и радиусом 20. 
setcolor(15);// устанавливаем цвет рисования 15 — белый 
circle(100,100, 20);// рисуем окружность с центром 100, 100 и радиусом 20 

Отображение прямоугольника 
Для рисования прямоугольной рамки в графических программах си используется оператор
rectangle (x1, y1, x2, y2); 
x1, y1 – координаты верхнего левого угла прямоугольника 
x2, y2 – координаты нижнего правого угла прямоугольника 
Чтобы задать цвет рамки необходимо предварительно установить цвет рисования с помощью оператора setcolor(номер цвета); 
Для отображения закрашенного прямоугольника в Си используются два оператора. 
setfillstyle ( 1, номер цвета ); 
bar (x1, y1, x2, y2); 
x1, y1 – координаты верхнего левого угла прямоугольника 
x2, y2 – координаты нижнего правого угла прямоугольника 

Пример 14.4. Написать программу, которая строит изображение домика,    используя процедуры Line, Lineto, Rectangle, Circle.
    Рисунок состоит из: прямоугольников, отрезков, круга. Для расчета координат рекомендуется предварительно сделать рисунок на листе бумаги в клеточку.
//Дом 
 rectangle(100,200,400,450);
 //Окно
 rectangle(200,250,300,350);
 line(250, 250, 250, 350);
 line(200, 300, 300, 300);
 //Крыша
 moveto(100,200);
 lineto(250, 0);
 lineto(400, 200);
 circle(250, 125, 30);
Результат справа от программы:

14.4. Работа с пером и кистью 
В графических редакторах, прежде чем рисовать какие-либо фигуры, устанавливают их цвет. Обычно выбирают два цвета. 
Цвет 1 определяет цвет линий и контуров фигур, Цвет 2 используется для заливки фигур. Кроме того, можно изменять стиль линий и заливки, а также определять толщину линий.     
Команды для установки цвета и стиля записывают перед командой рисования фигуры. Эти команды действуют до тех пор, пока цвет или стиль не будет изменен.  Для фигур по умолчанию установлена заливка белым цветом. Если цвет кисти выбрать до рисования фигуры, то фигура будет закрашена установленным цветом. Цвет уже нарисованной фигуры можно изменить с помощью команды заливки: floodfill(x,y,c); — заливает ограниченную область одного цвета цветом c, начиная с точки внутри области (x,y) 
Закрашивание ограниченной области в Си
Чтобы закрасить определенным цветом целую ограниченную область в графической программе си используются два оператора.
setfillstyle (1, цвет закраски );
floodfill (x, y, цвет границы области);
x, y – координаты внутри области
цвет закраски – цвет , которым будет закрашиваться область
цвет границы области – цвет границы закрашиваемой области

Пример закрашенного круга в графических программах си 
setcolor(15);// устанавливаем цвет рисования 15 — белый 
circle(100,100, 20);// рисуем окружность с центром 100, 100 и радиусом 20 
setfillstyle ( 1, 15 ); // устанавливаем цвет заполнения круга белый -15 
floodfill (100, 100, 15); // заполняем окружность, указывая точку внутри ее – центр 

Пример графической программы на си (графическая программа на си рисует автомобиль). 

 initwindow(500, 500);// инициализируем графическое окно 
// рисуем кузов 
setfillstyle (1,4 ); // устанавливаем вид заливки 1 -полный, цвет заливки 4 — красный 
bar(100, 150, 200, 170);// закрашенный прямоугольник нижняя часть кузова 
bar(120, 150, 170, 130);// закрашенный прямоугольник верхняя часть кузова 
// рисуем колеса 
setcolor(15); // устанавливаем цвет колеса 
circle(120, 170, 10); // левое колесо окружность ниже кузова 
circle(170, 170, 10); // правое колесо окружность ниже кузова setfillstyle (1,8); // устанавливаем вид заливки полный — 1 цвет серый — 8 
floodfill(120,170,15); // закрашиваем круг левого колеса до границы круга цветом 15 floodfill(170,170,15); // закрашиваем круг левого колеса до границы круга цветом 15 
getch(); // ждем нажатия кнопки 
closegraph(); // выход из графического режима 

Функция setlinestyle() определяет внешний вид линии, рисуемой какой-либо графической функ­цией.

Элемент style содержит стиль линии. Он может принимать одно из следующих перечисленных значений, определенных в файле graphics.h:

ВеличинаЗначение
SOLID_LINEНепрерывная линия
DOTTED_LINEТочечная линия
CENTER_LINEШтрих-пунктирная линия
DASHED_LINEПунктирная линия
USERBIT_LINEЛиния, определяемая пользователем

Если параметр style равен USERBIT_LINE, то 16-разрядный шаблон pattern определяет внешний вид линии. Каждый разряд шаблона соответствует одному пикселю. Если соответствующий бит шаблона установлен, то пиксель включен.

Параметр width может принимать одно из следующих значений:

ВеличинаЗначение
NORM_WIDTHЛиния шириной в 1 пиксель
THICK_WIDTHЛиния шириной в 3 пикселя

Функция setfillstyle() устанавливает стиль и цвет заливки, используемой различными графичес­кими функциями. Величина параметра color должна быть допустимой для текущего видеорежи­ма.

Название        ВеличинаЗначение
EMPTY_FILL    0Заливка цветом фона
SOLID_FILL    1Сплошная заливка цветом
LINE_FILL    2Заливка линиями
LTSLASH_FILL3Заливка тонкими побочными диагоналями
SLASH_FILL4Заливка побочными диагоналями
BKSLASH_FILL5Заливка главными диагоналями
LTBKSLASH_FILL6Заливка тонкими главными диагоналями
HATCH_FILL7Заливка тонкой решеткой
XHATCH_FILL8Заливка решеткой
INTERLEAVE_FILL9Чересстрочная заливка
WHITE_DOT_FILL10Заливка точками, далеко отстоящими друг от друга
CLOSE_DOT_FILL11Заливка плотно расположенными точками
USER_FILL12Заливка шаблоном пользователя


А сейчас дорисуем программу, которая выше была представлена для рисования домика:
//Дом (коробка)
 setfillstyle(SOLID_FILL,BLUE);
 bar(100,200,400,450); //закрашенный прямоугольник (с заливкой)
 setcolor(RGB(255,0,0)); //так можно обозначить красный цвет (RED=255, GREEN=0, BLUE=0)
 rectangle(100,200,400,450);// красный контур прямоугольника
 //Окно
 setfillstyle(SOLID_FILL,YELLOW); //заливка сплошная жёлтая
 bar(200,250,300,350);  //прямоугольник с заливкой
 setlinestyle(DOTTED_LINE,RED,2); //стиль линии - пунктир красный в 2 пикселя
 line(250,250,250,350); //вертикальная линия
 line(200,300,300,300); //горизонтальная линия
 //Крыша
  setlinestyle(SOLID_LINE,RED,1);  //стиль линии - сплошной красный 1 пиксель
  setcolor(RED); // без этой команды - дальше протекает заливка на весь лист
 line(100, 200, 250, 0);
 line(250, 0, 400, 200);
 line(100, 200, 400, 200);
 setfillstyle(SOLID_FILL, 5); //установка цвета заливки - сплошная фиолетовая
 floodfill (390, 193, RED); //заливка (внутренняя точка крыши с цветом контура - красный)
// после этой команды заливка уже сработает
 setlinestyle(SOLID_LINE,RED,2); //установка стиля линии - сплошной красный в 2 пикселя
 circle(250, 125, 30); // рисуем окружность центр(250, 125) радиус 30
 setfillstyle(HATCH_FILL,LIGHTGREEN); // установка клетки светло-зелёной
 floodfill (252, 125, RED); // заливка начиная с точки внутри окружности, цвет окружности - красный)
В Dev C++ не сработала пунктирная линия на окнах. Причины не понятны. Если запускать только код:
setcolor(RED);
setlinestyle(c, 0, 1); 
 line(250,250,250,350); 
 line(200,300,300,300);
выводит пунктирные линии на окне. Буду благодарна, если кто-то разгадает загадку.

В графическом режиме можно выводить в графическое окно тексты и числа. 
outtextxy(x, y, z); — выводит строку о z в прямоугольник с координатами левого верхнего угла (x, y).
Если нужно вывести строку, то ее символы заключают в кавычки. Функция settextstyle() устанавливает активный шрифт, используемый функциями графического вывода текста. Также устанавливается направление и размер символов.
Параметр font определяет тип используемого шрифта. По умолчанию используется аппаратно определенный растровый шрифт 8x8. Можно придать переменной font одно из следующих значений:
МакросВеличинаШрифт
DEFAULT_FONT0Растровый шрифт 8x8, устанавливаемый по умолчанию
TRIPLEX_FONT1Штриховой триплексный шрифт
SMALL_FONT2Штриховой малый шрифт
SANS_SERIF_FONT3Штриховой рубленый шрифт
GOTHIC_FONT4Штриховой готический шрифт
SCRIPT_FONT5Штриховой рукописный шрифт
SIMPLEX_FONT6Штриховой симплексный рукописный шрифт
TRIPLEX_FONT7Штриховой триплексный рукописный шрифт
COMPLEX_FONT8Штриховой комплексный шрифт
EUROPEAN_FONT9Штриховой европейский шрифт
BOLD_FONT10Штриховой жирный шрифт
Направление, в котором выводится текст (или слева направо, или снизу вверх) определяется величиной элемента direction, который может быть либо HORIZ_DIR (0) либо VERT_DIR (1).
Параметр size является множителем, который позволяет увеличивать размеры символов. Он может принимать значения от 0 до 10.
Пример вывода текста:
outtext("Normal ");

/* готический шрифт удвоенного размера */
settextstyle(GOTHIC_FONT, HORIZ_DIR, 2);
outtext("Gothic ");

/* триплексный шрифт удвоенного размера */
settextstyle(TRIPLEX_FONT, HORIZ_DIR, 2);
outtext("Triplex ");

/* рубленый шрифт 7-кратного размера */
settextstyle(SANS_SERIF_FONT, HORIZ_DIR, 7);
outtext ("Sans serif");

Для вертикального вывода текста (снизу вверх) лучше назначить точку, с которой будет текст выводиться на экране, чтобы он точно поместился в указанном графическом окне.
    settextstyle(GOTHIC_FONT, VERT_DIR, 2);
    outtextxy(50,100,"Gothic ");

Вопросы для повторения:
1. Какая библиотека используется для подключения графики в PascalABC? 
2. Как определена система координат в графическом окне? 
3. Как задать размеры графического окна? 
4. Как найти описание графических примитивов в справочнике? 
5. Как можно изменить цвет линий, заливки? 
6. Как вывести текст в графическом окне?


© 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.com
© 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.com
© 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.com© 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.comЧтобы задать цвет изображаемого объекта, используется оператор setcolor(номер цвета); Таблица цветов в Си. 0 черный 1 синий 2 зеленый 3 морской волны 4 красный 5 фиолетовый 6 коричневый 7 светло-серый 8 темно-серый 9 светло-синий 10 светло-зеленый 11 светлый морской волны 12 светло-красный 13 светло-фиолетовый 13 светло-фиолетовый 14 желтый 15 белый setcolor(4) ;// устанавливаем красный цвет © 2021, Авторские права защищены! Ссылка при копировании обязательна! | Источник: light-electric.comм

Комментариев нет:

Отправить комментарий