Qt Quick实现九宫格划指锁屏视图

来源：互联网发布：linux安装输入法编辑：程序博客网时间：2024/05/22 09:38

【先看效果】

【核心代码】

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

原文链接：http://www.cnblogs.com/surfsky/p/4290723.html

源码链接：http://download.csdn.net/download/caoshangpa/10117465

阅读全文

1 0