速度仪表的QT实现

参考 https://www.cnblogs.com/feiyangqingyun/p/10739099.html 内容实现仪表自定义。

上面博客作者提供了SDK免费下载，可以直接在电脑上使用，测试过效果很赞。

但因为最后要实现在嵌入式上运行，需要编译源码，因为使用的控件不多，因此考虑自己根据上面的显示效果自己来实现。最后实现效果如下：

这里主要记录一下速度表 的实现，其他部件的实现大同小异，速度表主要有以下几个部件的绘制 ：

1. 背景的绘制
2. 刻度及刻度值的绘制
3. 指针的绘制
4. 增加显示效果的弧形效果绘制

背景主要一个渐变色的背景圆以及一个黑色的刻度背景圆环构成

void guageColorF::drawCrown(QPainter *painter)
{painter->save();int radius=100;QLinearGradient lg1(0,radius,0,-radius);lg1.setColorAt(0,QColor(24,24,24));lg1.setColorAt(1,QColor(150,150,150));painter->setBrush(lg1);painter->setPen(Qt::NoPen);painter->drawEllipse(-radius,-radius,radius<<1,radius<<1);//画整个大圆painter->restore();
}
void guageColorF::drawBackArc( QPainter *painter )
{painter->save();painter->setBrush(QColor(10,10,10));QRectF rect(-90,-90,180,180);QPainterPath path;path.arcTo(rect,0,360);QPainterPath subpath;subpath.addEllipse(-76,-76,152,152);path=path-subpath;painter->setPen(Qt::NoPen);painter->drawPath(path);painter->restore();}

然后是刻度尺及刻度值的绘制

void guageColorF::drawScaleNum(QPainter *painter)
{painter->save();painter->setPen(m_foreground);double startRad=(270-m_startAngle)*(3.14/180);double deltaRad=(360-m_startAngle-m_endAngle)*(3.14/180)/m_scaleMajor;double sina,cosa;int x,y;//QFontMetricsF fm(this->font());QFont font("Bahnschrift", 8, 50);QFontMetricsF fm(font);painter->setFont(font);double w,h,tmpVal;QString str;for(int i=0;i<=m_scaleMajor;i++){sina=sin(startRad-i*deltaRad);cosa=cos(startRad-i*deltaRad);tmpVal=1.0*i*((m_maxValue-m_minValue)/m_scaleMajor)+m_minValue;str=QString("%1").arg(tmpVal,0,'f',m_precision);w=fm.size(Qt::TextSingleLine,str).width();h=fm.size(Qt::TextSingleLine,str).height();x=58*cosa-w/2;y=-58*sina+h/4;painter->drawText(x,y,str);}painter->restore();
}void guageColorF::drawScale(QPainter *painter)
{painter->save();painter->rotate(m_startAngle);int steps=(m_scaleMajor*m_scaleMinor);double angleStep=(360.0-m_startAngle-m_endAngle)/steps;QPen pen;pen.setColor(QColor(200,200,200));for(int i=0;i<=steps;i++){if(i%m_scaleMinor==0){pen.setWidth(2);painter->setPen(pen);painter->drawLine(0,78,0,88);}else{pen.setWidth(2);painter->setPen(pen);painter->drawLine(0,82,0,88);}painter->rotate(angleStep);}painter->restore();
}

指针由一个三角形及两个圆构成

void guageColorF::drawIndicator(QPainter *painter)
{painter->save();painter->setBrush(QColor(255,106,106,200));painter->setPen(Qt::NoPen);painter->drawEllipse(-12,-12,24,24);//画指针中心整个大圆painter->setBrush(QColor(255,106,106));painter->drawEllipse(-8,-8,16,16);//画整个小圆QPolygon pts;pts.setPoints(3,-5,0,5,0,0,74);painter->rotate(m_startAngle);double degRotate=(360.0-m_startAngle-m_endAngle)/(m_maxValue-m_minValue)*(m_value-m_minValue);painter->rotate(degRotate);painter->setPen(Qt::NoPen);painter->setBrush(QColor(255,106,106));painter->drawConvexPolygon(pts);painter->restore();}

用来增加显示效果的绿色弧形的显示通过下面代码实现

void guageColorF::drawValueArc( QPainter *painter )
{painter->save();double startAngle=270-m_startAngle-(360.0-m_startAngle-m_endAngle)/(m_maxValue-m_minValue)*(0-m_minValue);double degRotate=(360.0-m_startAngle-m_endAngle)/(m_maxValue-m_minValue)*(m_value);painter->setBrush(QColor::fromRgb(64,224,208,200));QRectF rect(-90,-90,180,180);QPainterPath path;//path.arcTo(rect,270-m_startAngle,-degRotate);path.arcTo(rect,startAngle,-degRotate);QPainterPath subpath;subpath.addEllipse(-76,-76,152,152);path=path-subpath;painter->setPen(Qt::NoPen);painter->drawPath(path);painter->setBrush(QColor::fromRgb(0,255,255));QRectF rect2(-85,-85,170,170);QPainterPath path2;//path2.arcTo(rect2,270-m_startAngle,-degRotate);path2.arcTo(rect2,startAngle,-degRotate);QPainterPath subpath2;subpath2.addEllipse(-82,-82,164,164);path2=path2-subpath2;painter->setPen(Qt::NoPen);painter->drawPath(path2);painter->restore();}

需要更新时调用update()时，整个控件会调用 paintEvent(QPaintEvent *)进行重绘

void guageColorF::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.translate(width()/2,height()/2);int side=qMin(width(),height());painter.scale(side/200.0,side/200.0);drawCrown(&painter);drawBackArc(&painter);drawScaleNum(&painter);drawScale(&painter);drawTitle(&painter);drawUnits(&painter);drawNumericValue(&painter);drawValueArc(&painter);drawIndicator(&painter);}

另外，真正运行到嵌入式上的时候 ，发现大量的控件进行重绘时，会消耗过多的CPU，进而影响数据的处理实时性，因为该项目需要一定的实时性，要求保证 数据以规定频率处理和上传，因此还需要进一步优化。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！