Qt使用图片旋转绘制圆环,圆弧类UI界面(方法可适用于winform和WPF等其余UI绘制)
先上效果图:

这个主要是一个试剂杯盘的循环图,相信大家伙一定都想到了使用GDI和三角函数来进行计算,但如果没有实际尝试,可能会踩一些坑,留此文帮助大家方便快捷的绘制出类似圆环的UI效果。
这里主要是使用图片的三角函数来计算图片的定标位置,然后确定图片在坐标系中的绝对坐标或者相对坐标,我们先来看具体代码:
1 2 3 4 5 6 7 | for ( int i = 0; i < 16; ++i) { lstLabel[i]->setScaledContents( true ); lstLabel[i]->setParent(ui->widgetReagent); lstLabel[i]->setScaledContents( true );<br> //120是大圆环半径,+的150是x坐标和y坐标的偏移(就是圆心坐标离坐标系原点的位置偏移) lstLabel[i]->move(static_cast< int >((qSin((i * 6.28) / 16.0) * 120) + 150),static_cast< int >((qCos((i * 6.28) / 16.0) * 120) + 150)); } |
这时候有小伙伴可能会问这个6.28是什么意思,圆周率是3.14,我们这边6.28就是2*3.14,这里的 qSin((i * 6.28) / 16.0) * 120 就是图片的x坐标, qCos((i * 6.28) / 16.0) * 120 是图片的y坐标(具体证明方法略,初中简单的三角函数自己看一下就会)。
但是这个图就和地球公转自转一样,如果你只写了上面那段代码你会发现你最后得出的图是这样的:
因此这边需要再加上图片本身的旋转,这其实比上面的难计算一点,因为请注意看图:
这边是有原图片的白色背景的,那么很显然我们不能这样交付给客户,此时有两种方法(不找美工换图的情况下)解决此问题:
1.增大圆弧的半径。
2.进行图片的角度旋转。
这边我介绍的就是图片的角度旋转,因为一共是16张图片,一圈是360度,因此图片1和图片2的旋转角度应该是相差360/16=22.5度。
就是说图1是原图,就是美工提供给你的基图,2,3等等是经过你旋转之后的图。旋转部分代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | QImage t = QImage( "://image/test.png" ); QPixmap map = QPixmap::fromImage(t); map.scaled(QSize(35,35), Qt::KeepAspectRatio); for ( int i=0;i<16;i++) { QLabel *lbl= new QLabel(); lstLabel.append(lbl); QMatrix matrix; matrix.rotate(22.5*(16-i)); lstMatrix.append(matrix); lstLabel[i]->setFixedSize(35,35); } lstLabel[0]->setPixmap(map); lstLabel[1]->setPixmap(map.transformed(lstMatrix[1], Qt::SmoothTransformation));<br> ***以下略*** |
这边务必注意这个图片的size和label的size,否则就会出现图片背景冲突重叠的情况。
1 | <em id= "__mceDel" > </em> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧