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>
posted @   苏州の酱醋茶  阅读(564)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
点击右上角即可分享
微信分享提示