Qt 之 QLabel 设置面罩

效果图

QLabel 是Qt 中的标签类，一般情况我们只是设置文字描述，但是QLabel不仅仅只是显示一些文字介绍那么简单。QLabel支持Html中标签的使用，同时可以设置普通图片和动态图。这里简单介绍一下如何为QLable设置面罩。

代码很简单，通过设置不同形状的面罩可以达到不同的效果。

1、设置动态图片

QPixmap pixmapMask(":/Resources/maskRound.png");
m_label = new QLabel(this);
m_label->move(20, 20);
m_label->setMask(pixmapMask.mask());
m_label->setFixedSize(QSize(58, 58));
QMovie* movie = new QMovie(":/Resources/image.gif");
movie->setScaledSize(QSize(m_label->width(), m_label->height()));
m_label->setMovie(movie);
movie->start(); 

2、设置普通图片

QPixmap maskRound(":/Resources/maskRound.png");
m_labelRound = new QLabel(this);
m_labelRound->move(120, 20);
m_labelRound->setFixedSize(QSize(60, 60));
m_labelRound->setMask(maskRound.mask());
m_labelRound->setPixmap(QPixmap(":/Resources/image.jpg").scaled(m_labelRound->width(), m_labelRound->height()));

3、设置鼠标互动的动态效果

见图中第一个图片，在鼠标不在图片上时显示为白色边框，在鼠标浮动在该图片上时边框显示为绿色。这种效果也很容易实现，一个QPushButton和一个QLabel组合即可实现。

QPixmap pixmapMask(":/Resources/maskRound.png");
m_label = new QLabel(this);
m_label->move(20, 20);
m_label->setMask(pixmapMask.mask());
m_label->setFixedSize(QSize(58, 58));
QMovie* movie = new QMovie(":/Resources/image.gif");
movie->setScaledSize(QSize(m_label->width(), m_label->height()));
m_label->setMovie(movie);
movie->start(); 

m_pButton = new QPushButton(this);
m_pButton->setFixedSize(QSize(66, 66));
m_pButton->move(16, 16);
m_pButton->setObjectName("MyButton");
this->setStyleSheet("QPushButton#MyButton {\
                     border-image: url(:/Resources/buttonback.png); }\
                     QPushButton#MyButton:hover  { \
                     border-image: url(:/Resources/buttonbackhover.png);}");

Qt 之 QLabel 设置面罩代码下载