Основы GDI+ в Windows Forms

1. Основы GDI+ в Windows Forms

2. GDI+ — что это и зачем?

GDI+ (Graphics Device Interface) — это
встроенный в Windows механизм для рисования.
Где применяется:
• Рисование графиков и диаграмм
• Создание простых игр (змейка, арканоид)
• Кастомные элементы управления (круглые кнопки,
свои индикаторы)
• Анимация
Простыми словами: Вы говорите программе
«нарисовать линию от (10,10) до (100,100)», и
она рисует.

3. GDI+ — что это и зачем?

4. Graphics и Pen

Чтобы рисовать, нужны два объекта:
1.Graphics — это «холст» или «кисть
программиста». Через
него
мы отдаём
команды:
DrawLine,
DrawRectangle,
FillEllipse
2.Pen — это «ручка». Определяет цвет, толщину
линии, тип (пунктир).
// Внутри события Paint или в любом месте, но с
вызовом CreateGraphics()
• Graphics g = this.CreateGraphics();
Но правильный способ — использовать событие Paint у формы или
элемента.

5. Событие Paint — главное место для рисования

Paint — событие, которое возникает, когда Windows решает, что форму
нужно перерисовать (при открытии, изменении размера, после
вызова Invalidate()).
• Правильная структура:
private void Form1_Paint(object sender,
PaintEventArgs e)
{
Graphics g = e.Graphics; // Берём готовый
холст
// ...
команды
рисования
Золотое
правило: Никогда
не рисуйте один раз (в кнопке «Нарисовать»).
Всегда кладите рисунок в Paint и для обновления вызывайте this.Invalidate();
}

6. Первые фигуры (Pen)

Команда
Что делает
Пример
DrawLine(pen,
x1, y1, x2, y2)
Линия
g.DrawLine(Pens
.Black, 10, 10,
100, 10);
DrawRectangle(p
en, x, y, w, h)
Прямоугольник
(контур)
g.DrawRectangle
(Pens.Red, 50,
50, 80, 40);
g.DrawEllipse(P
ens.Blue, 100,
50,
Важно: Координаты — в пикселях.100,
(0,0)
—50);
DrawEllipse(pen
, x, y, w, h)
Эллипс/Окружнос
ть
это левый верхний угол. X растёт вправо, Y —
вниз.

7. Заливка цветом (SolidBrush)

Pen рисует контур. Brush — заливает внутренность.
• SolidBrush brush = new SolidBrush(Color.Green);
• g.FillRectangle(brush, 50, 50, 80, 40);
• g.FillEllipse(brush, 100, 100, 50, 50);
Есть готовые кисти: Brushes.Red, Brushes.Blue. Но для своих цветов
создаём
new SolidBrush(Color.AliceBlue).

8. Текст тоже рисуется

• Рисовать текст на холсте тоже можно через GDI+.
// Кисть для текста
SolidBrush textBrush = new
SolidBrush(Color.Black);
// Шрифт
Font drawFont = new Font("Arial", 16);
// Координаты
PointF point = new PointF(10, 10);
g.DrawString("Привет, GDI+!", drawFont,
textBrush, point);

9. Практический пример — «Светофор»

• 1) создаем проект
• 2) даем название

10. Практический пример — «Светофор»

Переходим в
свойства
Кликаем на форму

11. Практический пример — «Светофор»

• 3) Нажимаем на «молнию»
• 4) Нажимаем в пустой свойство «paint»

12. Практический пример — «Светофор»

• 5) Здесь мы задаем команды рисования

13. Практический пример — «Светофор»

14. Практический пример — «Светофор»

Объяснение параметров:
•Brushes.Black — кисть чёрного цвета (заливка)
•100 — X координата левого верхнего угла
•50 — Y координата левого верхнего угла
•80 — ширина
•220 — высота

15. Практический пример — «Светофор»

• Рисуем три сигнала (круги)

16. Практический пример — «Светофор»

Как считали координаты:
• Корпус начинается с X=100, Y=50
• Круг диаметром 50 → отступаем 15 пикселей от края
корпуса
• X = 100 + 15 = 115
• Красный Y = 50 + 15 = 65
• Жёлтый Y = 65 + 50 + 20 = 135 (круг + отступ)
• Зелёный Y = 135 + 50 + 20 = 205

17. Практический пример — «Светофор»

• Добавляем переменную для состояния
Проблема: Все три горят одновременно! А нужно, чтобы
горел только один.
Решение: Создаём переменную, которая запоминает, какой
цвет сейчас активен.
В самом верху кода (перед конструктором):

18. Практический пример — «Светофор»

Меняем Paint — добавляем условия
Теперь вместо трёх ярких кругов пишем проверки:

19. Практический пример — «Светофор»

• Добавляем кнопку «Сменить цвет»
В дизайнере:
1.Перетаскиваем Button из Toolbox на форму
2.В свойствах: Name = buttonNext
3.Text = Сменить цвет

20. Практический пример — «Светофор»

• Обработчик кнопки (дважды кликнуть по кнопке):

21. Практический пример — «Светофор»

• Самое важное — Invalidate()
Что будет, если НЕ написать this.Invalidate();?
•Переменная activeLight поменяется
•НО форма НЕ перерисуется
•Гореть будет по-прежнему красный (визуально ничего не
изменится)

22. Итог:

23. Итог:

24. Анимация — это просто много рисунков

Анимация = изменение координат + перерисовка.
Компоненты:
1.Таймер (Timer из Toolbox, интервал 20-50 мс)
2.Переменная (x, y — координаты шарика)
3.Событие Paint — рисует шарик по текущим x, y
4.Событие Timer_Tick — меняет x += dx, проверяет границы, вызывает Invalida

25. Итоги (запомнить)

1.Рисуем в событии Paint.
2.Чтобы обновить — вызываем this.Invalidate().
3.Pen — для контуров, Brush — для заливки.
4.Координаты: X → вправо, Y → вниз, (0,0) → левый верх
5.Анимация = Таймер + изменение переменных + Invalidat

26. Практические задания

Задание 1. Моя первая график
Сделайте: На форме нарисуйте:
• Домик (квадрат + треугольная крыша)
• Дым из трубы (три круга разного размера)
• Солнце в углу
Подсказки:
•Для крыши
используйте DrawLine или DrawPolygon.
•Дым — три FillEllipse.
•Всё рисуем внутри Form1_Paint.

27. Практические задания

Задание 2. Интерактивный рисунок
Сделайте: Нарисуйте мишень (3-4 концентрических круга). При клике
мышкой по форме в месте клика рисуется «попадание» — красный
крестик или маленький красный круг.
Подсказки:
•Сохраняйте список точек попаданий: List<Point> hits =
new List<Point>();
•В событии Form1_MouseClick добавляйте координаты в
список и вызывайте Invalidate().
•В Paint проходите по списку и рисуйте крестики.
•Не забудьте включить события MouseClick у формы.

28. Практические задания

Задание 3. График функции
Сделайте: Программа рисует график функции y = a * x² + b (парабола).
•Ползунки TrackBar для коэффициентов a (от -5 до 5) и b (от -10 до 10).
•При изменении ползунков график перерисовывается.
Подсказки:
•Сначала нарисуйте оси координат (линии X и Y через центр формы).
•Преобразуйте математические координаты в экранные: screenY =
centerY - mathY.
•Цикл for (int x = -width/2; x < width/2; x++) рисует точки.