700字范文 > qt自定义控件-柱状刻度尺

qt自定义控件-柱状刻度尺

时间：2019-08-31 01:13:54

相关推荐

qt自定义控件-柱状刻度尺

一、前言

一直以来用进度条，或者刻度控件都用QPrograssBar，最近学习自定义控件，参考了刘大师的核心代码，自己稍微改编，分享一下

二、环境

qt5.7 MinGw

windows8

三、正文

首先看一下效果：

功能：

可自定义修改标题。

可任意设置各个部分颜色（接口待写）。

可使用double类型

定义需要

#ifndef RULERBAR_H#define RULERBAR_H#include <QWidget>#include <QMainWindow>#include <qmath.h>#include <QTimer>#include <QDebug>#include <QPainter>#include <QString>class RulerBar : public QMainWindow{Q_OBJECT public:explicit RulerBar(QWidget *parent = 0);~RulerBar();protected:void paintEvent(QPaintEvent *);void drawBg(QPainter *painter);void drawRuler(QPainter *painter);void drawBarBg(QPainter *painter);void drawBar(QPainter *painter);private: double minValue;//最小值double maxValue;//最大值double currentValue; //当前值double currenttrueValue; //实际值int precision; //精确度,小数点后几位int multiple; //显示与实际缩小倍数int longStep; //长线条等分步长int shortStep; //短线条等分步长int spacex; //x间距int spacey; //y间距QString title; //标题QColor bgColorStart; //背景渐变开始颜色QColor bgColorEnd; //背景渐变结束颜色QColor lineColor;//线条颜色QColor barBgColor; //柱状背景色QColor barColor;//柱状颜色public Q_SLOTS:void setpara(double minValued,double maxValued,int precisiond,int multipled,const QString &titled);//设置标题void updateValue(double speed);};#endif // RULERBAR_H

主函数定义：

longStep=5; //长线条等分步长shortStep=1; //短线条等分步长spacex=15; //间距spacey=30;bgColorStart=Qt::transparent; //背景渐变开始颜色bgColorEnd=Qt::transparent; //背景渐变结束颜色lineColor=Qt::black;//线条颜色barBgColor=QColor(170, 255, 255); //柱状背景色barColor=Qt::green;//柱状颜色setWindowFlags(Qt::FramelessWindowHint);setAttribute(Qt::WA_TranslucentBackground);

核心代码

void RulerBar::updateValue(double speed){currenttrueValue=speed;if(speed*multiple>maxValue){currentValue=maxValue;barColor=Qt::red;}else{currentValue = speed*multiple;barColor=Qt::green;}update();}void RulerBar::paintEvent(QPaintEvent *){//绘制准备工作,启用反锯齿QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);//绘制背景drawBg(&painter);//绘制标尺drawRuler(&painter);//绘制柱状背景drawBarBg(&painter);//绘制柱状drawBar(&painter);}//绘制背景void RulerBar::drawBg(QPainter *painter){painter->save();painter->setPen(Qt::NoPen);QLinearGradient bgGradient(QPointF(0, 0), QPointF(0, height()));bgGradient.setColorAt(0.0, bgColorStart);bgGradient.setColorAt(1.0, bgColorEnd);painter->setBrush(bgGradient);painter->drawRect(rect());painter->restore();}//绘制标尺void RulerBar::drawRuler(QPainter *painter){painter->save();painter->setPen(lineColor);//绘制纵向标尺线 20的长度为刻度尺文字的宽度double initX = spacex + 20;double initY = spacey;QPointF topPot(initX, height() - spacey);QPointF bottomPot(initX, initY);painter->drawLine(topPot, bottomPot);//绘制纵向标尺刻度double length = height() - 2 * spacey;//计算每一格移动多少double increment = length / (maxValue - minValue);//长线条短线条长度int longLineLen = 10;int shortLineLen = 7;//根据范围值绘制刻度值及刻度值for (int i = maxValue; i >= minValue; i = i - shortStep) {if (i % longStep == 0) {QPointF leftPot(initX + longLineLen, initY);QPointF rightPot(initX, initY);painter->drawLine(leftPot, rightPot);QString strValue = QString("%1").arg((double)i/multiple, 0, 'f', precision);double fontWidth = painter->fontMetrics().width(strValue);double fontHeight = painter->fontMetrics().height();QPointF textPot(initX - fontWidth - 5, initY + fontHeight / 3);painter->drawText(textPot, strValue);} else {if (i % (longStep / 2) == 0) {shortLineLen = 7;} else {shortLineLen = 4;}QPointF leftPot(initX + shortLineLen, initY);QPointF rightPot(initX, initY);painter->drawLine(leftPot, rightPot);}initY += increment * shortStep;}painter->restore();}//绘制柱状背景void RulerBar::drawBarBg(QPainter *painter){painter->save();painter->setPen(Qt::NoPen);//20的长度为刻度尺文字的宽度 15为刻度尺到柱状图的宽度double initX = spacex + 20 + 15;QPointF topLeftPot(initX, spacey);//左下角QPointF bottomRightPot(width() - spacex , height() - spacey);//右上角barRect = QRectF(topLeftPot, bottomRightPot);painter->setBrush(barBgColor);painter->drawRect(barRect);painter->restore();}//绘制柱状void RulerBar::drawBar(QPainter *painter){painter->save();painter->setPen(Qt::NoPen);double barHeight = barRect.height();//柱状背景高度double increment = (double)barHeight / (maxValue - minValue);//每刻度对应柱状图高度double initY = (currentValue - minValue) * increment;//当前值对应的柱状图高度QPointF topLeftPot(barRect.topLeft().x(), barRect.bottomLeft().y() - initY);QPointF bottomRightPot(barRect.bottomRight());QRectF currentRect(topLeftPot, bottomRightPot);painter->setBrush(barColor);painter->drawRect(currentRect);painter->restore();painter->save();if(currenttrueValue*multiple>maxValue)painter->setPen(Qt::red);elsepainter->setPen(Qt::black);QFont font1("黑体",10,QFont::Bold,false);painter->setFont(font1);QString speed = QString("%1%2").arg(currenttrueValue,0,'f',precision).arg("");QFontMetricsF fm(font1);//this->font()//添加字体了就用添加的字体fontqreal w = fm.size(Qt::TextSingleLine,speed).width();painter->drawText((width()-w)/2,height()-10 ,speed);QFontMetricsF fm1(font1);//this->font()qreal w2 = fm1.size(Qt::TextSingleLine,title).width();painter->setPen(Qt::black);painter->drawText((width()-w2)/2,spacey-10,title);painter->restore();}void RulerBar::setpara(double minValued,double maxValued,int precisiond,int multipled,const QString &titled){minValue=minValued;maxValue=maxValued;precision=precisiond;//精确度,小数点后2位multiple=multipled;//显示缩小10倍title=titled;if(multiple==1){longStep=10; //长线条等分步长shortStep=5; //短线条等分步长}}

updateValue：用于更新实时值，这个值外面输入的是坐标显示的，即放大或缩小倍数之后显示的值，坐标设置了0~2.5，更新数值只要输入0~2.5之间的数就是在这个范围内显示了。

setpara：这个接口是我为了剩空间就压缩在一个函数中了，设置最小最大值，设置放大/缩小倍数，设置小数位数设置标题名称。

这个为什么加放大倍数呢，因为如果是范围特别小的，在绘制刻度尺时不好画出刻度，所以放大倍数之后绘制，数值和显示都会按照设置的一个比例系数去运算，从而显示看起来是正常的。

Page1Bar[i]->setpara(0,25,1,10,PillarBarName_page1[i]);

上面这句话就是设置如上图片中的刻度尺柱状图，设置范围要在0~2.5，输入放大10倍的值，然后在后面设置倍数为10，刻度次的小数位数为1，标题名称任意。