Qt使用图片旋转绘制圆环，圆弧类UI界面（方法可适用于winform和WPF等其余UI绘制）

先上效果图：

这个主要是一个试剂杯盘的循环图，相信大家伙一定都想到了使用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使用图片旋转绘制圆环，圆弧类UI界面（方法可适用于winform和WPF等其余UI绘制）

最新文章

热门文章