最近看了一些关于QPainter的示例,发现QPaint还是挺厉害的,但是需要借助对Qt坐标系统的理解,清晰的知道Painter当前所在的位置,就能绘制出自己想要的图像,下面展示一个小Demo,通过QPainter绘制一个充电电池。
h实现代码
#ifndef DCWIDGET_H
#define DCWIDGET_H
#include <QWidget>
#include <QPoint>
#include <QTimer>
QT_BEGIN_NAMESPACE
namespace Ui { class DCWidget; }
QT_END_NAMESPACE
class DCWidget : public QWidget
{
Q_OBJECT
public:
DCWidget(QWidget *parent = nullptr);
~DCWidget();
protected:
virtual void resizeEvent(QResizeEvent *event) override;
virtual void paintEvent(QPaintEvent *event) override;
void showEvent(QShowEvent *event) override;
private:
Ui::DCWidget *ui;
QTimer timer;
int m_CurrentDCPer;
QColor mCurrentDCCol;
int mRoundVal;
QPoint m_LeftTop;
QPoint m_LeftBottom;
QPoint m_RightTop;
QPoint m_RightBottom;
QPoint m_Right_L_Top;
QPoint m_Right_R_Bottom;
QPoint m_C1;
QPoint m_C2;
QPoint m_C3;
QPoint m_C4;
void analysisColor(int per);
public slots:
void slotAddDC();
};
#endif // DCWIDGET_H
cpp代码实现
#include "dcwidget.h"
#include "ui_dcwidget.h"
#include <QResizeEvent>
#include <QPaintEvent>
#include <QPainter>
#include <QPen>
#include <QDebug>
DCWidget::DCWidget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::DCWidget)
{
ui->setupUi(this);
m_CurrentDCPer = 50;
mCurrentDCCol = QColor();
timer.setInterval(100);
connect(&timer,&QTimer::timeout,this,&DCWidget::slotAddDC);
timer.start();
}
DCWidget::~DCWidget()
{
delete ui;
}
void DCWidget::resizeEvent(QResizeEvent *event)
{
if(this->height() >= this->width())
{
mRoundVal = this->width()*(20.0/600.0);
}
else
{
mRoundVal = this->height()*(20.0/600.0);
}
if(mRoundVal < 5)
{
mRoundVal=2;
}
qDebug() << mRoundVal << this->geometry();
m_LeftTop = QPoint(mRoundVal,mRoundVal);
m_RightBottom = QPoint(this->width()-3*mRoundVal,this->height()-mRoundVal);
m_Right_L_Top = QPoint(m_RightBottom.x()+0.5*mRoundVal,m_LeftTop.y()+(m_RightBottom.y() - m_LeftTop.y())/3);
m_Right_R_Bottom = QPoint(m_RightBottom.x() +1*mRoundVal,m_LeftTop.y()+2*(m_RightBottom.y() - m_LeftTop.y())/3);
if(m_Right_L_Top.x()-m_LeftTop.x() <= 1)
{
m_Right_L_Top.setX(m_LeftTop.x()+3);
}
QWidget::resizeEvent(event);
}
void drawCenteredText(QPainter *painter, const QRect &rect, const QString &text) {
QFontMetrics metrics = painter->fontMetrics();
int textWidth = metrics.width(text);
int textHeight = metrics.height();
int x = rect.x() + (rect.width() - textWidth) / 2;
int y = rect.y() + (rect.height() + textHeight*2/3) / 2;
painter->drawText(x, y, text);
}
void DCWidget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QPen pen;
pen.setColor(QColor(128,128,128));
pen.setWidth(2);
painter.setPen(pen);
painter.drawRoundedRect(QRect(m_LeftTop,m_RightBottom),1,1);
pen.setColor(mCurrentDCCol);
pen.setWidth(2);
painter.setPen(pen);
painter.setBrush(mCurrentDCCol);
painter.drawRoundedRect(QRect(QPoint(m_LeftTop.x()+mRoundVal,m_LeftTop.y()+mRoundVal),QPoint(m_LeftTop.x()+mRoundVal+m_CurrentDCPer*(m_RightBottom.x()-mRoundVal -m_LeftTop.x()-mRoundVal)/100,m_RightBottom.y()-mRoundVal)),1,1);
pen.setColor(QColor(128,128,128));
QFont f;
f.setPixelSize(this->width()*0.3);
painter.setFont(f);
pen.setColor(QColor(128,128,128));
painter.setPen(pen);
drawCenteredText(&painter,QRect(m_LeftTop,m_RightBottom),QString::number(m_CurrentDCPer));
pen.setColor(QColor(128,128,128));
pen.setWidth(2);
painter.setPen(pen);
painter.setBrush(QColor(128,128,128));
painter.drawRoundedRect(QRect(m_Right_L_Top,m_Right_R_Bottom),1,1);
}
void DCWidget::showEvent(QShowEvent *event)
{
QWidget::showEvent(event);
}
void DCWidget::analysisColor(int per)
{
if(per <= 50)
{
mCurrentDCCol = QColor(255,255*per/50,0);
}
else
{
mCurrentDCCol = QColor(255*(100-per)/50,255,0);
}
}
void DCWidget::slotAddDC()
{
m_CurrentDCPer++;
m_CurrentDCPer = m_CurrentDCPer%100;
analysisColor(m_CurrentDCPer);
this->update();
}
实现的效果如下图:
样式可根据实际情况再做修正!