QT半透明图片叠加显示

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

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

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

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

QT半透明图片叠加显示_第1张图片

注意:

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 
#include 
#include 
#include 
#include 
#include 
#include 

#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);
}

你可能感兴趣的:(C/C++,QT,QT/样式表qss)