qt qml 刮刮卡效果

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

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

【先看效果】

 

【下载】

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

【核心代码】

 1     Canvas {

 2         id: canvas

 3         anchors.fill: parent

 4 

 5         //

 6         property bool isFirstPaint : true;

 7         property point lastPt;

 8 

 9         //

10         onPaint: {

11             var ctx = getContext('2d');

12             if (isFirstPaint){

13                 // 首次绘制刮刮层图案

14                 ctx.fillStyle = root.maskColor;

15                 ctx.fillRect(0, 0, width, height);

16                 isFirstPaint = false;

17             }

18             else{

19                 // 去除鼠标位置的图案

20                 clearRound(ctx, lastPt, 20);

21                 lastPt = Qt.point(area.mouseX, area.mouseY);

22             }

23         }

24 

25         // 清除圆形区域

26         function clearRound(ctx, p, r)

27         {

28             ctx.save();

29             ctx.globalCompositeOperation = 'destination-out';

30             ctx.beginPath();

31             ctx.arc(p.x, p.y, r, 0, 2*Math.PI, false);

32             ctx.fill();

33             ctx.restore();

34         }

35 

36         // 记录下最后的鼠标点，并请求canvas重绘

37         MouseArea {

38             id: area

39             anchors.fill: parent

40             onPressed: {canvas.lastPt = Qt.point(mouseX, mouseY);}

41             onPositionChanged: {canvas.requestPaint();}

42         }

43     }