QT半透明图片叠加显示

需求描述：两张图片，一张作为背景，另一张半透明，作为前景。透过前景可以看到背景图

1、用QPixmap对象载入背景图片，或者用paint代码在QPixmap自己画图；把QPixmap放入QLabel中显示；

2、用QPixmap对象载入半透明图片，或者用paint代码在QPixmap自己画半透明的图；把把QPixmap放入QLabel中显示；

3、把这两个label重叠，即可看到效果。

注意:

1、自己在QPixmap绘制半透明图片时，首先要使用fill函数将其整张Pixmap填充为透明。根据manual的要求，在paint有效时，fill函数是无效的，所以，要想使用fill，要么别在paint有效期间，要么执行paint.end()之后再fill。见示例代码

2、在本例中，label作为Pixmap的容器，label的如果设置了背景色，而Pixmap又是半透明时，透过Pixmap可以看到label的背景色（实质是Pixmap和label背景色的叠加）

使用样式表设置label半透明背景的代码：

border:2px solid;/*黑色实线边框，2px宽*/
border-color: black;
color:blue;/*蓝色文字*/
background-color: rgba(255, 0, 0, 100);/*红色半透明*/

代码：

#include <QPainter>
#include <QPen>
#include <QFile>
#include <QMessageBox>
#include <qDebug>
#include <QColor>
#include <QBrush>

#define WIDTH 300
#define HEIGHT 300

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    pPixmap = new QPixmap(WIDTH,HEIGHT);
    //pPixmapFront = new QPixmap("front.png");//加载半透明图片
    pPixmapFront = new QPixmap(WIDTH,HEIGHT);
    //pPixmapFront->fill(Qt::transparent);//填充为透明

    ui->label_back->setScaledContents(true);//内容自适应label的大小，这样调整lable的大小就可以调整图片的大小
    ui->label_front->setScaledContents(true);//内容自适应label的大小，这样调整lable的大小就可以调整图片的大小
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton_clicked()
{
    QPainter painter(pPixmap);             // 创建QPainter对象
    QPoint point(100,100);//x, y
    QPen pen;

    painter.setBrush(Qt::cyan);
    painter.setPen(Qt::red);
    painter.drawRect(0, 0, WIDTH, HEIGHT);//红色边框，青色填充
    painter.setBrush(Qt::NoBrush);
    painter.setPen(Qt::red);
    painter.drawRect(0, 0, WIDTH/2, HEIGHT/2);//红色边框，无填充

    pen.setColor(Qt::red);
    pen.setWidth(20);
    painter.setPen(pen);
    painter.drawPoint(point);//用粗笔画点

    ui->label_back->setPixmap(*pPixmap);
}

void MainWindow::on_pushButton_paintFront_clicked()
{
    QPainter painter(pPixmapFront);             // 创建QPainter对象
    QColor color;
    QPen pen;

    painter.end();//使fill函数生效
    pPixmapFront->fill(Qt::transparent);//透明填充Pixmap，清空pixmap
    painter.begin(pPixmapFront);

    color.setRgb(0, 0, 255, 100);//蓝色半透明
    painter.setPen(color);//设置笔和笔的颜色
    painter.setBrush(color);//设置刷子和刷子颜色
    painter.drawRect(0, 0, WIDTH, HEIGHT/2);//画蓝色半透明矩形

    pen.setColor(Qt::green);
    pen.setWidth(3);
    painter.setPen(pen);//设置笔和笔的颜色
    painter.drawLine(0,0,WIDTH, HEIGHT);//画一条绿色斜线col1,row1,col2,row2

    ui->label_front->setPixmap(*pPixmapFront);
}

QT半透明图片叠加显示

猜你喜欢