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