先上效果图:
这个主要是一个试剂杯盘的循环图,相信大家伙一定都想到了使用GDI和三角函数来进行计算,但如果没有实际尝试,可能会踩一些坑,留此文帮助大家方便快捷的绘制出类似圆环的UI效果。
这里主要是使用图片的三角函数来计算图片的定标位置,然后确定图片在坐标系中的绝对坐标或者相对坐标,我们先来看具体代码:
for (int i = 0; i < 16; ++i) { lstLabel[i]->setScaledContents(true); lstLabel[i]->setParent(ui->widgetReagent); lstLabel[i]->setScaledContents(true);
//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等等是经过你旋转之后的图。旋转部分代码为:
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));
***以下略***
这边务必注意这个图片的size和label的size,否则就会出现图片背景冲突重叠的情况。
标签:Qt,120,lstLabel,UI,坐标,绘制,6.28,图片 From: https://www.cnblogs.com/jyj666/p/17101429.html