1.UI的结构
开始画图形界面,首先确定UI的大小,找到360新版特性界面的皮肤,可以看到:
4个不同的页面的像素为:680 * 370
而最顶层的一层透明页面像素为:680 * 372
如图:
QSize(680, 370):
QSize(680, 372):
现在可以确定下来,UI的大小为(680, 372);但4个页面只在370个像素空间中运动,最上面空余的为透明区域,其中在X轴(20-100)的矩形区域,为玻璃效果的区域,这些均为图片贴出。下面给个示意图:
在图中,2个像素空间中,红色区域使用Qt中的setMask函数来遮掩,绿色矩形区域为要显示的图片部分,此为玻璃效果。
所以剩下的所有控件均活动在矩形:点(0, 2) -> 点(680, 372)空间中。
在这张图中,画出了UI的设计框架,具体还是根据程序进行调整最佳位置。
2.画出最基本的背景图
只需重新实现QWidget的paintEvent事件,就可以达到上述所说的效果:
代码很简单,关键在于set
开始画图形界面,首先确定UI的大小,找到360新版特性界面的皮肤,可以看到:
4个不同的页面的像素为:680 * 370
而最顶层的一层透明页面像素为:680 * 372
如图:
QSize(680, 370):
QSize(680, 372):
现在可以确定下来,UI的大小为(680, 372);但4个页面只在370个像素空间中运动,最上面空余的为透明区域,其中在X轴(20-100)的矩形区域,为玻璃效果的区域,这些均为图片贴出。下面给个示意图:
在图中,2个像素空间中,红色区域使用Qt中的setMask函数来遮掩,绿色矩形区域为要显示的图片部分,此为玻璃效果。
所以剩下的所有控件均活动在矩形:点(0, 2) -> 点(680, 372)空间中。
在这张图中,画出了UI的设计框架,具体还是根据程序进行调整最佳位置。
2.画出最基本的背景图
只需重新实现QWidget的paintEvent事件,就可以达到上述所说的效果:
void Preview360::paintEvent(QPaintEvent *)
{
QBitmap bitmap(this->size());
QPainter painter(&bitmap);
painter.fillRect(bitmap.rect(), Qt::white);
painter.setBrush(QColor(0, 0, 0));
//填充一个以圆弧为4个角的矩形,使窗体的四个角变成圆弧
painter.drawRoundedRect(QRect(0, 2, this->width(), this->height()-2), 5, 5);
//画出(0, 2) -> (2, 100)区域
painter.drawRoundedRect(QRect(20, 0, 120-20, 2), 2, 2);
setMask(bitmap);
}
代码很简单,关键在于set