如何使用Qt QPainter绘制线性渐变弧?

问题描述

我正在尝试开发一个自定义QProgressBar，其外观如下图:

I'm trying to develop a custom QProgressBar that will look like the following image :

我创建了一个扩展QProgressBar的类并实现了paintEvent():

I created a class that extends QProgressBar and implemented the 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);}

这对绘制圆形进度条非常有用，但是我对进度条的线性渐变颜色遇到了麻烦.我尝试使用QLinearGradient对象创建QPen，并尝试将QPainter笔刷设置为QLinearGradient对象，但是两种策略均无效.可以用QPainter绘制具有线性渐变颜色的圆弧吗?

This works great to draw the circular progress bar, but I'm having trouble with the linear gradient color of the bar. I tried creating a QPen with a QLinearGradient object and I tried setting the QPainter brush to a QLinearGradient object, but neither strategy worked. Is it possible to draw an arc with QPainter that has a linear gradient color?

推荐答案

我知道这是一个老问题，但几天前我遇到了，我想我有一个解决方案.您要创建一个圆锥形渐变并剪辑要用作圆形加载条的磁盘.这是一个示例:

I know this is an old question but I came across it some days ago and I think I have a solution. What you want is to create a conical gradient and clip the disk you want to use as circular loading bar. Here is an example:

widget.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

widget.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();
}

结果是:

当然，这不是完整而精确的解决方案，但我认为这是实现所需目标所需要了解的一切.其余的细节并不难实现.

Of course, it is not the complete and exact solution but I think it is everything you need to know in order to achieve what you want. The rest are details not hard to implement.

这篇关于如何使用Qt QPainter绘制线性渐变弧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！