qt qml 九宫格划指锁屏视图

九宫格划指锁屏视图
Lisence: MIT, 请保留本文档说明
Author: surfsky.cnblogs.com 2015-02

【先看效果】

【下载】

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

【核心代码】

    //---------------------------------- 2     // 放置9个圆点 3     //---------------------------------- 4     Grid{ 5         id: grid 6         width: 400 7         height: 400 8         anchors.bottom: parent.bottom 9         anchors.horizontalCenter: parent.horizontalCenter10         anchors.bottomMargin: 5011         columns: 312         rows: 313         spacing: (width-ptWidth*3)/214 15         LockPoint{width:ptWidth; lockId: 1;}16         LockPoint{width:ptWidth; lockId: 2;}17         LockPoint{width:ptWidth; lockId: 3;}18         LockPoint{width:ptWidth; lockId: 4;}19         LockPoint{width:ptWidth; lockId: 5;}20         LockPoint{width:ptWidth; lockId: 6;}21         LockPoint{width:ptWidth; lockId: 7;}22         LockPoint{width:ptWidth; lockId: 8;}23         LockPoint{width:ptWidth; lockId: 9;}24     }25 26 27     //----------------------------------28     // 绘制圆点和连线29     //----------------------------------30     Canvas{31         id: canvas32         anchors.fill: grid33         opacity: 0.634         MouseArea{35             id: area36             anchors.fill: parent37             onPressed: checkAndDraw();38             onPositionChanged: checkAndDraw();39             // 检测并绘制40             function checkAndDraw(){41                 if(area.pressed) {42                     root.checkLockPoints();43                     canvas.requestPaint();44                 }45             }46         }47 48 49         onPaint: {50             var ctx = getContext("2d");51             ctx.clearRect(0, 0, width, height);52             drawPasswordGraphy(ctx);53         }54 55         // 绘制密码图56         function drawPasswordGraphy(ctx){57             var lastPt = null;58             for (var i=0; i<lockPoints.length; i++){59                 var currPt = lockPoints[i];60                 drawRound(ctx, currPt.center, 30, 'yellow');61                 if (lastPt != null)62                     drawLine(ctx, lastPt.center, currPt.center, ptLineWidth, 'yellow');63                 lastPt = currPt;64             }65         }66 67         // 绘制圆点68         function drawRound(ctx, pt, r, c){69             ctx.beginPath();70             ctx.arc(pt.x, pt.y, r, 0, 2*Math.PI);71             ctx.fillStyle = c;72             ctx.fill();73         }74 75         // 绘制线段76         function drawLine(ctx, p1, p2, w, c){77             ctx.beginPath();78             ctx.moveTo(p1.x, p1.y);79             ctx.lineTo(p2.x, p2.y);80             ctx.lineWidth = w;81             ctx.strokeStyle = c;82             ctx.stroke();83         }84     }