Qt GUI: Mastering Element Positioning with Coordinates in QPainter

Understanding QPainter

• It offers a rich set of functions to draw lines, shapes, text, images, and more.
• QPainter is a fundamental class in Qt's GUI framework that empowers you to create various graphical elements on widgets and other paint devices.

QPainter::x - Not a direct member

Coordinate System in QPainter

• QPainter employs a default coordinate system where:
  • The origin (0, 0) is typically located at the top-left corner of the paint device you're drawing on (like a widget).
  • The x-axis extends to the right, and the y-axis goes down.

Using Coordinates for Drawing

• For instance, drawLine(x1, y1, x2, y2) draws a line from point (x1, y1) to point (x2, y2). Here, x1 and x2 represent the horizontal positions on the x-axis.
• When you use QPainter functions to draw elements, you specify their positions using coordinates relative to this system.

Common Scenarios with Coordinates

1. • To draw a circle at (50, 30) with a radius of 20:

   QPainter painter(widget);
   painter.drawEllipse(50, 30, 20, 20);
   

   • In this case, 50 is the x coordinate (horizontal position) of the circle's center.

2. Relative Positioning
   

   • You can use relative positioning by calculating coordinates based on the widget's size or other factors.
   • For example, to draw a rectangle at the bottom-right corner with a width of 100 and a height of 50:

   int widgetWidth = widget->width();
   int widgetHeight = widget->height();
   painter.drawRect(widgetWidth - 100, widgetHeight - 50, 100, 50);
   

Key Points

• Leverage coordinates to create diverse graphical elements on your Qt widgets.
• Understand the origin and direction of the axes to position elements accurately.

---

Drawing a Line with Specific Coordinates

#include <QtWidgets>

class MyWidget : public QWidget {
  Q_OBJECT

public:
  MyWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
  void paintEvent(QPaintEvent *event) override {
    QPainter painter(this);

    // Draw a blue line from (20, 50) to (100, 150)
    painter.setPen(QPen(Qt::blue, 2));
    painter.drawLine(20, 50, 100, 150);
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);
  MyWidget widget;
  widget.show();
  return app.exec();
}

This code creates a MyWidget that draws a blue line from (20, 50) to (100, 150) using drawLine. The x coordinates are 20 and 100, representing the horizontal starting and ending points of the line.

Drawing a Rectangle at a Specific Location and Size

#include <QtWidgets>

class MyWidget : public QWidget {
  Q_OBJECT

public:
  MyWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
  void paintEvent(QPaintEvent *event) override {
    QPainter painter(this);

    // Draw a red rectangle with top-left corner at (30, 80), width 120, and height 60
    painter.setPen(QPen(Qt::red));
    painter.drawRect(30, 80, 120, 60);
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);
  MyWidget widget;
  widget.show();
  return app.exec();
}

This code creates a MyWidget that draws a red rectangle with its top-left corner at (30, 80). The width is 120 and the height is 60. The x coordinate 30 specifies the horizontal position of the rectangle's top-left corner.

Drawing Text with Relative Positioning

#include <QtWidgets>

class MyWidget : public QWidget {
  Q_OBJECT

public:
  MyWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
  void paintEvent(QPaintEvent *event) override {
    QPainter painter(this);

    // Get widget width and height
    int widgetWidth = width();
    int widgetHeight = height();

    // Draw text "Qt Programming" centered horizontally and 20 pixels from the bottom
    painter.setFont(QFont("Arial", 16));
    painter.setPen(Qt::black);
    int textWidth = painter.fontMetrics().width("Qt Programming");
    int textX = (widgetWidth - textWidth) / 2;  // Center the text horizontally
    int textY = widgetHeight - 20;
    painter.drawText(textX, textY, "Qt Programming");
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);
  MyWidget widget;
  widget.show();
  return app.exec();
}

This code creates a MyWidget that displays the text "Qt Programming" centered horizontally and 20 pixels from the bottom. It calculates the textX coordinate based on the widget's width and the text's width to achieve the centering effect.

---

Using Separate x and y Coordinates

• The most common approach is to use separate x and y coordinates as arguments to QPainter functions. These functions typically take two coordinates for the starting point or position of the element you're drawing.

For example:

painter.drawLine(x1, y1, x2, y2);  // Draw line from (x1, y1) to (x2, y2)
painter.drawRect(x, y, width, height);  // Draw rectangle at (x, y) with width and height

• In these examples, x and y represent the horizontal and vertical coordinates of the starting point, respectively.

QPoint and QRect

• You can use QPoint and QRect classes to represent positions and dimensions using coordinates. These classes offer convenience methods to access and manipulate coordinates.

QPoint startPoint(10, 20);  // Point at (10, 20)
QRect rectangle(50, 30, 80, 60);  // Rectangle at (50, 30) with width 80 and height 60

painter.drawLine(startPoint, endPoint);  // Draw line from startPoint to endPoint
painter.drawRect(rectangle);  // Draw rectangle using rectangle object

• If you need to position elements relative to the size of the widget you're drawing on, you can retrieve the widget's width and height using width() and height() methods. Then, calculate the desired coordinates based on these values.

int widgetWidth = width();
int widgetHeight = height();

int centerX = widgetWidth / 2;  // Horizontal center of the widget
int bottomY = widgetHeight - 20;  // 20 pixels from the bottom

painter.drawText(centerX, bottomY, "Text");  // Draw text centered horizontally near the bottom