Qt | 实现一个简单的可以转动的仪表盘

举报
黑兔子 发表于 2022/08/02 14:10:28 2022/08/02
【摘要】 Qt实现一个简单的可以转动的仪表盘。

环境: vs2017+Qt5.14.2

效果图:
image.png

准备工作:
效果图中的可以转动的仪表盘效果分为三个部分:
背景图(就是带去掉中间白色原点,去掉中间蓝色指针省下的部分);
指针图片(中间蓝色的指针部分,不包括指针上的白色圆点);
原点图片(中间白色的圆点)

原理:
在 paintEvent()中绘制这三张图片。当需要旋转指针的角度时,改变指针图片的角度,再调用 update()函数重新绘制显示就可以了。

具体实现:
1.定义旋转角度成员变量:int m_nValue;//指针旋转角度。
2.重载 paintEvent()函数。
3.加载三张图片。
QPixmap img = QPixmap(":/image/banhuan.png");
QPixmap needle = QPixmap(":/image/zhizhen.png");
QPixmap overlay = QPixmap(":/image/zhizhenyuan.png");
4.在 paintEvent()函数中进行绘制。
void CDialBox::paintEvent(QPaintEvent *event)
{
QPainter painter(this);

painter.save();//保存
painter.setRenderHint(QPainter::SmoothPixmapTransform, true); //平滑像素图,防止图形走样
painter.translate(this->width() / 2, this->height() / 2); // 原点定位在中间位置

// 背景图
painter.drawPixmap(-img->width() / 2, -img->height() / 2, img); 

// 指针图
painter.rotate(m_nValue);//设置旋转角度
painter.drawPixmap(-needle.width() / 2, -needle.height() + needle.width() / 2, needle); 

//原点图
painter.drawPixmap(-overlay.width() / 2, -overlay.height() / 2, overlay);

painter.restore();//恢复

}
其中:painter.save();painter.restore();为保存 QPainter 当前的状态和恢复 QPainter 当前的状态。这里使用这两个函数主要是服务于 painter.translate()函数的。

因为 painter.translate(x, y)函数用来设置当前 QPainter 的相对坐标。正常 QPainter 的坐标原点(0,0)在屏幕的左上角,调用 painter.translate(x, y)函数,会将原点设置为指定的(x,y)的位置,也就是说屏幕的(x,y)为 QPainter 画布的(0,0)位置。

为了防止画布上的图片有缩放或拉伸导致的图像走形,可以调用 painter.setRenderHint(QPainter::SmoothPixmapTransform, true);来进行平滑设置。

在绘制图形时顺序很重要,先调用 painter.drawPixmap()函数进行绘制的图形在最下面,后面调用的会覆盖在之前的图形之上,所以根据效果图,应该先绘制背景图片,再绘制指针图片,最后绘制原点图片。

因为此时原点(0,0)的位置在效果图的最中间位置,所以绘制背景图时的(x,y)应该为(-img->width() / 2, -img->height() / 2);

指针图的 X 值为负的宽度的一半,Y 值为负的高度的值加上宽度的一半。调用 painter.rotate()函数是用来将画布以坐标原点为中心进行顺时针旋转指定的角度。所以定义一个成员变量来给这个角度进行传值。

原点图的(x,y)应该为(-overlay.width() / 2, -overlay.height() / 2);

5.改变指针角度

定义一个改变指针角度值的函数 void valueChanged(int value);

void CDialBox::valueChanged(int value)
{
m_nValue = value;
update();
}

设置角度的值,调用 update()函数进行刷新。调用 update();函数会执行 paintEvent();

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。