用Qt模拟刮奖图层_qt图层

效果

思路

1、刮奖图层分为两层，一个底层，一个顶层。刮奖的时候，也就是鼠标拖动的时候，将顶层变透明，然后暴露底层。
2、要将顶层图片变透明，那么顶层图片必须有Alpha通道。底层无所谓，普通RGB就行，底层也可以不用图片，直接绘制文本就行了。
3、鼠标拖动的时候变透明，也就是将鼠标路径变透明，所以需要将画刷设置为Clear模式，将指定图层区域绘画成透明区域。
4、刮图层时候，采取画线形式，笔端设置圆点笔帽，看起来比较接近现实。

开工

1、首先准备顶层图片和两个QPoint来表示鼠标按下和拖动的坐标

QImage *mTopImg;
QPoint mStartPos;
QPoint mCurrPos;
mTopImg = new QImage(200, 80, QImage::Format_ARGB32_Premultiplied);
mTopImg->fill(Qt::yellow);
1
2
3
4
5

2、接着准备一个画刮奖图层的函数，并重写paintEvent

void MainWindow::drawScratchCards()
{
    QPainter p(this);
    QFont font;
    font.setPointSize(30);
    font.setFamily("Microsoft YaHei");
    p.setFont(font);
    p.drawText(10, 10, 150, 60, Qt::AlignCenter, "中奖啦"); // 先画底层
    p.drawImage(10, 10, *mTopImg); // 再画上层
    p.end();
}

void MainWindow::paintEvent(QPaintEvent *event)
{
    drawScratchCards();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、重写鼠标按下事件和移动事件

void MainWindow::mousePressEvent(QMouseEvent *event)
{
	mStartPos = event->pos();
	QWidget::mousePressEvent(event);
}

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
	mCurrPos = event->pos();
	{
        QPainter p;
        p.begin(mTopImg);
        p.setCompositionMode(QPainter::CompositionMode_Clear);
        p.setBrush(Qt::NoBrush);
        p.setPen(QPen(Qt::yellow, 4, Qt::SolidLine, Qt::RoundCap));
        p.drawLine(mStartPos, mCurrPos);
        p.end();
    }
    update();
    QWidget::mouseMoveEvent(event);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样就简单完成一个刮奖图层了 (ノへ￣、)