Как нарисовать линейную градиентную дугу с помощью Qt QPainter?

Я пытаюсь разработать пользовательскую QProgressBar это будет выглядеть следующим образом :

enter image description here

Я создал класс, который расширяет QProgressBar и реализовал paintEvent ():

void CircularProgressBar::paintEvent(QPaintEvent*) {

int progress = this->value();
int progressInDegrees = (double)(progress*360)/100;

int barWidth = 20;

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);

painter.setPen(QPen(Qt::black, barWidth, Qt::SolidLine,Qt::RoundCap));

painter.drawArc(barWidth/2, barWidth/2, this->width() - barWidth, this->height() - barWidth,
                90*16, progressInDegrees*-16);}

это отлично работает, чтобы нарисовать круговой индикатор выполнения, но у меня возникли проблемы с цветом линейного градиента бара. Я попытался создать QPen С QLinearGradient объект, и я попытался установить QPainter щетки к QLinearGradient объект, но ни одна стратегия работал. Можно ли нарисовать дугу с помощью QPainter, который имеет линейный градиент?

7
linear-gradients qpainter qt

2 ответов

Я знаю, что это старый вопрос, но я столкнулся с ним несколько дней назад, и я думаю, что у меня есть решение. Вы хотите создать конический градиент и закрепить диск, который вы хотите использовать в качестве круговой панели загрузки. Вот пример:

виджет.h:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class QPaintEvent;

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

    void setLoadingAngle(int loadingAngle);
    int loadingAngle() const;

    void setDiscWidth(int width);
    int discWidth() const;

protected:
    void paintEvent(QPaintEvent *);

private:
    int m_loadingAngle;
    int m_width;
};

#endif // WIDGET_H

виджет.cpp:

#include "widget.h"

#include <QPaintEvent>
#include <QPainter>
#include <QConicalGradient>
#include <QPen>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    m_loadingAngle(0),
    m_width(0)
{
}

Widget::~Widget()
{
}

void Widget::setLoadingAngle(int loadingAngle)
{
    m_loadingAngle = loadingAngle;
}

int Widget::loadingAngle() const
{
    return m_loadingAngle;
}

void Widget::setDiscWidth(int width)
{
    m_width = width;
}

int Widget::discWidth() const
{
    return m_width;
}

void Widget::paintEvent(QPaintEvent *)
{
    QRect drawingRect;
    drawingRect.setX(rect().x() + m_width);
    drawingRect.setY(rect().y() + m_width);
    drawingRect.setWidth(rect().width() - m_width * 2);
    drawingRect.setHeight(rect().height() - m_width * 2);

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QConicalGradient gradient;
    gradient.setCenter(drawingRect.center());
    gradient.setAngle(90);
    gradient.setColorAt(0, QColor(178, 255, 246));
    gradient.setColorAt(1, QColor(5, 44, 50));

    int arcLengthApproximation = m_width + m_width / 3;
    QPen pen(QBrush(gradient), m_width);
    pen.setCapStyle(Qt::RoundCap);
    painter.setPen(pen);
    painter.drawArc(drawingRect, 90 * 16 - arcLengthApproximation, -m_loadingAngle * 16);
}

main.cpp:

#include "widget.h"
#include <QApplication>

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

    Widget w;
    w.setDiscWidth(20);
    w.setLoadingAngle(270);
    w.show();

    return a.exec();
}

в результате:

enter image description here

конечно, это не полное и точное решение, но я думаю, что это все, что вам нужно знать, чтобы достичь того, что вы хотите. Остальные детали нетрудно реализовать.

6

это решение не совсем то, что вам нужно; градиент идет сверху вниз, а не по кругу:

#include <QtWidgets>

class Widget : public QWidget
{
public:
    Widget() {
        resize(200, 200);
    }

    void paintEvent(QPaintEvent *) {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);

        const QRectF bounds(0, 0, width(), height());
        painter.fillRect(bounds, "#1c1c1c");

        QPen pen;
        pen.setCapStyle(Qt::RoundCap);
        pen.setWidth(20);

        QLinearGradient gradient;
        gradient.setStart(bounds.width() / 2, 0);
        gradient.setFinalStop(bounds.width() / 2, bounds.height());
        gradient.setColorAt(0, "#1c1c1c");
        gradient.setColorAt(1, "#28ecd6");

        QBrush brush(gradient);
        pen.setBrush(brush);
        painter.setPen(pen);

        QRectF rect = QRectF(pen.widthF() / 2.0, pen.widthF() / 2.0, width() - pen.widthF(), height() - pen.widthF());
        painter.drawArc(rect, 90 * 16, 0.65 * -360 * 16);
    }
};

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

    Widget w;
    w.show();

    return app.exec();
}

однако is дуга с линейным градиентом! : p

3