QT Widget - 随便画个圆

简介

实现在界面中画一个圆, 其实目的是想画一个LED效果的圆。

代码

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QColor>
#include <QPen>class LEDWidget : public QWidget
{
public:LEDWidget(QWidget *parent = nullptr) : QWidget(parent) {}protected:void paintEvent(QPaintEvent *event) override{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);  // 反锯齿QPen pen;pen.setColor(QColor(128, 128, 128)); // 设置线颜色为浅灰色painter.setPen(pen);// 设置LED灯的颜色和大小
//        QColor ledColor(85, 239, 196); // 红色int ledSize = std::max(20, width() >= height() ? height() - 10 : width() - 10);QLinearGradient gradient(0, 0, width(), height());gradient.setColorAt(0, "#84fab0");gradient.setColorAt(1, "#8fd3f4");painter.setBrush(gradient);// 计算LED灯的位置int x = (width() - ledSize) / 2;int y = (height() - ledSize) / 2;// 绘制LED灯的主体
//        painter.setBrush(ledColor);painter.drawEllipse(x, y, ledSize, ledSize);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);LEDWidget widget;widget.show();return app.exec();
}

代码解读

1. 边框

		QPen pen;pen.setColor(QColor(128, 128, 128)); // 设置线颜色为浅灰色painter.setPen(pen);

此段使圆边框为浅灰色是看上去有点浅影子效果，更像LED灯;

2. 填充

		QLinearGradient gradient(0, 0, width(), height());gradient.setColorAt(0, "#84fab0");gradient.setColorAt(1, "#8fd3f4");painter.setBrush(gradient);

从这个网址 添加链接描述 取色, 并实现渐变色效果, 模拟灯的亮区效果; 这里可以改成全局设置颜色，设置后按照颜色改为其他渐变色效果;

4. 圆的大小

int ledSize = std::max(20, width() >= height() ? height() - 10 : width() - 10);// 计算LED灯的位置int x = (width() - ledSize) / 2;int y = (height() - ledSize) / 2;

第一个用于确保最小的圆 及 自适应效果；
计算x, y位置保持居中

效果