C++| QT图片调整透明度叠加

实际效果

三个图片（QLabel）显示，两个按钮（QPushButton）加载图片，一个（Slider）滑动条。
三个图片：从左到右，显示图像A、图像B以及透明度叠加后的图像。
两个按钮：“打开图像A”打开图像A并显示；“打开图像B”打开图像B并显示。
滑动条：控制透明度比例。

界面UI

放置控件

把控件按照前面“实际效果”取出并放置。

设置布局

一个垂直布局包括了两个水平布局。

布局以及控件相关的名字。

界面自适应

随着窗口调整：
思路：centralwidget变为栅格布局（虽然前面我的图片上已经是，但是新建的时候通常是不能修改的表单布局Form Layout）。
方法：工具->界面编辑器->栅格布局

调整布局中比例：
情况：希望垂直布局中上面部分比下面大。
方法：右键对象“upLayout”升级为Qwidget，让其具有Qwidget属性。设置sizePolicy属性，修改其垂直伸展因子，让其为1即可。此时“downLayout”默认垂直伸展因子为0，只会保持一个建议尺寸。
补充知识点：甚至布局中的伸展因子设置的是不同元素在其中自适应的比例，为0时会保持一个建议尺寸。

处理QLabel添加图片后，布局错乱：
原因：为QLabel添加图片通常都会分辨率大于分配的，会挤压其它空间，从而导致布局错乱。
表现：我遇到情况表现为，水平方向缩小一定大小后无法缩小。
方法：修改“upLayout” 的sizePolicy属性，让水平策略和垂直策略都为Ignored。

代码

项目工程的文件

初始化

变量：在界面cpp文件中声明两个地址全局变量，记录打开图像A和B的路径。

QString pathA,pathB;

滑动条值：在界面cpp文件中的构造函数里面初始化滑动条的范围和初始值。

PicMix::PicMix(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::PicMix)
{
    ui->setupUi(this);

    ui->sliderTrans->setMaximum(100);
    ui->sliderTrans->setMinimum(0);
    ui->sliderTrans->setValue(50);
}

图片调整透明度叠加函数的添加：在界面的h和cpp文件中添加。

void display_picMix(int value);

按钮功能

采用自动关联信号和槽的方法，右键“按钮”->转到槽。

代码：

void PicMix::on_btnA_clicked()
{
    pathA=QFileDialog::getOpenFileName();

    ui->labelA->setScaledContents(true);
    ui->labelA->setPixmap(pathA);

    display_picMix(ui->sliderTrans->value());
}


void PicMix::on_btnB_clicked()
{
    pathB=QFileDialog::getOpenFileName();

    ui->labelB->setScaledContents(true);
    ui->labelB->setPixmap(pathB);

    display_picMix(ui->sliderTrans->value());
}

滑动条功能

采用自动关联信号和槽的方法，右键“按钮”->转到槽。

代码：

void PicMix::on_sliderTrans_valueChanged(int value)
{
    display_picMix(value);
}

图片调整透明度叠加

函数输入滑条的值，然后计算图像A和图像B的像素值，根据value调整透明度后叠加显示出来。

void PicMix::display_picMix(int value){
    // value是滑动条当前值
    // 地址是否存在
    if(pathA.isNull()||pathB.isNull())
        return ;
    // 读取图片A和图片B的数据
    QImage imageA,imageB;
    imageA.load(pathA);
    imageB.load(pathB);
    // 获取图片高度和宽度，选择最小的
    int w,h;
    w=qMin(imageA.width(),imageB.width());
    h=qMin(imageA.height(),imageB.height());
    // 声明imageMix用来存储叠加后的图像数据
    QImage imageMix(w,h, QImage::Format_ARGB32);

    float alpha=value/100.0;// 计算透明程度
    QColor colorA,colorB;
    int r,g,b;
    for(int x=0;x<w;x++){
        for(int y=0;y<h;y++){
            colorA=QColor(imageA.pixel(x,y));
            colorB=QColor(imageB.pixel(x,y));
            r=colorA.red()*alpha+colorB.red()*(1-alpha);
            g=colorA.green()*alpha+colorB.green()*(1-alpha);
            b=colorA.blue()*alpha+colorB.blue()*(1-alpha);
            imageMix.setPixel(x,y,qRgb(r,g,b));
        }
    }

    ui->labelMix->setScaledContents(true);
    ui->labelMix->setPixmap(QPixmap::fromImage(imageMix));
}