Как нарисовать прямоугольник в с windows h

Обновлено: 02.07.2024

Чтобы начать что-то простенькое рисовать, нужно понять несложные принципы. Двумерная графика построена на примитивах: используются самые простые фигуры, среди которых есть прямоугольник. Чтобы понять, как что-то своё рисовать, имеет смысл научиться эти примитивы просто выводить на экран. Потом уже имеет смысл что-то создавать из этих примитивов.

Сейчас я покажу способ рисований двумерного прямоугольника с помощью функций rectangle и bar

Собственно, теория теорией, но чем больше слов, тем больше могут кипеть мозги, поэтому вспомним, что чтобы нарисовать прямоугольник, достаточно знать всего две точки: левый верхний угол и правый нижний угол. У каждой точки по две координаты: T1 (x,y), T2 (x,y).

Можно посмотреть разницу между функциями rectangle и bar.
Код C++ Рисование двумерного прямоугольника

setfillstyle ( 1 , 12 ) ; //Устанавливаем цвет и стиль закраски rectangle ( 0 , 25 , 300 , 35 ) ; //Рисуем прямоугольник контуром bar ( 0 , 40 , 300 , 50 ) ; //Рисуем закрашенный прямоугольник без контура

Я использовал функцию setfillstyle, которая устанавливает цвет и стиль закраски, благодаря чему видно, что при рисовании прямоугольника контуром эта функция не имеет смысла, но при рисовании закрашенной области, получается некоторый эффект. Чтобы увидеть, как это срабатывает, достаточно своими руками менять значения внутри setfillstyle(стиль,цвет).

Думаю, этого может быть недостаточно для хорошего освоения только что начавшему, поэтому буду копать и объяснять немного глубже (даже если кому-то это кажется лишним).

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

Чтобы вытянуть прямоугольник в длину, нужно следить за параметрами по оси х
Чтобы вытянуть высоту прямоугольника, нужно следить за параметрами по оси y

Несложно увидеть и понять, что 300 > 10 ,
при этом большая часть тут относится к оси х,
так как часть по оси х больше, то прямоугольник будет вытянут в длину,
если бы часть по оси y была бы больше, то прямоугольник бы был вытянут в высоту.

Я думаю это достаточно просто, но, наверное, эти объяснения смогут кому-то пригодиться.

Круги

Предлагаю для начала потренироваться на простых геометрических фигурах типа Михаила круга. В этом деле большую помощь нам окажет класс CircleShape:

конструктор данного класса принимает в качестве параметра радиус нашей будущей фигуры (например, circle(50.f) );

закрасить фигуру можно с помощью метода setFillColor() , который очень похож на уже знакомый нам метод window.clear() ;

ну и для отображения круга в окне используется метод window.draw() .

using namespace sf ; // подключаем пространство имен sf // Объект, который, собственно, является главным окном приложения RenderWindow window ( VideoMode ( 200 , 200 ) , "SFML Works!" ) ; // Главный цикл приложения: выполняется, пока открыто окно // Пользователь нажал на «крестик» и хочет закрыть окно?

Результат выполнения программы:

Наша фигура может иметь контур. Для его создания используется метод setOutlineThickness(), а для цвета контура — setOutlineColor():

Результат выполнения программы:

Как уже знаем из предыдущего урока, при закрашивании фигур или фона можно еще указать значение прозрачности. Например, строкой setOutlineColor(Color(80, 220, 50, 150)) мы устанавливаем 150 в качестве значения прозрачности контура:

А теперь с помощью строки setOutlineColor(Color(80, 220, 50, 50)) мы установим 50 в качестве значения прозрачности контура:

Вы уже наверняка заметили, что наш круг выходит за границы окна, а это не совсем хорошо. Нужно его немного подвинуть, а поможет нам в этом метод move():

// Перемещаем круг для корректного отображения в окне

Результат выполнения программы:

Регулярные полигоны

-Welcome to the real world!

Отлично! Сейчас мы рассмотрим, как нарисовать и другие фигуры. Теперь ты готов узнать истину. Она заключается в том, что, на самом деле, ложки не существует, Нео твой круг — это немножко не круг, а многоугольник. Да-да, самый обычный многоугольник с большИм количеством вершин. Всё дело в том, что у конструктора класса CircleShape есть еще и второй параметр (помимо радиуса), который отвечает за количество вершин у создаваемой фигуры, и он по умолчанию равен 30 . Именно при значениях близких к 30, многоугольник становится мало отличимым от круга. В то же время, задавая этот параметр самостоятельно, мы можем получить абсолютно другие геометрические элементы. Не трудно догадаться, что 3 вершины — это треугольник, 4 вершины — квадрат, 5 вершин — пятиугольник, ну а 8 вершин — восьмиугольник (октагон).

Ниже приведен полный код матрицы программы, которая наглядно покажет создание данных фигур:

С помощью мыши рисую прямоугольник в окне. Рисуется вроде нормально. Есть недочеты вроде таких:

При рисовании мышка если возвращать мышь обратно, то область обновляется с артефактами.

Рисование идет поверх уже нарисованных линий(прямоугольников). Тут, в принципе, решаема проблема с рисованием линий, а не использованием функции Rectangle.

Но как грамотно решать артефакты? Скрин прикреплён. Код:

37.8k 10 10 золотых знаков 43 43 серебряных знака 79 79 бронзовых знаков 2,583 14 14 серебряных знаков 29 29 бронзовых знаков А у вас после представленного switch-case в функции ничего нет? @ВладимирМартьянов обновил, добавил полную оконную процедуру Попробуйте заменить все return 0; в switch-case на break, есть у меня подозрения, что дело в этом. У вас рисуется только один прямоугольник на всю программу. Если так и задумано, то чтобы избежать артефактов для 1 случая, то в событии WM_PAINT нужно сначала заливать все окно фоновым цветом, а потом уже рисовать прямоугольник. По 2 - у вас возможен только один прямоугольник, т.к. только для одного прямоугольника можно задать угловые точки, и рисование линиями или другие варианты тут не помогут. Тут либо нужно создавать динамический список рисуемых фигур, и при перерисовке их все перерисовывать, либо делать "backbuffer" в памяти, рисовать на нем, а при событии перерисовки копировать на окно. @Range, посмотрите ответы к этому вопросу: Вывод более 1 картинки с помощью WinApi на Си. Там описано, как работать с контекстом памяти, хотя задача в чем-то более сложная. Рисуете в контексте памяти, при перерисовке (WM_PAINT) переносите в окно с помощью BitBlt.

На основе вашего кода.

Основная мысль такая.

При перемещении мыши рисуем прямоугольник сразу на окне, а не на буфере в памяти, при изменении размера прямоугольника зарисовываем изменившуюся часть из буфера.

При отпускании мыши рисуем прямоугольник в буфере, и перерисовываем полностью.

С помощью Rectangle рисуем незакрашенные прямоугольники, для этого нужно в нужный контекст устройства выбрать пустую кисть ( NULL_BRUSH ).

При движении мыши смещаемая граница прямоугольника мерцает. Пока не придумал как побороть
Когда прямоугольник достаточно большой, перерисовка немного притормаживает, т.к. перерисовывается вся внутренняя область прямоугольника. В принципе можно сделать, чтобы перерисовывалась только область между старыми размерами прямоугольника и новыми. Возможно позже реализую этот вариант.

Получается как-то так:

В графическом режиме в Си можно отображать на экране различные фигуры, строить изображения, реализовывать анимацию и компьютерные игры.

Чтобы работать в графическом режиме в Си, необходимо перейти в графический режим, инициализировав графическое окно си initwindow ( ширина окна, высота окна ); в котором и будут рисоваться изображения. После завершения работы с графикой, необходимо выйти из графического режима с помощью команды closegraph();

Структура программы с графикой в Си.

Основные графические объекты в си, такие как точка, линия, окружность, прямоугольник задаются с помощью системы координат. Система координат в графическом режиме Си задается следующим образом. Верхний левый угол экрана имеет координату x=0 и y=0.

Координата X задается слева направо. Т.е. чем больше X, тем правее точка.

Координата Y задается сверху вниз. Т.е. чем больше Y, тем ниже точка.

Максимальные X это ширина окна. Максимальное Y это высота окна.

Задание цвета изображения в Си

Чтобы задать цвет изображаемого объекта, используется оператор setcolor(номер цвета);

Таблица цветов в Си.

0 черный
1 синий
2 зеленый
3 морской волны
4 красный
5 фиолетовый
6 коричневый
7 светло-серый
8 темно-серый
9 светло-синий
10 светло-зеленый
11 светлый морской волны
12 светло-красный
13 светло-фиолетовый
13 светло-фиолетовый
14 желтый
15 белый

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

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

Для рисования точки в графических программах си используется оператор

putpixel (x, y, номер цвета );

x, y – координаты точки

номер цвета – цвет, которым будет отображена точка

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

Для рисования отрезка в графических программах си используется оператор

x1, y1 – координаты одного конца отрезка

x2, y2 – координаты другого конца отрезка

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

Для рисования окружности в графических программах си используется оператор

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 – координаты нижнего правого угла прямоугольника

Закрашивание ограниченной области в Си.

Чтобы закрасить определенным цветом целую ограниченную область в графической программе си используются два оператора.

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); // заполняем окружность, указывая точку внутри ее – центр

Пример графической программы на си

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

Читайте также: