qt qml 九宫格划指锁屏视图

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

【先看效果】

【下载】

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

【核心代码】

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

        LockPoint{ptWidth; lockId: 1;}
        LockPoint{ptWidth; lockId: 2;}
        LockPoint{ptWidth; lockId: 3;}
        LockPoint{ptWidth; lockId: 4;}
        LockPoint{ptWidth; lockId: 5;}
        LockPoint{ptWidth; lockId: 6;}
        LockPoint{ptWidth; lockId: 7;}
        LockPoint{ptWidth; lockId: 8;}
        LockPoint{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();
        }
    }