Qt 实现遮罩层效果————附实现代码和效果图

文章目录

• ​​1 使用两个label重叠来实现​​

• ​​1.1 效果​​
• ​​1.2 实现代码​​

• ​​2 使用图像叠加模式（CompositionMode）​​

1 使用两个label重叠来实现

1.1 效果

1.2 实现代码

//构造函数
MyWidget::MyWidget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::MyWidget)
{
    ui->setupUi(this);
    //实现麻将刚好覆盖label
    QPixmap discardMj1_1(":/img/9.png");
    discardMj1_1.scaled(ui->label->size(), Qt::IgnoreAspectRatio);
    ui->label->setScaledContents(true);
    ui->label->setPixmap(discardMj1_1);
}

//点击事件
//颜色按钮
void MyWidget::on_pushButton_clicked()
{
    color = QColorDialog::getColor(Qt::red, this, tr("颜色对话框"));
         ui->label_4->setStyleSheet(QString("background-color:rgba(%1 , %2 , %3 , 0.45);").arg(color.red()).arg(color.green()).arg(color.blue()));
    // qDebug()<<"red:"<
    }

设计师界面（一样的大小和位置）：

2 使用图像叠加模式（CompositionMode）

QString imgPath = "D:/1.png";
            QPixmap tempImg(imgPath);
            QPainter painter(&tempImg);
            painter.setCompositionMode(QPainter::CompositionMode_Multiply);
           //RGB三色+透明度（数值0表示完全透明，数值255表示不透明）
            painter.fillRect(tempImg.rect(), QColor(255, 100, 100, 220));
            painter.end();

setCompositionMode可以设置的样式如下：

CompositionMode_DestinationIn

CompositionMode_ColorBurn

CompositionMode_ColorDodge

CompositionMode_Darken

CompositionMode_Destination

CompositionMode_DestinationAtop

CompositionMode_DestinationOut

CompositionMode_DestinationOver

CompositionMode_Difference

CompositionMode_Exclusion

CompositionMode_HardLight

CompositionMode_Lighten

CompositionMode_Multiply

CompositionMode_Overlay

CompositionMode_Plus

CompositionMode_Screen

CompositionMode_SoftLight

CompositionMode_Source

CompositionMode_SourceAtop 取交集

CompositionMode_SourceIn

CompositionMode_SourceOut 这种就直接挖空了

CompositionMode_SourceOver

CompositionMode_Xor