Understanding QRadialGradient::focalRadius() for Effective Color Distribution in Qt GUI

Purpose

• In QRadialGradient, the focalRadius() function retrieves the focal radius of the gradient, which is a crucial component in defining the color distribution.

Functionality

• The focalRadius establishes a point within the gradient circle where the color transition is most pronounced. Colors tend to be more saturated near the focal point and gradually fade outwards.
• A radial gradient emanates outward from a center point, with colors transitioning based on distance from that center.

How it Works

1. • You create a QRadialGradient object using constructors like:

     QRadialGradient gradient(center, radius, focalPoint);
     

     • center: The center point of the gradient (QPointF).
     • radius: The overall radius of the gradient circle (qreal).
     • focalPoint: The focal point within the circle (QPointF).

2. Focal Point Impact
   

   • The focalRadius is not explicitly set in the constructor but is determined by the focalPoint's position relative to the center and radius.
   • If the focalPoint lies inside the circle defined by center and radius, it becomes the focal radius.
   • If the focalPoint is outside the circle, it's adjusted to lie on the circle's perimeter, effectively setting the focal radius to the circle's edge.

3. Color Distribution
   

   • Colors in the gradient are distributed based on the distance from the center.
   • The area around the focal point experiences a sharper transition between colors.
   • As you move away from the focal point, the color change becomes more subtle.

Key Points

• To control the focal point and its influence on the color transition, you primarily use the focalPoint argument in the constructor or the setFocalPoint() function.
• focalRadius() is a read-only function, meaning it retrieves the value but doesn't allow direct modification.

Example

#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // Create a radial gradient with a center, radius, and focal point
    QRadialGradient gradient(QPointF(50, 50), 30, QPointF(30, 30)); // Focal point inside the circle

    // Use the gradient to paint a widget (replace with your widget)
    QWidget widget;
    widget.setFixedSize(100, 100);
    widget.setAutoFillBackground(true);
    widget.setPalette(QPalette(gradient));

    widget.show();

    return app.exec();
}

In this example, the focal point is set to (30, 30), which is within the circle defined by the center and radius. This will create a gradient with a more pronounced color change near that point.

---

Example 1: Focal Point Inside the Circle (Sharper Transition)

#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // Create a gradient with focal point inside the circle (stronger transition)
    QRadialGradient gradient(QPointF(50, 50), 30, QPointF(30, 30));

    // Paint a widget with the gradient
    QWidget widget;
    widget.setFixedSize(100, 100);
    widget.setAutoFillBackground(true);
    widget.setPalette(QPalette(gradient));

    widget.show();

    return app.exec();
}

This code creates a gradient with a center at (50, 50), a radius of 30, and a focal point at (30, 30). Since the focal point is inside the circle, the color transition will be more concentrated around that point.

Example 2: Focal Point Outside the Circle (Subtle Transition)

#include <QtWidgets>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // Create a gradient with focal point outside the circle (weaker transition)
    QRadialGradient gradient(QPointF(50, 50), 30, QPointF(70, 70));

    // Paint a widget with the gradient
    QWidget widget;
    widget.setFixedSize(100, 100);
    widget.setAutoFillBackground(true);
    widget.setPalette(QPalette(gradient));

    widget.show();

    return app.exec();
}

Here, the focal point is set to (70, 70), which is outside the circle defined by the center and radius. In this case, the focal point will be adjusted to the circle's edge, effectively setting the focal radius to the circle's limit. This creates a more subtle color transition throughout the gradient.

Example 3: Dynamically Changing Focal Point

#include <QtWidgets>

class GradientWidget : public QWidget {
    Q_OBJECT

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

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

        // Create a gradient with initial settings
        QRadialGradient gradient(QPointF(width() / 2, height() / 2), 30, QPointF(width() / 3, height() / 3));

        // Modify focal point based on mouse position (example)
        QPoint mousePos = mapFromGlobal(QCursor::pos());
        gradient.setFocalPoint(mousePos);

        painter.fillRect(rect(), gradient);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    GradientWidget widget;
    widget.setFixedSize(200, 200);
    widget.show();

    return app.exec();
}

This example demonstrates dynamically changing the focal point based on the mouse position. The paintEvent method creates a QRadialGradient and updates its focalPoint based on the current mouse location (mapFromGlobal(QCursor::pos())). As the mouse moves, the color transition in the gradient will shift accordingly.

---

1. • The primary way to influence the color transition in QRadialGradient is by setting the focalPoint. As discussed earlier, the position of the focalPoint relative to the center and radius determines the focal radius and the area of strongest color change.
   • You can dynamically adjust the focalPoint using setFocalPoint() based on user interaction, animation, or other logic to create varying effects.