1. 程式人生 > >QT半透明圖片疊加顯示

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