Qt自定义控件实现简易仪表盘

本文实例为大家分享了Qt自定义控件实现简易仪表盘的具体代码,供大家参考,具体内容如下

Qt自定义控件12:简易仪表盘(根据liudianwu大神的界面自己写的代码,建议去学习刘大神,会受益良多的)

先看效果图:

思路:画270度的圆弧,圆弧根据占比分为两种颜色,根据占比在圆弧上画出一个圆球作为标志,然后就是刻度线和刻度值。刻度线是根据坐标系旋转画出,刻度值是根据角度求出x,y坐标值构造出一个矩形画出刻度值(不要用坐标系旋转画刻度值,那样刻度值的角度也会旋转,写出的字不是正的,效果不好)。最后就是在中心画value。

关键代码:

void CMPassrate5::paintEvent(QPaintEvent *event){
  int width = this->width();
  int height = this->height();
  int side = qMin(width, height);

  QPainter painter(this);
  painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  painter.translate(width / 2, height / 2);
  painter.scale(side / 200.0, side / 200.0);

  drawE(&painter);
  drawEPoint(&painter);
  drawLine(&painter);
  drawEText(&painter);
  drawValue(&painter);
}

void CMPassrate5::drawE(QPainter* painter){
  QRect rect(-radius,-radius,2*radius,2*radius);
  painter->save();
  painter->setPen(Qt::NoPen);

  QPainterPath path;
  QPainterPath subPath;
  QPainterPath outPath;
  QPainterPath outPubPath;
  outPath.arcTo(rect,-45,outRange);
  outPubPath.addEllipse(rect.adjusted(side,side,-side,-side));
  outPath -= outPubPath;
  color.setAlpha(100);
  painter->setBrush(color);
  painter->drawPath(outPath);

  path.arcTo(rect,-45+outRange,range);
  subPath.addEllipse(rect.adjusted(4,4,-4,-4));
  path -= subPath;
  color.setAlpha(180);
  painter->setBrush(color);
  painter->drawPath(path);

  painter->restore();
}

void CMPassrate5::drawEPoint(QPainter* painter){
  //圆球位置就在outRange尽头处
  painter->save();
  color.setAlpha(180);
  painter->setPen(Qt::NoPen);
  painter->setBrush(color);

  float x = (radius-side/2)*qCos((range+135)*3.14/180);
  float y = (radius-side/2)*qSin((range+135)*3.14/180);
  qDebug()<<"x:"<<x<<" y:"<<y;
  painter->drawEllipse(QPoint(x,y),side,side);
  painter->restore();
}

void CMPassrate5::drawLine(QPainter* painter){
  painter->save();
  painter->rotate(135);
  color.setAlpha(100);
  painter->setPen(color);
  QLine line(QPoint(radius-side-lineLength,0),QPoint(radius-side,0));

  for(int i = 0;i<lineCount;i++){
    painter->drawLine(line);
    painter->rotate(270.0/lineCount);
  }
  painter->restore();
}

void CMPassrate5::drawEText(QPainter* painter){
  painter->save();
//  painter->rotate(135);
  painter->setPen(Qt::black);
  float textRange = 270.0/(textCount-1);
  float x,y;
  for(int i = 0;i<=10;i++){
    x = (radius-side-lineLength)*qCos((textRange*i+135)*3.14/180);
    y = (radius-side-lineLength)*qSin((textRange*i+135)*3.14/180);
    if(i<5){
      QRect rect(x,y-4,20,10);
      painter->drawText(rect,Qt::AlignCenter,QString::number(i*10));
    }else if(i ==5){
      QRect rect(x-7,y,20,10);
      painter->drawText(rect,Qt::AlignCenter,QString::number(i*10));
    }else{
      QRect rect(x-20,y-5,20,10);
      painter->drawText(rect,Qt::AlignCenter,QString::number(i*10));
    }

  }
  painter->restore();
}

void CMPassrate5::drawValue(QPainter* painter){
  painter->save();
  QPen pen = painter->pen();
  pen.setColor(color);
  pen.setWidth(2);
  painter->setPen(pen);
  QFont font = painter->font();
  font.setPixelSize(45);
  painter->setFont(font);

  QRect rect(-25,-25,50,50);
  painter->drawText(rect,Qt::AlignCenter,QString::number(value));
  painter->restore();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Qt自定义控件实现进度仪表盘

    本文实例为大家分享了Qt自定义控件实现进度仪表盘的具体代码,供大家参考,具体内容如下 先看效果图: 思路:外围的线共100根(自定义,可改变),总共占270度,然后按照 先画一条线然后旋转坐标系的思路画出完整的线.内部即是一个灰色的背景圆,一个圆弧和中间的value对应的文字. 关键代码:CMPassrate2.cpp void CMPassrate2::paintEvent(QPaintEvent *event){//界面绘制事件 int width = this->width(); int

  • Qt自定义控件实现多彩色仪表盘

    本文实例为大家分享了Qt实现多彩色仪表盘的具体代码,供大家参考,具体内容如下 Qt自定义控件4:多彩色仪表盘 先看效果图: 思路:外围三色的圆弧 红:蓝:绿 = 1:2:1,总共占270度.刻度线是根据所在圆弧的颜色而画,刻度线的角度也是根据坐标系的旋转而画.刻度值是根据刻度线的角度得到所要画的刻度的左上角的坐标,然后构成一个矩形,根据矩形画出刻度值.指针是根据四个点的坐标直接画的四边形,再旋转坐标系实现指针旋转的效果.下方的文字直接得到坐标横纵坐标位置得到矩形画出value的值 关键代码:CM

  • Qt自定义控件实现简易仪表盘

    本文实例为大家分享了Qt自定义控件实现简易仪表盘的具体代码,供大家参考,具体内容如下 Qt自定义控件12:简易仪表盘(根据liudianwu大神的界面自己写的代码,建议去学习刘大神,会受益良多的) 先看效果图: 思路:画270度的圆弧,圆弧根据占比分为两种颜色,根据占比在圆弧上画出一个圆球作为标志,然后就是刻度线和刻度值.刻度线是根据坐标系旋转画出,刻度值是根据角度求出x,y坐标值构造出一个矩形画出刻度值(不要用坐标系旋转画刻度值,那样刻度值的角度也会旋转,写出的字不是正的,效果不好).最后就是

  • Qt自定义控件实现仪表盘

    目录 1.预览图 2. 代码 头文件 源文件 3. 用法 1.预览图 2. 代码 头文件 #ifndef MOTORMETER_H #define MOTORMETER_H #include <QWidget> #include <QDebug> #include <QtMath> #include <QDialog> #include <QPainter> #include <QPaintEvent> #include <QP

  • Qt自定义控件实现线条型加载条

    本文实例为大家分享了Qt自定义控件实现线条型加载条的具体代码,供大家参考,具体内容如下 上效果图: 思路:先画一个线条,然后旋转坐标系再画其他线条,突出颜色的线条可以画死再旋转,也可以按照角度递增让特定线画突出颜色(这里使用的是这种). LoadingBarA::LoadingBarA(QWidget *parent) : QWidget(parent) { timer = new QTimer(this); //定时器 timer->setInterval(50); connect(timer

  • 基于QT制作一个简易的传输文件小工具

    最近因为一个事情很恼火,因为办公需要用到企业微信,但是企业微信只能在一个电脑上登陆,所以当别人发文件给你的时候,你只能一个电脑接收,创建共享文件夹也很麻烦,每次都需要去访问,很麻烦.所以准备自己写一个文件传输小工具. 功能就是能实现文件的双向传输,即客户端能传给服务端,服务端可以传给客户端. 使用的tcp通信,其实就是发消息,但是组合数据我是借鉴了IT1995大神写的代码. 先看下效果图 可以看到既可以接受文件也可进行发送文件,只要2台电脑在统一局域网内,就可发送和接受数据. 本地文件下出现了一

  • android自定义控件实现简易时间轴(1)

    本文实例为大家分享了android自定义控件实现简易时间轴的具体代码,供大家参考,具体内容如下 之前项目需要写一个消费记录,类似于时间轴似的控件,自身在自定义控件这里不咋地(…),最后搞了一个这个demo 效果图: 这里就是绘制圆和上下两条线 1.资源文件,定义一些基本的属性: <?xml version="1.0" encoding="utf-8"?> <resources>     <attr name="textSize

  • Qt自定义控件实现圆盘进度条

    本文实例为大家分享了Qt圆盘进度条的具体代码,供大家参考,具体内容如下 自定义控件二:圆盘进度条 上效果图: 主要思路:使用qpainter根据图形需求 画圆和圆弧,画指针(多边形,指定坐标即可),根据具体的value值旋转坐标系,使指针达到旋转效果,旋转度数是根据value值,总共360度,占比求得.最中间需要画文字上去,每次更新value时调用update()方法,重绘界面. 主要代码:CMPassrate1.cpp void CMPassrate1::paintEvent(QPaintEv

  • Qt自定义控件实现圆圈加载进度条

    本文实例为大家分享了Qt实现圆圈加载进度条的具体代码,供大家参考,具体内容如下 先看效果图: 思路:画一个占270度的圆弧,然后定义一个定时器,定时旋转坐标系,实现旋转的效果.圆弧需要使用渐变色,实现颜色越来越浅的效果 关键代码:CMProcessBar1.cpp CMProcessBar1::CMProcessBar1(QWidget *parent) : QWidget(parent), ui(new Ui::CMProcessBar1) { ui->setupUi(this); QTime

  • android自定义控件实现简易时间轴(2)

    这篇做了一个简单的时间轴控件.右侧的数据就是一个简单的字符串.问题还是有的,当右侧的文字长度不一样的时候就会有问题了.现在可以修改一下适配右侧的文字. 效果如下: 代码: private Paint bgPaint, linePaint, borderPaint,textPaint; private Rect bgRect, textRect; //基本属性 private int mTextSize; private int mTextColor; private String mTextTi

随机推荐