Каждый разработчик сталкивался с ситуацией, когда интерфейс «почти работает», но визуально выглядит неточно: элементы смещаются на один пиксель, пропорции ломаются при масштабировании, а цвета на разных экранах ведут себя непредсказуемо. Эти мелочи незаметны в коде, но именно они выдают непрофессиональную графику.
Эта глава аккуратно подводит к скрытому фундаменту любой графической подсистемы Qt. Здесь раскрывается, как мыслить не виджетами, а геометрией, и почему понимание базовых примитивов напрямую влияет на стабильность интерфейсов, адаптацию под HiDPI и качество визуального результата. В процессе вы обнаружите, что многие «магические» эффекты Qt опираются на простые, но строго определённые математические модели.
>Рассматриваются несколько ключевых геометрических сущностей, способы их комбинирования, а также принципы работы с цветовыми моделями, которые используют профессиональные разработчики. Показано, как одни и те же данные могут давать принципиально разный визуальный эффект — без единой строки лишнего кода.
Пропуск этой главы часто обходится дорого: потерянным временем на отладку, визуальными артефактами и сложными костылями там, где достаточно правильного базового подхода.
В этой главе вы найдёте готовые к использованию примеры кода.
Самопроверка по главе
Почему метод manhattanLength() получил такое название и что он вычисляет?Ответ
Правильный ответ: Метод назван в честь перпендикулярных улиц Манхэттена и возвращает сумму абсолютных значений координат X и Y, что является приближением к реальному расстоянию при движении по перпендикулярным осям.
В чем ключевое различие между цветовыми моделями HSV и HSL?Ответ
Правильный ответ: HSV использует параметр Value (яркость), где максимальное значение дает чистый цвет, а HSL использует Lightness (светлоту), где среднее значение (127 или 0.5) дает полную насыщенность, а максимум — белый цвет.
Почему в модели CMYK добавлен отдельный черный цвет (K), если теоретически его можно получить смешением трех основных?Ответ
Правильный ответ: Смешение трех красок (голубой, пурпурной и желтой) неэкономично расходует чернила и на практике не дает чисто черного цвета, поэтому в печати используется отдельная черная краска.
Какой результат вернет операция QPoint(10, 20) + QPoint(30, 15) и почему?Ответ
Правильный ответ: Результат будет QPoint(40, 35), так как при сложении точек выполняется попарное сложение их координат: X с X и Y с Y.
Почему модель RGB называется “аддитивной”, а CMYK — “субтрактивной”?Ответ
Правильный ответ: RGB аддитивная (добавляющая) — цвета создаются добавлением света, чем больше света, тем ближе к белому. CMYK субтрактивная (вычитающая) — цвета получаются вычитанием из белого, указывая какое количество цвета исключить.
Как поведет себя метод scale() с режимом Qt::KeepAspectRatioByExpanding при масштабировании размера 320×240 до области 400×600?Ответ
Правильный ответ: Размер станет 800×600, так как этот режим может выходить за пределы заданной области, заполняя всю её площадь с сохранением пропорций оригинала.
В чем практическая разница между префиксным ++size.rwidth() и постфиксным size.rwidth()++ инкрементами?Ответ
Правильный ответ: Постфиксный инкремент возвращает старое значение перед увеличением, префиксный — увеличивает сначала и возвращает уже обновленное значение. Это важно при присваивании результата переменной.
Почему последняя компонента модели CMYK называется Key color, а не Black?Ответ
Правильный ответ: Буква “B” от Black уже задействована для синего цвета (Blue) в модели RGB, поэтому во избежание путаницы используется термин Key color.
Когда следует использовать QPoint вместо QPointF и наоборот?Ответ
Правильный ответ: QPoint используется для пиксельных координат и случаев, где нужна целочисленная точность (виджеты, окна). QPointF применяется для точных геометрических расчетов, масштабирования и трансформаций, где важна вещественная точность.
Как методы lighter() и darker() класса QColor изменяют цвет на внутреннем уровне?Ответ
Правильный ответ: Методы конвертируют цвет из RGB в HSV, затем умножают (lighter) или делят (darker) компонент Value на переданный множитель в процентах, после чего конвертируют обратно в RGB и возвращают новый объект цвета.
Почему в Qt ось Y направлена вниз, а не вверх, как в математической системе координат?Ответ
Правильный ответ: Это соответствует порядку отрисовки на экране — строки пикселей выводятся сверху вниз, что исторически связано с принципом работы электронно-лучевых трубок и современных дисплеев.
Почему модель HSL часто более интуитивна для дизайнеров по сравнению с RGB?Ответ
Правильный ответ: HSL позволяет независимо управлять цветовым тоном и светлотой, что ближе к тому, как человек воспринимает цвет, в отличие от RGB, где изменение одного канала влияет и на оттенок, и на яркость одновременно.
Практические задания
Простой уровень
Калькулятор расстояний между точками
Создайте приложение, которое принимает координаты двух точек (QPoint) и вычисляет: манхэттенское расстояние между ними, результат их сложения и вычитания. Выведите все результаты в консоль и через QLabel в окне.
Подсказки: Используйте метод manhattanLength() для объекта, полученного вычитанием точек. Операции сложения и вычитания точек выполняются покомпонентно. Создайте QLabel для отображения результатов в читаемом формате.
Средний уровень
Генератор цветовых палитр
Разработайте приложение, которое принимает базовый цвет в формате RGB и генерирует палитру из 5 цветов: исходный, два более светлых оттенка (lighter с коэффициентами 120 и 150) и два более темных (darker с коэффициентами 120 и 150). Отобразите каждый цвет в отдельном QLabel с фоном соответствующего цвета и выведите его значения в RGB и HSV.
Подсказки: Используйте методы lighter() и darker() класса QColor. Для установки цвета фона используйте setStyleSheet с параметром background-color. Получите значения RGB и HSV через методы getRgb() и getHsv(). Разместите QLabel горизонтально с помощью QHBoxLayout.
Сложный уровень
Визуализатор масштабирования изображений
Создайте приложение для демонстрации трех режимов масштабирования QSize: IgnoreAspectRatio, KeepAspectRatio и KeepAspectRatioByExpanding. Пользователь вводит исходный размер изображения и целевую область, программа визуально отображает все три варианта масштабирования прямоугольниками разных цветов с подписями размеров. Добавьте возможность выбора цветовой модели (RGB/HSV/HSL) для заливки прямоугольников.
Подсказки: Используйте QPainter для отрисовки прямоугольников. Создайте три QSize объекта и примените к ним метод scale() с разными режимами. Для отрисовки используйте QRect с координатами, рассчитанными из QSize. Реализуйте QComboBox для выбора цветовой модели. Используйте QSpinBox для ввода размеров. Не забудьте масштабировать отображение, если размеры слишком велики для окна.
💬 Присоединяйтесь к обсуждению!
Разобрались с цветовыми моделями и классами геометрии? Возникли вопросы о том, когда использовать RGB, а когда HSL?
Может быть, у вас есть интересные находки по оптимизации работы с QColor или практические советы по выбору между целочисленными и вещественными классами геометрии?
Поделитесь своим опытом работы с графикой в Qt, задайте вопросы или помогите другим читателям разобраться с нюансами компьютерной графики!
