指南针是一种用来确定方向的工具。它由一个磁针制成,其一端被磁化,可以自由旋转。当放置在水平面上时,磁针会指向地球的磁北极。通过观察磁针的指向,我们可以确定地理北方的方向。本示例是在Qt中绘制一个指南针,通过继承QWidget类,并重写其paintEvent函数来实现。并对仪表盘绘制进行封装。
一、简述
这个示例创建了一个名为CompassWidget的自定义小部件,它继承自QWidget类。在paintEvent()函数中,我们使用QPainter类进行绘图操作。
二、 设计思路
- 创建一个QWidget子类CompassWidget用于绘制指南针。
- 在CompassWidget的构造函数中,设置指南针的背景色、大小等属性。
- 定义QcGaugeWidget类,绘制指南针的各个组成部分,重写相关部件的paintEvent()函数。
- 使用QPainter在paintEvent()函数中绘制指南针的主体部分,包括圆形背景、指针和刻度。
- 根据指南针的当前角度,计算并绘制指针的位置和角度。
- 添加一个public的setCurrentValue()函数,用于设置指南针的角度,并在其中调用update()函数刷新界面。
三、效果
四、核心代码
1、头文件
compasswidget.h 指南针表盘控件
#ifndef COMPASSWIDGET_H
#define COMPASSWIDGET_H#include <QWidget>class QcGaugeWidget;
class QcNeedleItem;
class QVBoxLayout;class CompassWidget : public QWidget
{Q_OBJECT
public:explicit CompassWidget(QWidget *parent = 0);~CompassWidget();public slots:void setCurrentValue(int value);private:void init();private:QcGaugeWidget *m_pCompassGauge; //表盘QcNeedleItem *m_pCompassNeedle; //指针QVBoxLayout *m_pMainLayout;
};#endif // COMPASSWIDGET_H
qcgaugewidget.h 仪表盘绘制封装(此处只有绘制指南针所需代码,全部代码请下载)
#ifndef QCGAUGEWIDGET_H
#define QCGAUGEWIDGET_H#include <QWidget>
#include <QPainter>
#include <QObject>
#include <QRectF>
#include <QtMath>class QcGaugeWidget;
class QcItem;
class QcBackgroundItem;
class QcDegreesItem;
class QcNeedleItem;
class QcLabelItem;
class QcGlassItem;///
class QcGaugeWidget : public QWidget
{Q_OBJECT
public:explicit QcGaugeWidget(QWidget *parent = 0); QcBackgroundItem* addBackground(float position);QcDegreesItem* addDegrees(float position);QcNeedleItem* addNeedle(float position);QcLabelItem* addLabel(float position);QcGlassItem* addGlass(float position);void addItem(QcItem* item, float position);int removeItem(QcItem* item);QList <QcItem*> items();QList <QcItem*> mItems;private:void paintEvent(QPaintEvent *);};///
class QcItem : public QObject
{Q_OBJECT
public:explicit QcItem(QObject *parent = 0);virtual void draw(QPainter *) = 0;virtual int type();void setPosition(float percentage);float position();QRectF rect();enum Error{InvalidValueRange,InvalidDegreeRange,InvalidStep};protected:QRectF adjustRect(float percentage);float getRadius(const QRectF &);float getAngle(const QPointF&, const QRectF &tmpRect);QPointF getPoint(float deg, const QRectF &tmpRect);QRectF resetRect();void update();private:QRectF mRect;QWidget *parentWidget;float mPosition;
};///
class QcScaleItem : public QcItem
{Q_OBJECT
public:explicit QcScaleItem(QObject *parent = 0);void setValueRange(float minValue,float maxValue);void setDgereeRange(float minDegree,float maxDegree);void setMinValue(float minValue);void setMaxValue(float maxValue);void setMinDegree(float minDegree);void setMaxDegree(float maxDegree);protected:float getDegFromValue(float);float mMinValue;float mMaxValue;float mMinDegree;float mMaxDegree;
};///
class QcBackgroundItem : public QcItem
{Q_OBJECT
public:explicit QcBackgroundItem(QObject *parent = 0);void draw(QPainter*);void addColor(float position, const QColor& color);void clearrColors();private:QPen mPen;QList<QPair<float,QColor> > mColors;QLinearGradient mLinearGrad;
};///
class QcGlassItem : public QcItem
{Q_OBJECT
public:explicit QcGlassItem(QObject *parent = 0);void draw(QPainter*);
};///
class QcLabelItem : public QcItem
{Q_OBJECT
public:explicit QcLabelItem(QObject *parent = 0);virtual void draw(QPainter *);void setAngle(float);float angle();void setText(const QString &text, bool repaint = true);QString text();void setColor(const QColor& color);QColor color();private:float mAngle;QString mText;QColor mColor;
};///
class QcDegreesItem : public QcScaleItem
{Q_OBJECT
public:explicit QcDegreesItem(QObject *parent = 0);void draw(QPainter *painter);void setStep(float step);void setColor(const QColor& color);void setSubDegree(bool );
private:float mStep;QColor mColor;bool mSubDegree;
};///
class QcNeedleItem : public QcScaleItem
{Q_OBJECT
public:explicit QcNeedleItem(QObject *parent = 0);void draw(QPainter*);void setCurrentValue(float value);float currentValue();void setValueFormat(QString format);QString currentValueFormat();void setColor(const QColor & color);QColor color();void setLabel(QcLabelItem*);QcLabelItem * label();enum NeedleType{DiamonNeedle,TriangleNeedle,//三角指针FeatherNeedle,AttitudeMeterNeedle,CompassNeedle //指南针};void setNeedle(QcNeedleItem::NeedleType needleType);
private:QPolygonF mNeedlePoly;float mCurrentValue;QColor mColor;void createDiamonNeedle(float r);void createTriangleNeedle(float r);void createFeatherNeedle(float r);void createAttitudeNeedle(float r);void createCompassNeedle(float r);NeedleType mNeedleType;QcLabelItem *mLabel;QString mFormat;
};#endif // QCGAUGEWIDGET_H
2、实现代码
compasswidget.cpp
#include "compasswidget.h"
#include <QVBoxLayout>
#include "qcgaugewidget.h"CompassWidget::CompassWidget(QWidget *parent): QWidget(parent)
{init();
}CompassWidget::~CompassWidget()
{
}void CompassWidget::setCurrentValue(int value)
{m_pCompassNeedle->setCurrentValue(value);
}void CompassWidget::init()
{m_pCompassGauge = new QcGaugeWidget;m_pCompassGauge->addBackground(99);QcBackgroundItem *bkg1 = m_pCompassGauge->addBackground(92);bkg1->clearrColors();bkg1->addColor(0.1,Qt::black);bkg1->addColor(1.0,Qt::white);QcBackgroundItem *bkg2 = m_pCompassGauge->addBackground(88);bkg2->clearrColors();bkg2->addColor(0.1,Qt::white);bkg2->addColor(1.0,Qt::black);QcLabelItem *w = m_pCompassGauge->addLabel(80);//标签w->setText("W");w->setAngle(0);w->setColor(Qt::white);QcLabelItem *n = m_pCompassGauge->addLabel(80);n->setText("N");n->setAngle(90);n->setColor(Qt::white);QcLabelItem *e = m_pCompassGauge->addLabel(80);e->setText("E");e->setAngle(180);e->setColor(Qt::white);QcLabelItem *s = m_pCompassGauge->addLabel(80);s->setText("S");s->setAngle(270);s->setColor(Qt::white);QcDegreesItem *deg = m_pCompassGauge->addDegrees(70);//刻度deg->setStep(5);deg->setMaxDegree(270);deg->setMinDegree(-75);deg->setColor(Qt::white);m_pCompassNeedle = m_pCompassGauge->addNeedle(60);//指针m_pCompassNeedle->setNeedle(QcNeedleItem::CompassNeedle);m_pCompassNeedle->setValueRange(0,360);m_pCompassNeedle->setMaxDegree(360);m_pCompassNeedle->setMinDegree(0);m_pCompassGauge->addBackground(7);m_pCompassGauge->addGlass(88);//毛玻璃m_pMainLayout = new QVBoxLayout(this);m_pMainLayout->addWidget(m_pCompassGauge);
}
qcgaugewidget.cpp 仪表盘绘制封装(此处只有绘制指南针所需代码,全部代码请下载)
#include "qcgaugewidget.h"QcGaugeWidget::QcGaugeWidget(QWidget *parent) :QWidget(parent)
{setMinimumSize(250,250);
}QcBackgroundItem *QcGaugeWidget::addBackground(float position)
{QcBackgroundItem * item = new QcBackgroundItem(this);item->setPosition(position);mItems.append(item);return item;
}QcDegreesItem *QcGaugeWidget::addDegrees(float position)
{QcDegreesItem * item = new QcDegreesItem(this);item->setPosition(position);mItems.append(item);return item;
}QcNeedleItem *QcGaugeWidget::addNeedle(float position)
{QcNeedleItem * item = new QcNeedleItem(this);item->setPosition(position);mItems.append(item);return item;
}QcLabelItem *QcGaugeWidget::addLabel(float position)
{QcLabelItem * item = new QcLabelItem(this);item->setPosition(position);mItems.append(item);return item;
}QcGlassItem *QcGaugeWidget::addGlass(float position)
{QcGlassItem * item = new QcGlassItem(this);item->setPosition(position);mItems.append(item);return item;
}void QcGaugeWidget::addItem(QcItem *item,float position)
{item->setParent(this);item->setPosition(position);mItems.append(item);
}int QcGaugeWidget::removeItem(QcItem *item)
{return mItems.removeAll(item);
}QList<QcItem *> QcGaugeWidget::items()
{return mItems;
}void QcGaugeWidget::paintEvent(QPaintEvent */*paintEvt*/)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);foreach (QcItem * item, mItems) {item->draw(&painter);}
}///
QcItem::QcItem(QObject *parent) :QObject(parent)
{parentWidget = qobject_cast<QWidget*>(parent);mPosition = 50;
}int QcItem::type()
{return 50;
}void QcItem::update()
{parentWidget->update();
}float QcItem::position()
{return mPosition;
}QRectF QcItem::rect()
{return mRect;
}void QcItem::setPosition(float position)
{if(position>100)mPosition = 100;else if(position<0)mPosition = 0;elsemPosition = position;update();
}QRectF QcItem::adjustRect(float percentage)
{float r = getRadius(mRect);float offset = r-(percentage*r)/100.0;QRectF tmpRect = mRect.adjusted(offset,offset,-offset,-offset);return tmpRect;
}float QcItem::getRadius(const QRectF &tmpRect)
{float r = 0;if(tmpRect.width()<tmpRect.height())r = tmpRect.width()/2.0;elser = tmpRect.height()/2.0;return r;
}QRectF QcItem::resetRect()
{mRect = parentWidget->rect();float r = getRadius(mRect);mRect.setWidth(2.0*r);mRect.setHeight(2.0*r);mRect.moveCenter(parentWidget->rect().center());return mRect;
}QPointF QcItem::getPoint(float deg,const QRectF &tmpRect)
{float r = getRadius(tmpRect);float xx=cos(qDegreesToRadians(deg))*r;float yy=sin(qDegreesToRadians(deg))*r;QPointF pt;xx=tmpRect.center().x()-xx;yy=tmpRect.center().y()-yy;pt.setX(xx);pt.setY(yy);return pt;
}float QcItem::getAngle(const QPointF&pt, const QRectF &tmpRect)
{float xx=tmpRect.center().x()-pt.x();float yy=tmpRect.center().y()-pt.y();return qRadiansToDegrees( atan2(yy,xx));
}///
QcScaleItem::QcScaleItem(QObject *parent) :QcItem(parent)
{mMinDegree = -45;mMaxDegree = 225;mMinValue = 0;mMaxValue = 100;
}void QcScaleItem::setValueRange(float minValue, float maxValue)
{if(!(minValue<maxValue))throw( InvalidValueRange);mMinValue = minValue;mMaxValue = maxValue;}void QcScaleItem::setDgereeRange(float minDegree, float maxDegree)
{if(!(minDegree<maxDegree))throw( InvalidValueRange);mMinDegree = minDegree;mMaxDegree = maxDegree;
}float QcScaleItem::getDegFromValue(float v)
{float a = (mMaxDegree-mMinDegree)/(mMaxValue-mMinValue);float b = -a*mMinValue+mMinDegree;return a*v+b;
}void QcScaleItem::setMinValue(float minValue)
{if(minValue>mMaxValue)throw (InvalidValueRange);mMinValue = minValue;update();
}void QcScaleItem::setMaxValue(float maxValue)
{if(maxValue<mMinValue )throw (InvalidValueRange);mMaxValue = maxValue;update();
}void QcScaleItem::setMinDegree(float minDegree)
{if(minDegree>mMaxDegree)throw (InvalidDegreeRange);mMinDegree = minDegree;update();
}
void QcScaleItem::setMaxDegree(float maxDegree)
{if(maxDegree<mMinDegree)throw (InvalidDegreeRange);mMaxDegree = maxDegree;update();
}///
QcBackgroundItem::QcBackgroundItem(QObject *parent) :QcItem(parent)
{setPosition(88);mPen = Qt::NoPen;setPosition(88);addColor(0.4,Qt::darkGray);addColor(0.8,Qt::black);}void QcBackgroundItem::draw(QPainter* painter)
{QRectF tmpRect = resetRect();painter->setBrush(Qt::NoBrush);QLinearGradient linearGrad(tmpRect.topLeft(), tmpRect.bottomRight());for(int i = 0;i<mColors.size();i++){linearGrad.setColorAt(mColors[i].first,mColors[i].second);}painter->setPen(mPen);painter->setBrush(linearGrad);painter->drawEllipse(adjustRect(position()));
}void QcBackgroundItem::addColor(float position, const QColor &color)
{if(position<0||position>1)return;QPair<float,QColor> pair;pair.first = position;pair.second = color;mColors.append(pair);update();
}void QcBackgroundItem::clearrColors()
{mColors.clear();
}///
QcGlassItem::QcGlassItem(QObject *parent) :QcItem(parent)
{setPosition(88);
}void QcGlassItem::draw(QPainter *painter)
{resetRect();QRectF tmpRect1 = adjustRect(position());QRectF tmpRect2 = tmpRect1;float r = getRadius(tmpRect1);tmpRect2.setHeight(r/2.0);painter->setPen(Qt::NoPen);QColor clr1 = Qt::gray ;QColor clr2 = Qt::white;clr1.setAlphaF(0.2);clr2.setAlphaF(0.4);QLinearGradient linearGrad1(tmpRect1.topLeft(), tmpRect1.bottomRight());linearGrad1.setColorAt(0.1, clr1);linearGrad1.setColorAt(0.5, clr2);painter->setBrush(linearGrad1);painter->drawPie(tmpRect1,0,16*180);tmpRect2.moveCenter(rect().center());painter->drawPie(tmpRect2,0,-16*180);
}///
QcLabelItem::QcLabelItem(QObject *parent) :QcItem(parent)
{setPosition(50);mAngle = 270;mText = "%";mColor = Qt::black;
}void QcLabelItem::draw(QPainter *painter)
{resetRect();QRectF tmpRect = adjustRect(position());float r = getRadius(rect());QFont font("Meiryo UI", r/10.0, QFont::Bold);painter->setFont(font);painter->setPen(QPen(mColor));QPointF txtCenter = getPoint(mAngle,tmpRect);QFontMetrics fMetrics = painter->fontMetrics();QSize sz = fMetrics.size( Qt::TextSingleLine, mText );QRectF txtRect(QPointF(0,0), sz );txtRect.moveCenter(txtCenter);painter->drawText( txtRect, Qt::TextSingleLine,mText );
}void QcLabelItem::setAngle(float a)
{mAngle = a;update();
}float QcLabelItem::angle()
{return mAngle;
}void QcLabelItem::setText(const QString &text, bool repaint)
{mText = text;if(repaint)update();
}QString QcLabelItem::text()
{return mText;
}void QcLabelItem::setColor(const QColor &color)
{mColor = color;update();
}QColor QcLabelItem::color()
{return mColor;
}///
QcDegreesItem::QcDegreesItem(QObject *parent) :QcScaleItem(parent)
{mStep = 10;mColor = Qt::black;mSubDegree = false;setPosition(90);
}void QcDegreesItem::draw(QPainter *painter)
{resetRect();QRectF tmpRect = adjustRect(position());painter->setPen(mColor);float r = getRadius(tmpRect);for(float val = mMinValue;val<=mMaxValue;val+=mStep){float deg = getDegFromValue(val);QPointF pt = getPoint(deg,tmpRect);QPainterPath path;path.moveTo(pt);path.lineTo(tmpRect.center());pt = path.pointAtPercent(0.03);QPointF newPt = path.pointAtPercent(0.13);QPen pen;pen.setColor(mColor);if(!mSubDegree)pen.setWidthF(r/25.0);painter->setPen(pen);painter->drawLine(pt,newPt);}
}void QcDegreesItem::setStep(float step)
{mStep = step;update();
}void QcDegreesItem::setColor(const QColor& color)
{mColor = color;update();
}void QcDegreesItem::setSubDegree(bool b)
{mSubDegree = b;update();
}///
QcNeedleItem::QcNeedleItem(QObject *parent) :QcScaleItem(parent)
{mCurrentValue = 0;mColor = Qt::black;mLabel = NULL;mNeedleType = FeatherNeedle;
}void QcNeedleItem::draw(QPainter *painter)
{resetRect();QRectF tmpRect = adjustRect(position());painter->save();painter->translate(tmpRect.center());float deg = getDegFromValue( mCurrentValue);painter->rotate(deg+90.0);painter->setBrush(QBrush(mColor));painter->setPen(Qt::NoPen);QLinearGradient grad;switch (mNeedleType) {case QcNeedleItem::FeatherNeedle:createFeatherNeedle(getRadius(tmpRect));break;case QcNeedleItem::DiamonNeedle:createDiamonNeedle(getRadius(tmpRect));break;case QcNeedleItem::TriangleNeedle:createTriangleNeedle(getRadius(tmpRect));break;case QcNeedleItem::AttitudeMeterNeedle:createAttitudeNeedle(getRadius(tmpRect));break;case QcNeedleItem::CompassNeedle:createCompassNeedle(getRadius(tmpRect));grad.setStart(mNeedlePoly[0]);grad.setFinalStop(mNeedlePoly[1]);grad.setColorAt(0.9,Qt::red);grad.setColorAt(1,Qt::blue);painter->setBrush(grad);break;default:break;}painter->drawConvexPolygon(mNeedlePoly);painter->restore();
}void QcNeedleItem::setCurrentValue(float value)
{if(value<mMinValue)mCurrentValue = mMinValue;else if(value>mMaxValue)mCurrentValue = mMaxValue;elsemCurrentValue = value;if(mLabel!=0)mLabel->setText(QString::number(mCurrentValue),false);update();
}float QcNeedleItem::currentValue()
{return mCurrentValue;
}void QcNeedleItem::setValueFormat(QString format){mFormat = format;update();
}QString QcNeedleItem::currentValueFormat(){return mFormat;
}void QcNeedleItem::setColor(const QColor &color)
{mColor = color;update();
}QColor QcNeedleItem::color()
{return mColor;
}void QcNeedleItem::setLabel(QcLabelItem *label)
{mLabel = label;update();
}QcLabelItem *QcNeedleItem::label()
{return mLabel;
}void QcNeedleItem::setNeedle(QcNeedleItem::NeedleType needleType)
{mNeedleType = needleType;update();
}void QcNeedleItem::createDiamonNeedle(float r)
{QVector<QPointF> tmpPoints;tmpPoints.append(QPointF(0.0, 0.0));tmpPoints.append(QPointF(-r/20.0,r/20.0));tmpPoints.append(QPointF(0.0, r));tmpPoints.append(QPointF(r/20.0,r/20.0));mNeedlePoly = tmpPoints;
}void QcNeedleItem::createTriangleNeedle(float r)
{QVector<QPointF> tmpPoints;tmpPoints.append(QPointF(0.0, r));tmpPoints.append(QPointF(-r/40.0, 0.0));tmpPoints.append(QPointF(r/40.0,0.0));mNeedlePoly = tmpPoints;
}void QcNeedleItem::createFeatherNeedle(float r)
{QVector<QPointF> tmpPoints;tmpPoints.append(QPointF(0.0, r));tmpPoints.append(QPointF(-r/40.0, 0.0));tmpPoints.append(QPointF(-r/15.0, -r/5.0));tmpPoints.append(QPointF(r/15.0,-r/5));tmpPoints.append(QPointF(r/40.0,0.0));mNeedlePoly = tmpPoints;
}void QcNeedleItem::createAttitudeNeedle(float r)
{QVector<QPointF> tmpPoints;tmpPoints.append(QPointF(0.0, r));tmpPoints.append(QPointF(-r/20.0, 0.85*r));tmpPoints.append(QPointF(r/20.0,0.85*r));mNeedlePoly = tmpPoints;
}void QcNeedleItem::createCompassNeedle(float r)
{QVector<QPointF> tmpPoints;tmpPoints.append(QPointF(0.0, r));tmpPoints.append(QPointF(-r/15.0, 0.0));tmpPoints.append(QPointF(0.0, -r));tmpPoints.append(QPointF(r/15.0,0.0));mNeedlePoly = tmpPoints;
}
以上是Qt绘制指南针实现代码,在实际使用中,可以根据需要自定义动画文件和样式。
该自定义控件主要特点有:
1、纯QPaint绘制,不包括图片等文件;
2、多种自定义控制,非常灵活;
3、能够自适应大小,不需要手动调整;
需要注意的是,在使用QPainter时,需要灵活运用QPainter的绘图函数和提供给用户的交互函数,并注意处理用户的交互操作和组件的尺寸调整等问题。
五、使用示例
以下是一个简单的示例代码,演示了如何在Qt中使用此控件:
#include "mainwindow.h"
#include "compasswidget.h"
#include <QSlider>
#include <QHBoxLayout>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{CompassWidget *pCompassWidget = new CompassWidget(this);QSlider *slider = new QSlider(this);slider->setRange(0, 360);connect(slider, &QSlider::valueChanged, pCompassWidget, &CompassWidget::setCurrentValue);QWidget *widget = new QWidget(this);QHBoxLayout *layout = new QHBoxLayout(widget);layout->addWidget(pCompassWidget);layout->addWidget(slider);setCentralWidget(widget);resize(400, 400);
}MainWindow::~MainWindow()
{
}
总结一下,指南针的设计方法和流程如下:
1、绘制指南针的背景。可以使用QPainter的drawEllipse方法来绘制一个圆形背景,然后填充颜色。
2、绘制指南针的刻度。可以使用QPainter的drawLine方法绘制指南针的刻度线,通过循环来绘制所有的刻度。
3、绘制指南针的指针。可以使用QPainter的drawLine方法绘制指南针的指针线,通过计算指针的角度来确定其位置。
4、绘制指南针的文字标签。可以使用QPainter的drawText方法绘制文字,并根据指南针的角度来确定文字标签的位置。
六、绘制一个速度表盘
我们利用QcGaugeWidget 将CompassWidget内init稍作修改即可实现一个速度仪表盘,代码如下(表盘和指针对象名称已修改):
m_pSpeedGauge = new QcGaugeWidget(this);m_pSpeedGauge->addBackground(99);QcBackgroundItem *bkg1 = m_pSpeedGauge->addBackground(92);bkg1->clearrColors();bkg1->addColor(0.1,Qt::black);bkg1->addColor(1.0,Qt::white);QcBackgroundItem *bkg2 = m_pSpeedGauge->addBackground(88);bkg2->clearrColors();bkg2->addColor(0.1,Qt::gray);bkg2->addColor(1.0,Qt::darkGray);m_pSpeedGauge->addArc(55);m_pSpeedGauge->addDegrees(65)->setValueRange(0,80);m_pSpeedGauge->addColorBand(50);m_pSpeedGauge->addValues(80)->setValueRange(0,80);m_pSpeedGauge->addLabel(70)->setText("Km/h");QcLabelItem *lab = m_pSpeedGauge->addLabel(40);lab->setText("0");m_pSpeedNeedle = m_pSpeedGauge->addNeedle(60);m_pSpeedNeedle->setLabel(lab);m_pSpeedNeedle->setColor(Qt::white);m_pSpeedNeedle->setValueRange(0,80);m_pSpeedGauge->addBackground(7);m_pSpeedGauge->addGlass(88);m_pMainLayout = new QVBoxLayout(this);m_pMainLayout->addWidget(m_pSpeedGauge);setLayout(m_pMainLayout);
效果如下:
谢谢您的关注和阅读。如果您还有其他问题或需要进一步的帮助,请随时联系我。祝您一切顺利!