qt qml 刮刮卡效果

用canvas+mouseArea实现的刮刮卡效果。

表层是一层色彩，用手指划开，可看到下面的文字
Lisence: MIT, 请保留本文档说明
Author: surfsky.cnblogs.com 2015-02

【先看效果】

 

【下载】

http://download.csdn.net/detail/surfsky/8445011

【核心代码】

    Canvas {
        id: canvas
        anchors.fill: parent

        //
        property bool isFirstPaint : true;
        property point lastPt;

        //
        onPaint: {
            var ctx = getContext('2d');
            if (isFirstPaint){
                // 首次绘制刮刮层图案
                ctx.fillStyle = root.maskColor;
                ctx.fillRect(0, 0, width, height);
                isFirstPaint = false;
            }
            else{
                // 去除鼠标位置的图案
                clearRound(ctx, lastPt, 20);
                lastPt = Qt.point(area.mouseX, area.mouseY);
            }
        }

        // 清除圆形区域
        function clearRound(ctx, p, r)
        {
            ctx.save();
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.arc(p.x, p.y, r, 0, 2*Math.PI, false);
            ctx.fill();
            ctx.restore();
        }

        // 记录下最后的鼠标点，并请求canvas重绘
        MouseArea {
            id: area
            anchors.fill: parent
            onPressed: {canvas.lastPt = Qt.point(mouseX, mouseY);}
            onPositionChanged: {canvas.requestPaint();}
        }
    }