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

最新推荐文章于 2024-07-03 23:22:21 发布

繁星蓝雨

最新推荐文章于 2024-07-03 23:22:21 发布

阅读量2.9k

点赞数

分类专栏： GUI编程之Qt 文章标签： Qt 遮罩层覆盖层

本文链接：https://blog.csdn.net/qq_33375598/article/details/106270147

版权

GUI编程之Qt 专栏收录该内容

71 篇文章 37 订阅

订阅专栏

文章目录

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:"<<color.red()<<"blue:"<<color.blue()<<"green:"<<color.green();
    }

设计师界面（一样的大小和位置）：
在这里插入图片描述

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

在这里插入图片描述
参考：https://blog.csdn.net/chduguxue/article/details/82902980?utm_medium=distribute.pc_relevant.none-task-blog-blogcommendfrommachinelearnpai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-blogcommendfrommachinelearnpai2-4.channel_param