Qt自绘系列-一堆甜甜圈

怼烎@ 2022-12-29 12:57 171阅读 0赞

> 使用QPainter画甜甜圈。

上手难度：⭐️  
![main\_page.png][main_page.png]

## 1. 实现 ##

1.  将甜甜圈绘制在`QPixmap`中，最后再绘制在窗口中。
2.  甜甜圈使用`QLinearGradient`实现渐变效果。
3.  设置画笔的宽度实现甜甜圈的宽度。
4.  最后使用`drawEllipse`方法画圆。

## 2. 核心代码 ##

1.  绘制单个甜甜圈代码。

QPixmap Donut::createOneDount(int radius, int width, const QColor &color)
    { 
        QPixmap pixmap = QPixmap(radius, radius);
        pixmap.fill(Qt::transparent);
    
        QPainter painter(&pixmap);
        painter.setRenderHint(QPainter::Antialiasing, true);
    
        QLinearGradient linearGradient(0, 0, radius, radius);
        linearGradient.setColorAt(0.0, color.light());
        linearGradient.setColorAt(0.8, color);
        linearGradient.setColorAt(1.0, color.dark());
        painter.setPen(QPen(QBrush(linearGradient), width));
    
    
        painter.translate(painter.pen().width()/2, painter.pen().width()/2);
        painter.drawEllipse(0,
                            0,
                            radius - painter.pen().width(),
                            radius - painter.pen().width());
        return pixmap;
    }

1.  绘制一堆甜甜圈实现代码。

void Donut::paintEvent(QPaintEvent *e)
    { 
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
    
        const QString colors[3][3] = { 
            { "#F9C46E", "#B6AFEA", "#402B0A"},
            { "#DEAB9E", "#ADD475", "#BF593E"},
            { "#6ABEEA", "#B97D1C", "#D5E9B9"},
        };
    
        for (int i = 0; i < 4; i++) { 
            for (int j = 0; j < 5; j++) { 
                painter.drawPixmap(qrand()%width(),
                                   qrand()%height(),
                                   createOneDount(200, 70, QColor(colors[j%3][i%3])));
            }
        }
    }

--------------------

## 4. 获取更多 ##

已付费用户，如需源码或技术交流，请在评论区留言QQ号，拉你进群，可在群文件获取。

[main_page.png]: /images/20221120/447c4848b62c443395060701d6dcea8c.png