实际效果
三个图片(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));
}