Every developer has faced situations where an interface “almost works” but looks visually imprecise: elements shift by one pixel, proportions break during scaling, and colors behave unpredictably on different screens. These details are invisible in code, but they’re exactly what reveals unprofessional graphics.
This chapter carefully leads to the hidden foundation of any Qt graphics subsystem. It reveals how to think not in widgets but in geometry, and why understanding basic primitives directly affects interface stability, HiDPI adaptation, and visual result quality. In the process, you’ll discover that many Qt “magic” effects rely on simple but strictly defined mathematical models.
We’ll examine several key geometric entities, ways to combine them, and principles of working with color models that professional developers use. We’ll show how the same data can produce fundamentally different visual effects — without a single line of extra code.
Skipping this chapter often comes at a high price: wasted debugging time, visual artifacts, and complex workarounds where a proper basic approach would suffice.
This chapter includes ready-to-use code examples.
Chapter Self-Check
Why is the manhattanLength() method named that way and what does it calculate?Answer
Correct answer: The method is named after Manhattan’s perpendicular streets and returns the sum of absolute X and Y coordinate values, which is an approximation of real distance when moving along perpendicular axes.
What’s the key difference between HSV and HSL color models?Answer
Correct answer: HSV uses the Value (brightness) parameter where the maximum value gives pure color, while HSL uses Lightness where the middle value (127 or 0.5) gives full saturation and the maximum gives white.
Why is a separate black color (K) added to the CMYK model if theoretically it can be obtained by mixing the three primaries?Answer
Correct answer: Mixing three inks (cyan, magenta, and yellow) is wasteful of ink and in practice doesn’t produce pure black, so a separate black ink is used in printing.
What result will the operation QPoint(10, 20) + QPoint(30, 15) return and why?Answer
Correct answer: The result will be QPoint(40, 35), since adding points performs pairwise addition of their coordinates: X with X and Y with Y.
Why is the RGB model called “additive” and CMYK “subtractive”?Answer
Correct answer: RGB is additive — colors are created by adding light; the more light, the closer to white. CMYK is subtractive — colors are obtained by subtracting from white, indicating how much color to exclude.
How will the scale() method behave with Qt::KeepAspectRatioByExpanding mode when scaling size 320×240 to area 400×600?Answer
Correct answer: The size will become 800×600, as this mode can exceed the specified area bounds, filling its entire area while maintaining the original’s proportions.
What’s the practical difference between prefix ++size.rwidth() and postfix size.rwidth()++ increments?Answer
Correct answer: Postfix increment returns the old value before incrementing, prefix — increments first and returns the already updated value. This matters when assigning the result to a variable.
Why is the last component of the CMYK model called Key color rather than Black?Answer
Correct answer: The letter “B” from Black is already used for blue color in the RGB model, so to avoid confusion the term Key color is used.
When should you use QPoint instead of QPointF and vice versa?Answer
Correct answer: QPoint is used for pixel coordinates and cases requiring integer precision (widgets, windows). QPointF is applied for precise geometric calculations, scaling, and transformations where floating-point precision matters.
How do the lighter() and darker() methods of QColor class change color internally?Answer
Correct answer: Methods convert color from RGB to HSV, then multiply (lighter) or divide (darker) the Value component by the passed percentage multiplier, then convert back to RGB and return a new color object.
Why does the Y-axis in Qt point down rather than up like in mathematical coordinate systems?Answer
Correct answer: This corresponds to screen rendering order — pixel rows are output top to bottom, which is historically related to the operating principle of cathode ray tubes and modern displays.
Why is the HSL model often more intuitive for designers compared to RGB?Answer
Correct answer: HSL allows independently controlling color tone and lightness, which is closer to how humans perceive color, unlike RGB where changing one channel affects both hue and brightness simultaneously.
Practical Exercises
Easy Level
Distance Calculator Between Points
Create an application that accepts coordinates of two points (QPoint) and calculates: Manhattan distance between them, result of their addition and subtraction. Output all results to console and via QLabel in the window.
Hints: Use the manhattanLength() method for the object obtained by subtracting points. Point addition and subtraction operations are performed component-wise. Create QLabel to display results in a readable format.
Medium Level
Color Palette Generator
Develop an application that takes a base color in RGB format and generates a palette of 5 colors: original, two lighter shades (lighter with coefficients 120 and 150), and two darker (darker with coefficients 120 and 150). Display each color in a separate QLabel with appropriate background color and output its RGB and HSV values.
Hints: Use lighter() and darker() methods of QColor class. To set background color, use setStyleSheet with background-color parameter. Get RGB and HSV values through getRgb() and getHsv() methods. Arrange QLabels horizontally using QHBoxLayout.
Hard Level
Image Scaling Visualizer
Create an application to demonstrate three QSize scaling modes: IgnoreAspectRatio, KeepAspectRatio, and KeepAspectRatioByExpanding. User inputs original image size and target area, program visually displays all three scaling variants with rectangles of different colors with size labels. Add ability to select color model (RGB/HSV/HSL) for rectangle filling.
Hints: Use QPainter to draw rectangles. Create three QSize objects and apply the scale() method with different modes. For drawing, use QRect with coordinates calculated from QSize. Implement QComboBox for color model selection. Use QSpinBox for size input. Don’t forget to scale display if sizes are too large for the window.
💬 Join the Discussion!
Figured out color models and geometry classes? Have questions about when to use RGB versus HSL?
Maybe you have interesting findings on optimizing QColor work or practical tips on choosing between integer and floating-point geometry classes?
Share your experience working with graphics in Qt, ask questions, or help other readers understand computer graphics nuances!
