qt qml 九宫格划指锁屏视图

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

【先看效果】

【下载】

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

【核心代码】

     //----------------------------------
     // 放置9个圆点
     //----------------------------------
     Grid{
         id: grid
         width: 400
         height: 400
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottomMargin: 50
         columns: 3
         rows: 3
         spacing: (width-ptWidth*3)/2

         LockPoint{width:ptWidth; lockId: 1;}
         LockPoint{width:ptWidth; lockId: 2;}
         LockPoint{width:ptWidth; lockId: 3;}
         LockPoint{width:ptWidth; lockId: 4;}
         LockPoint{width:ptWidth; lockId: 5;}
         LockPoint{width:ptWidth; lockId: 6;}
         LockPoint{width:ptWidth; lockId: 7;}
         LockPoint{width:ptWidth; lockId: 8;}
         LockPoint{width:ptWidth; lockId: 9;}
     }

     //----------------------------------
     // 绘制圆点和连线
     //----------------------------------
     Canvas{
         id: canvas
         anchors.fill: grid
         opacity: 0.6
         MouseArea{
             id: area
             anchors.fill: parent
             onPressed: checkAndDraw();
             onPositionChanged: checkAndDraw();
             // 检测并绘制
             function checkAndDraw(){
                 if(area.pressed) {
                     root.checkLockPoints();
                     canvas.requestPaint();
                 }
             }
         }

         onPaint: {
             var ctx = getContext("2d");
             ctx.clearRect(0, 0, width, height);
             drawPasswordGraphy(ctx);
         }

         // 绘制密码图
         function drawPasswordGraphy(ctx){
             var lastPt = null;
             for (var i=0; i<lockPoints.length; i++){
                 var currPt = lockPoints[i];
                 drawRound(ctx, currPt.center, 30, 'yellow');
                 if (lastPt != null)
                     drawLine(ctx, lastPt.center, currPt.center, ptLineWidth, 'yellow');
                 lastPt = currPt;
             }
         }

         // 绘制圆点
         function drawRound(ctx, pt, r, c){
             ctx.beginPath();
             ctx.arc(pt.x, pt.y, r, 0, 2*Math.PI);
             ctx.fillStyle = c;
             ctx.fill();
         }

         // 绘制线段
         function drawLine(ctx, p1, p2, w, c){
             ctx.beginPath();
             ctx.moveTo(p1.x, p1.y);
             ctx.lineTo(p2.x, p2.y);
             ctx.lineWidth = w;
             ctx.strokeStyle = c;
             ctx.stroke();
         }
     }