32.QT-制作最强电压电阻表盘,可以自定义颜色,图标,文字标签(也可以用来当其它表盘)

由于上位机需要绘制电压电阻表盘,如下图所示:

后来,在网上找阿找,还是没找到满意的,索性自己来画控件算了,由于第一次画控件,所以花了我2天时间,才画好

效果图如下:

上图的所有颜色(包括滑动的渐变/单一颜色,以及字体颜色)都可以自定义,包括图标也可以(上面的电阻图标,网上没找到好看的,所以很丑~)

整体效果图如下所示:

介绍

代码里添加了自适应设置,根据窗口大小自动改变标签,图标,刻度值,中心圆数值等

代码里集成了定时器,可以通过setTimerType(int msec,int v)成员函数实现表盘指针旋转快慢,每过多少msec,跑多少值(v),如果msec=0或者v=0,则表示不用定时器,直接跳到终点。

代码里通过setGradientColorMode(QList<QColor>& Qcolors)成员函数可以自定义一组渐变颜色.

也可以通过setSingleColorMode(QColor color)成员函数自定义单一颜色(上图2就是设置的单一颜色).

代码介绍

1.代码里通过 painter类来绘图,其中paintEvent()函数如下所示

void Dial::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setPen(Qt::NoPen);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);
    painter.translate(width()/2,height()/2);
    radius = qMin(width(),height())/2;
    centerR=radius*0.4;       //设置中心圆大小
    drawObkColor(painter);           //外圆盘
    drawScalebkColor(painter);      //画刻度圆
    drawslideScaleColor(painter);   //画划过的颜色
    drawShade(painter);            //画阴影
    drawScaleColor(painter);
    drawbkColor(painter);          //画内圆
    drawScaleTextColor(painter);   //画刻度值
    drawPointColor(painter);
    drawCenterColor(painter);      //绘制中心圆
    drawIconValueColor(painter);
    drawlabelColor(painter);
}

2.然后进入drawObkColor()函数,来绘画外圆盘,函数如下所示

void Dial::drawObkColor(QPainter& paint)      //绘制外圆
{
        paint.save();
        QConicalGradient  Conical(0,0,90);
        Conical.setColorAt(0,oobkColor);
        Conical.setColorAt(0.5,oobkColor);
        Conical.setColorAt(0.12,oobkColor.darker(40));
        Conical.setColorAt(0.88,oobkColor.darker(40));
        Conical.setColorAt(0.4,oobkColor.darker(30));
        Conical.setColorAt(0.6,oobkColor.darker(30));
        Conical.setColorAt(0.25,oobkColor.darker(160));
        Conical.setColorAt(0.75,oobkColor.darker(160));
        Conical.setColorAt(1,oobkColor);
        paint.setBrush(Conical);
        paint.drawEllipse(QPointF(0,0), radius*0.96,radius*0.98);
        Conical.setAngle(270);
        Conical.setColorAt(0,obkColor.darker(40));
        Conical.setColorAt(0.5,obkColor.darker(40));
        Conical.setColorAt(0.25,obkColor.darker(160));
        Conical.setColorAt(0.75,obkColor.darker(160));
        paint.setBrush(Conical);
        paint.drawEllipse(QPointF(0,0), radius*0.93,radius*0.94);
        paint.restore();
}

外圆盘效果如下所示:

3.然后接下来开始画刻度圆,画了它后,才能开始画刻度和划过的颜色等

void Dial::drawScalebkColor(QPainter &paint)        //绘制刻度圆
{
    paint.save();
    paint.setBrush(bkColor);
    paint.drawEllipse(QPointF(0,0), radius*0.90,radius*0.90);

    paint.restore();
}

4.然后接下来开始画划过的颜色,就是上图指针划过后都会带有颜色的那种 (以单色颜色为例)

void Dial::drawslideScaleColor(QPainter &paint)    //画划过的颜色
{
    /*单一颜色*/  

    int Star_Angle= 210*16-(int)((value/(maxvalue-minvalue))*240*16);

    int spanAngle  =  210*16 - Star_Angle;

    if(spanAngle==0)
        return ;



    qreal SlideBottom =  ((qreal)radius*0.77)/((qreal)radius*0.90);    

    qreal SlideCenterTop = 1-(1-SlideBottom)/3;                        
    qreal SlideCenterBottom = SlideBottom+(1-SlideBottom)/3+0.01;      

    paint.save();

    QColor Tint_SlideColor = SingleSlideColor;


    QRadialGradient Radial(0,0,radius*0.90);


    Tint_SlideColor.setAlpha(40);
    Radial.setColorAt(1,Tint_SlideColor);
    Radial.setColorAt(SlideBottom-0.005,Tint_SlideColor);
    Radial.setColorAt(0,Qt::transparent);
    Radial.setColorAt(SlideBottom-0.006,Qt::transparent);


    Tint_SlideColor = SingleSlideColor;
    Tint_SlideColor.setAlpha(50);


    Radial.setColorAt(SlideCenterBottom-0.03,Tint_SlideColor);
    Radial.setColorAt(SlideCenterTop+0.03,Tint_SlideColor);

    Tint_SlideColor = SingleSlideColor;
    Tint_SlideColor.setAlpha(50);
    Radial.setColorAt(SlideCenterBottom-0.01,SingleSlideColor.darker(200));
    Radial.setColorAt(SlideCenterTop+0.01,SingleSlideColor.darker(200));

    Radial.setColorAt(SlideCenterBottom,SingleSlideColor);
    Radial.setColorAt(SlideCenterTop,SingleSlideColor);

    paint.setPen(Qt::NoPen);
    paint.setBrush(Radial);

    paint.drawPie(QRectF((qreal)-radius*0.90,(qreal)-radius*0.90,(qreal)radius*1.80,(qreal)radius*1.80),Star_Angle,spanAngle);

    paint.restore();
 


  //... ...  
   
}

效果:

5.然后接下来便开始画刻度和刻度值,其中比较重要的就是绘制刻度值

由于Painter的rotate()旋转文字时,也会将文字倾斜了,所以我们需要自定义rotate()函数

具体参考我另一篇rotate函数分析:   31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

drawScaleTextColor()画刻度值函数如下所示:

void Dial::drawScaleTextColor(QPainter &paint)    //绘制刻度值
{
    /*绘制文字刻度*/
    paint.save();

    paint.setPen(ScaleColor);

    QString text("%1");

    int size;           //动态计算文字大小

    if(radius<=120)
       size = 10;
    else if((radius>120)&&(radius<500))
       size = 13+(radius-120)/30;
    else if(radius>=500)
       size = 13+(radius-120)/40;

    paint.setFont(QFont("Euphemia",size,QFont::DemiBold));

    QPoint TextPoint(0,radius*0.77-size*0.9);        //设置90°的文字
    TextPoint = CustomRotate(TextPoint,90,240);   //获取点=210°的文字位置
    qreal TextRotate=210;

     for(int i=0;i<7;i++)              //设置7个刻度值
    {
    
          //... ...

          qreal Current_Value =(qreal)i*((maxvalue-minvalue)/6);

          if((Current_Value>value&&(paint.pen().color()!=ScaleColor)))
          {
              paint.setPen(ScaleColor);

          }
          else if((Current_Value<=value&&(paint.pen().color()!=slideScaleColor)))
          {
              paint.setPen(slideScaleColor);
          }

       paint.drawText(QRect(TextPoint.x()-size*1.5+offest[i].x(),TextPoint.y()-size*1.2+offest[i].y(),size*3,size*2.4),alingns[i],text.arg((maxvalue-minvalue)*i/6));
       TextPoint = CustomRotate(TextPoint,TextRotate,40);   //获取点=210°的文字位置
       TextRotate-=40;
    }

    paint.restore();
}    

效果如下所示:

6.然后接下来开始画指针

void Dial::drawPointColor(QPainter &paint)          //绘制指针
{

    qreal PointTop;                //动态计算指针头
    qreal PointBottom;             //动态计算指针底部
    if(radius<=120)
    {
        PointTop = 2;
        PointBottom = 6;
    }
    else if((radius>120)&&(radius<500))
    {
        PointTop = 2 + (radius-120)/100;
        PointBottom = PointTop*3;
    }
    else if(radius>=500)
    {
        PointTop = 2 + (radius-120)/140;
        PointBottom = PointTop*3;
    }

    //指针
    const QPointF  Pointer[4] = {
        QPointF(- PointTop / 2, radius*0.80),
        QPointF(PointTop / 2, radius*0.80),
        QPointF(PointBottom / 2, centerR*0.9),
        QPointF(-PointBottom / 2, centerR*0.9)
    };

    paint.save();


    paint.setBrush(PointerColor);
    paint.setPen(PointerColor.darker(300));


    qreal Current_Angle =60+(int)((value/(maxvalue-minvalue))*240);

    paint.rotate(Current_Angle);

    paint.drawConvexPolygon(Pointer, 4);

    paint.restore();

}

效果如下:

7.然后继续画中心圆

void Dial::drawCenterColor(QPainter &paint)      //绘制中心圆
{
    paint.save();

    QRadialGradient Radial(0,0,centerR,0,0);

    Radial.setColorAt(1,centercolor.lighter(170));
    Radial.setColorAt(0.98,centercolor.lighter(150));
    Radial.setColorAt(0.95,centercolor.lighter(130));
    Radial.setColorAt(0.70,centercolor);

    paint.setBrush(Radial);
    paint.drawEllipse(QPointF(0,0), centerR,centerR);

    paint.restore();

}

效果如下:

剩下的代码就是画标签和值还有图标啦,由于渐变代码多一些,具体参考的话,源代码下载地址为:

https://download.csdn.net/download/qq_37997682/10509237

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码) 整体动画效果预览

6813
来自专栏ytkah

Excel表格的35招必学秘技[配图]

一、让数据按需排序   如果你要将员工按其所在的部门进行排序,这些部门名称既的有关信息不是按拼音顺序,也不是按笔画顺序,怎么办?可采用自定义序列来排序。  ...

5458
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十九——标签页的使用

    Bootstrap中通过为导航标签增加data-toggle="tab",配合类或id来进行标签页的关联,示例如下:

961
来自专栏Android机器圈

Achartengine.jar绘制动态图形一 --饼图

PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.ja...

4508
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

2854
来自专栏向治洪

React Native控件只TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型...

3158
来自专栏互联网杂技

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

2302
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

2154
来自专栏進无尽的文章

实践-小效果 II

UIApplication *app = [UIApplication sharedApplication]; // 应用程序右上角数字 app.applica...

941
来自专栏非著名程序员

基础篇章:关于 React Native 之 RefreshControl 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 L...

2185

扫码关注云+社区