一、演示

支持自定义行列数；
支持自定义颜色；
支持自定义吸附半径。

二、简述

1.使用GridView显示圆圈，方便自定义。数据模型使用一个selectedIndex数组，保存选中index。
2.画线使用Canvas，借助选中的索引数组，变化时刷新连线。
3.鼠标检测使用一个MouseArea，当光标移动时，检测光标位置所处的格子索引，再做坐标转换。计算光标距离格子中心的半径，处于圆圈中就选中该索引。

三、代码

main.qml

import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")PatternPassword{width: 300height: 300anchors.centerIn: parentonReleased: console.log("released:",selectIndexs)}
}

图案解锁控件源码

import QtQuick/*图案密码控件通过width,height指定控件的宽高。row,column指定图案密码的行数和列数。网格宽=width/column,网格高=height/row。通过hotRadius指定网格中圆圈的半径，单位像素。半径以内可以吸附线。、lineWidth指定线宽，单位像素。[signal] released() 图案松开信号，通过selectIndexs获取选中的点。index从0开始，从左到右依次+1。
*/
Item {id: rootproperty int row: 4                                             //网格行数property int column: 4                                          //网格列数property int pressedIndex: -1                                   //鼠标按到了某个网格的热区内property var selectIndexs: []                                   //鼠标滑过选中的点property int lineWidth: 6                                       //连线宽度，圆圈线宽property int hotRadius: Math.min(cellWidth,cellHeight) * 0.2    //热区半径，半径之内点会被选中property color color: "white"                                   //圆圈颜色property color borderColor: "darkGray"                          //默认圆圈边框颜色property color selectedBorderColor: "gray"                      //选中圆圈边框颜色property color lineColor: "gray"                                //连线颜色readonly property alias pressed: mouseArea.pressed              //网格中有鼠标按下readonly property alias cellWidth: gridView.cellWidth           //网格宽度readonly property alias cellHeight: gridView.cellHeight         //网格高度signal released()                                               //图案松开//绘制选中点之间的连线Canvas{id: canvasanchors.fill: parentonPaint: {var ctx = getContext("2d")ctx.lineJoin = 'round';ctx.clearRect(0,0,canvas.width,canvas.height)if(0 === selectIndexs.length)return ;ctx.strokeStyle = root.lineColorctx.lineWidth = lineWidthfor(var i = 0; i < root.selectIndexs.length; i++) {var posX = (Math.floor(selectIndexs[i] % column) + 0.5) * cellWidthvar posY = (Math.floor(selectIndexs[i] / column) + 0.5) * cellHeightif(0 === i){ctx.beginPath()ctx.moveTo(posX, posY)}else{ctx.lineTo(posX, posY)}}ctx.lineTo(mouseArea.mouseX, mouseArea.mouseY)ctx.stroke()}}//图案网格圈显示GridView{id: gridViewanchors.fill: parentcellHeight: gridView.height / rowcellWidth: gridView.width / columninteractive: falsemodel: row * columndelegate: Item{property bool checked: root.pressed ? (pressedIndex === index? true : checked) : falsewidth: gridView.cellWidthheight: gridView.cellHeightRectangle{anchors.centerIn: parentwidth: hotRadius * 2height: widthborder.width: lineWidthborder.color: checked ?  root.selectedBorderColor : root.borderColorcolor: root.colorradius: width / 2}}}//检测选中点模型管理MouseArea{id: mouseAreaanchors.fill: parentonPressedChanged: refresh()onMouseXChanged: refresh()onMouseYChanged: refresh()function refresh(){if (!pressed || mouseX >= width || mouseY >= height|| mouseX < 0 ||  mouseY < 0){canvas.requestPaint()return}//找到光标所在的格子var mouseRow = Math.floor(mouseY / cellHeight)var mouseColumn = Math.floor(mouseX / cellWidth)//坐标转换 以当前格子中心点为0,0点var newPosX = mouseX - (mouseColumn + 0.5) * cellWidthvar newPosY = mouseY - (mouseRow + 0.5) * cellHeight//计算与原点的距离，判断是否在圆形热区中var distance = Math.sqrt(newPosX * newPosX + newPosY * newPosY);if (distance < hotRadius) {//计算热区的index，添加选中var index = mouseRow * root.column + mouseColumnif(-1 === selectIndexs.indexOf(index)) {selectIndexs.push(index)pressedIndex = index}}else{pressedIndex = -1}//重绘连线canvas.requestPaint()}onPressed: selectIndexs = []onReleased: {root.released()selectIndexs = []}}
}

由于作者能力有限，文章难免疏漏，如有错误之处，欢迎指出，及时更改

QML 实现九宫格图案解锁相关推荐

java实现九宫格解锁_轻松实现Android自定义九宫格图案解锁
Android实现九宫格图案解锁,自带将图案转化成数字密码的功能,代码如下: LockPatternView.java package com.jackie.lockpattern; import a ...
九宫锁屏图案有多少种c语言编程,手机九宫格图案解锁问题，编程高手戳进来！...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼数学吧里看到的一个有趣问题,题目描述很简单: 求手机九宫格图案解锁一共有多少种答案.规则大家应该都知道,至少连四个点,最多连九个点,一条直线上的三个点只有 ...
Android实现九宫格图案解锁
Android实现九宫格图案解锁前言:自定义了一个九宫格的VIew来绘制九宫格图案,实现了绘制图案解锁的功能. 效果图如下: 1. 第一步自定义九宫格View. public class Lock ...
用C语言计算手机的九宫格图案解锁总共能绘出多少种图案
之前在学校的一个社团招募大一新生时,给出了这个题目: 用程序编写完成九宫格图案解锁总共能绘出多少种图案需要满足的要求有: 1.至少经过四个点: 2.不能重复经过同一个点: 3.路径上的中间点不能跳过 ...
九宫格图案解锁、支付宝解锁、微信钱包解锁
先来看看效果: 1.九宫格界面实现了密码的绘制,包括:绘制中.绘制不符合要求.绘制成功3个状态 2.绘制过程的监听:绘制错误.绘制成功,以及密码点所对应的密码 3.附上源码(编码:UTF-8,可导入到 ...
android 九宫格图案解锁
项目可能的需要,自己尝试写了一个九宫格解锁,在此记录,以作笔记. 先上效果图关于项目的分析,见下图 width 九宫格控件的宽度,height 九宫格的控件的 ...
手机的九宫格图案解锁总共能绘出多少种图案？（hiho模拟面试题2 - google在线技术笔试模拟）
滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致 ...
手机的九宫格图案解锁总共能绘出多少种图案？LeetCode 351. Android Unlock Patterns
需要满足的要求有: 至少经过四个点: 不能重复经过同一个点: 路径上的中间点不能跳过(如从1到3一定会经过2): 如果中间的点是之前已经用过的,那么这个点就可以被跳过(如213,因为2已经被用过,1就 ...
2021-10-14 Android app 九宫图案解锁实现
一.效果图如下. 二.废话不多说,直接read the fuck code. 1.代码预览 2.src\main\java\com\giada\ninelock\MainActivity.java ...

QML 实现九宫格图案解锁

图案解锁

一、演示

二、简述

三、代码

QML 实现九宫格图案解锁相关推荐

最新文章

热门文章