Что такое GUI

GUI (Graphical User Interface) — графический пользовательский интерфейс. Это способ взаимодействия пользователя с программой через визуальные элементы: окна, кнопки, меню и т.д. Вместо набора текстовых команд в консоли, пользователь видит и нажимает на знакомые элементы.

GUI vs Консоль — в чем разница?

Сравнение консольного и графического интерфейса

Преимущества GUI для графического программирования:

• Интуитивно понятный интерфейс — пользователь сразу видит, что нужно делать без инструкций
• Визуальная обратная связь — цвета, анимации, движение показывают результат действия
• Возможность создания красивых приложений — своя палитра цветов, шрифты, изображения
• Одновременное отображение информации — на экране может быть много элементов сразу
• Интерактивность — приложение реагирует на клики, движения мыши, нажатия клавиш

Примеры GUI приложений

• Microsoft Word — текстовый редактор с меню, кнопками, форматированием
• Photoshop — графический редактор с палитрой, инструментами, слоями
• VLC Player — видеоплеер с кнопками управления и слайдером видео
• Visual Studio — среда разработки с множеством окон и инструментов

Растровая vs векторная графика

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

Растровая графика:

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

• Структура — изображение состоит из пикселей в сетке (матрице)
• Каждый пиксель имеет свой цвет — RGB или RGBA значение
• При увеличении теряется качество — видны отдельные квадратики (пиксельность)
• Большой размер файла — для каждого пикселя нужно хранить информацию
• Идеально для фотографий — много деталей и оттенков
• Примеры форматов — PNG, JPG, BMP, GIF

ASCII диаграмма растровой графики:

Принцип работы растровой графики

Векторная графика:

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

• Основаны на формулах — линии описываются уравнениями (y = mx + b)
• Масштабируется без потери качества — можно увеличить в любой раз, переформулировав математику
• Меньший размер файла — нужно хранить только формулы, не каждый пиксель
• Идеально для логотипов, иконок, графиков — четкие линии и простые формы
• Сложно для фотографий — нельзя описать миллионы оттенков формулами
• Примеры форматов — SVG, PDF, шрифты (TTF)

Сравнение таблица:

Сравнительная таблица растровой и векторной графики

Пиксели и система координат

Пиксель — это атомарная единица (минимальный неделимый элемент) на экране. Каждый пиксель имеет одноцветное значение. Система координат в компьютерной графике отличается от школьной математики!

Система координат в графике:

Система координат в Windows Forms

Работа с координатами в Visual Studio:

При работе с компонентами в дизайнере форм Visual Studio показывает координаты и размеры в окне Properties:

Окно свойств компонента в Visual Studio

Примеры:

• Location = (100, 50) → компонент находится на 100 пикселей слева и 50 пикселей сверху
• Size = (200, 100) → компонент имеет ширину 200 и высоту 100

Практический пример работы с координатами:

// Если форма имеет размер 800x600

// Получаем размеры формы
int formWidth = this.ClientSize.Width;   // 800
int formHeight = this.ClientSize.Height; // 600

// Вычисляем центр формы
int centerX = formWidth / 2;   // 400
int centerY = formHeight / 2;  // 300

// Рисуем точку в левом верхнем углу
g.FillEllipse(Brushes.Red, 0, 0, 5, 5);

// Рисуем точку в центре
g.FillEllipse(Brushes.Green, centerX, centerY, 5, 5);

// Рисуем точку в правом нижнем углу
g.FillEllipse(Brushes.Blue, formWidth - 5, formHeight - 5, 5, 5);

// Горизонтальная линия в середине по Y
g.DrawLine(Pens.Gray, 0, centerY, formWidth, centerY);

// Вертикальная линия в середине по X
g.DrawLine(Pens.Gray, centerX, 0, centerX, formHeight);

// Рисуем прямоугольник по центру
int rectWidth = 200;
int rectHeight = 100;
int rectX = centerX - rectWidth / 2;   // Центрирование по X
int rectY = centerY - rectHeight / 2;  // Центрирование по Y
g.DrawRectangle(Pens.Black, rectX, rectY, rectWidth, rectHeight);

Координаты компонента относительно формы:

Расположение компонента на форме

Вычисление координат:

• Левый верхний угол: (button.Location.X, button.Location.Y)
• Правый верхний угол: (button.Right, button.Location.Y)
• Левый нижний угол: (button.Location.X, button.Bottom)
• Правый нижний угол: (button.Right, button.Bottom)

Пример кода:

Button btn = new Button();
btn.Location = new Point(100, 100);
btn.Size = new Size(75, 23);

// Получаем координаты
int left = btn.Location.X;      // 100
int top = btn.Location.Y;       // 100
int right = btn.Right;          // 175 (100 + 75)
int bottom = btn.Bottom;        // 123 (100 + 23)

Цветовые модели

Цвет на экране создается различными моделями смешивания света. В компьютерной графике главная модель — RGB.

RGB (Red, Green, Blue):

Монитор создает цвет смешиванием трех цветов света — красного, зеленого и синего. Каждый компонент имеет интенсивность от 0 до 255.

• 0 = свет выключен
• 255 = свет на максимальной яркости
• Смешивание — RGB(255,255,255) = белый (все свечают), RGB(0,0,0) = черный (ничего не светит)

RGB примеры:

// Основные цвета
Color red = Color.FromArgb(255, 0, 0);       // Красный (R=255, G=0, B=0)
Color green = Color.FromArgb(0, 255, 0);     // Зеленый
Color blue = Color.FromArgb(0, 0, 255);      // Синий

// Вторичные цвета (смешивание двух основных)
Color yellow = Color.FromArgb(255, 255, 0);  // Красный + Зеленый
Color cyan = Color.FromArgb(0, 255, 255);    // Зеленый + Синий  (бирюзовый)
Color magenta = Color.FromArgb(255, 0, 255); // Красный + Синий  (малиновый)

// Ахроматические цвета
Color white = Color.FromArgb(255, 255, 255); // Все максимум
Color black = Color.FromArgb(0, 0, 0);       // Все минимум
Color gray = Color.FromArgb(128, 128, 128);  // Половина
Color darkGray = Color.FromArgb(64, 64, 64); // Четверть
Color lightGray = Color.FromArgb(192, 192, 192); // Три четверти

// Оттенки красного (меняя интенсивность)
Color brightRed = Color.FromArgb(255, 0, 0);    // Яркий красный
Color darkRed = Color.FromArgb(128, 0, 0);      // Темный красный
Color paleRed = Color.FromArgb(255, 128, 128);  // Бледный красный (добавили G и B)

Цветовой куб (визуализация RGB модели):

Визуализация цветовой модели RGB

ARGB — прозрачность (Alpha):

ARGB добавляет четвертый компонент — Alpha, который контролирует прозрачность. Это мощная техника для наложения изображений и создания эффектов.

• Alpha = 0 — полностью прозрачный (невидимый)
• Alpha = 255 — полностью непрозрачный (видимый)
• Alpha = 128 — полупрозрачный (50% видимый, 50% прозрачный)

// Примеры ARGB цветов с прозрачностью

// Полностью видимый красный
Color opaqueRed = Color.FromArgb(255, 255, 0, 0);
//                              A    R    G   B

// Полупрозрачный красный (50% видимости)
Color semiTransparentRed = Color.FromArgb(128, 255, 0, 0);

// Почти невидимый синий (10% видимости)
Color almostInvisibleBlue = Color.FromArgb(25, 0, 0, 255);

// Полностью прозрачный черный (невидимый, не используется)
Color fullyTransparent = Color.FromArgb(0, 0, 0, 0);

// Применение в рисовании с прозрачностью
Brush semiTransparentBrush = new SolidBrush(semiTransparentRed);
g.FillEllipse(semiTransparentBrush, 50, 50, 100, 100);
// Эллипс будет полупрозрачным, сквозь него будут видны элементы позади

Частые ошибки с ARGB:

// ❌ НЕПРАВИЛЬНО: забыли указать Alpha
// Color transparentRed = Color.FromArgb(255, 0, 0); 
// This is RGB, not ARGB! (Alpha по умолчанию = 255)

// ✅ ПРАВИЛЬНО: используйте 4 параметра для ARGB
Color semiTransparentRed = Color.FromArgb(128, 255, 0, 0);
//                                          ↑ обязательно Alpha

// ✅ Или используйте встроенный конструктор
Color simpleColor = Color.FromArgb(255, 128, 0); // RGB (3 параметра)
Color withAlpha = Color.FromArgb(128, Color.Red); // ARGB (Alpha, Color)

Практическое применение цветов в графике:

• Выделение элемента — более яркий цвет для активного элемента
• Отключенные кнопки — серый цвет вместо яркого
• Полупрозрачные слои — рисовать поверх друг друга с видимостью через них
• Градиенты — плавный переход от одного цвета к другому
• Чередование цветов — для шахматных доск или визуализации данных