fly-gesture-unlock 手势解锁库

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量396 收藏 9
点赞数 11
分类专栏： Fly Gesture Unlock 文章标签： 前端 typescript 开源软件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f18855666661/article/details/136693459
版权
作者分享了一款开源的前端九宫格手势解锁库，提供完整DEMO和高度自定义选项，包括锚点、样式和事件回调，同时还有类似B站弹幕效果的fly-barrage库。
摘要由CSDN通过智能技术生成

最近要实现前端九宫格手势解锁功能，到 github 和 gitee 上没有找到质量比较好的库，自己对这个功能也是蛮感兴趣的，所以做了这个开源库，用于实现手势解锁功能，可以帮助大家快速完成业务逻辑，提供了完整的 DEMO，可快速上手。

这篇文章向大家简单介绍下这个开源库，如果感觉项目还不错的话，还请多多 star。

项目官网：https://fly-gesture-unlock.netlify.app/；
在线体验：https://fly-gesture-unlock-online.netlify.app/；

我的其他开源库：fly-barrage 前端弹幕库，可实现类似于 B 站的弹幕效果，项目官网 https://fly-barrage.netlify.app/，

能实现的渲染效果

在这里插入图片描述

提供完善的 DEMO，请直接 clone 项目，npm run dev 即可看到

在这里插入图片描述

锚点的数量、位置以及尺寸支持高度自定义

对应的官网页面：

支持高度自定义各种样式，并允许配置额外状态以及对应样式

对应的官网页面：

提供多种事件回调

对应的官网页面：

提供多种配置

对应的官网页面：

纷飞丿
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现手势解锁
windworst的专栏
05-17 4187
自己实现过一个手势解锁, 觉得有一点用, 所以贴出来便于以后使用. 规则:       9宫格解锁, 连接2格后, 2格之间会绘制连线
手势锁屏库GestureLock：打造个性化安全体验
gitblog_00032的博客
04-02 334
手势锁屏库GestureLock：打造个性化安全体验 项目地址:https://gitcode.com/ddssingsong/GestureLock 手势解锁，作为一种简单且直观的安全机制，已被广泛应用于移动设备和平板电脑。今天我们要介绍的开源项目——GestureLock，就是一个用于Android平台的手势密码库。它允许开发者轻松地在自己的应用中集成这种功能，为用户提供更加便捷和个性化的锁屏...
推荐开源项目：GestureLock - 自定义手势解锁控件
gitblog_00099的博客
05-25 379
推荐开源项目：GestureLock - 自定义手势解锁控件 项目地址:https://gitcode.com/7heaven/GestureLock 在数字化的时代，密码解锁已经不再新鲜，取而代之的是更加便捷且有趣的解锁方式——手势解锁。今天，我们要向您推荐一个开源项目，名为GestureLock，它是一款高度可定制的手势解锁控件，专为Android应用开发者设计。 1、项目介绍 Gesture...
目前最好用的-开源-手势解锁库!!!
weixin_34061042的博客
03-22 400
为什么80%的码农都做不了架构师？>>> ...
Android 手势解锁一个超级易用的github开源库
广源的博客
02-05 1775
前言： 在github仓库上看到一个简单易用的Android手势解锁开源库，简洁易用，故记录下来。 github开源库地址：https://github.com/aritraroy/PatternLockView 使用效果： 设置密码为：24678。当输入错误，颜色为红色，输入正确为绿色（颜色可自定义），在类中有对应的回调事件。 使用步骤： 1.添加依赖 在app-->...
Gesture-unlock:模仿支付宝手势解锁的一个Demo
05-20
本项目“Gesture-unlock:模仿支付宝手势解锁的一个Demo”旨在通过Objective-C编程语言实现类似支付宝的手势解锁功能。在这个Demo中，我们将深入探讨手势解锁的核心原理、实现步骤以及Objective-C的相关知识。 首先...
swift-GesturePasswordView九宫格手势解锁
08-15
Swift-GesturePasswordView是专为Swift开发者设计的一个九宫格手势解锁控件，允许开发者轻松地在自己的应用程序中实现类似Android的手势解锁功能。下面将详细介绍这个库的核心特性和使用方法。 GesturePasswordView...
samurai-service-gesture:应用内手势操作提示
06-12
应用内手势操作提示 如何使用 克隆https://github.com/hackers-painters/samurai-service-gesture.git 将/ServiceGesture拖放到 Xcode 项目中 构建并运行 许可 samurai-native 是根据 MIT 许可证获得许可的。 贡献...
马氏距离matlab代码-gesture_recognition:手势识别
05-27
该存储库包含Matlab代码，用于与连续手势识别方法之间的比较： M1是一种使用高斯混合模型和高斯混合回归对手势建模并使用马哈拉诺比斯距离对每个手势进行概率分类的方法。 如果相关联的概率超过某些阈值，则将检测到...
IMUCalibration-Gesture:校准Imu并显示手势
04-29
IMUCalibration-Gesture calibration for Imu and show gesture 0.相关博客: 1.读入数据 load('caldata.mat') 2.运行校正算法 [Ta,Ka,Ba,Tg,Kg,Bg,Tm2a,Bm,Vm,mag_strength]=ImuCalibration_Gesture(cal_data) 3....
5.CSS学习（浮动）
ShawLee0925的博客
07-23 373
css浮动——float特点
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 265
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端与HTML
m0_65544927的博客
07-21 509
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 226
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 222
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 239
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 972
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 901
CTFWP，ctfshow-web42
[iOS UI进阶 - 5.0] 手势解锁Demo
05-24
好的，这是一个手势解锁的Demo，你可以参考一下： ``` import UIKit class GestureLockViewController: UIViewController { // MARK: - Properties var buttons = [UIButton]() var selectedButtons = [UIButton]() var lines = [CAShapeLayer]() var touchPoint: CGPoint? var isTouching = false // MARK: - Lifecycle override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = .white let margin: CGFloat = 40 let distance: CGFloat = 80 let buttonWidth: CGFloat = 60 let buttonHeight: CGFloat = 60 let viewWidth = view.bounds.width let viewHeight = view.bounds.height for i in 0..<9 { let row = CGFloat(i / 3) let col = CGFloat(i % 3) let x = margin + col * (buttonWidth + distance) let y = margin + row * (buttonHeight + distance) let button = UIButton(frame: CGRect(x: x, y: y, width: buttonWidth, height: buttonHeight)) button.layer.cornerRadius = buttonWidth / 2 button.layer.borderWidth = 2 button.layer.borderColor = UIColor.lightGray.cgColor button.tag = i view.addSubview(button) buttons.append(button) } } // MARK: - Gesture Methods override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { guard let touch = touches.first else { return } let point = touch.location(in: view) for button in buttons { if button.frame.contains(point) && !selectedButtons.contains(button) { touchPoint = button.center selectedButtons.append(button) isTouching = true break } } } override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { guard isTouching, let touch = touches.first else { return } let point = touch.location(in: view) touchPoint = point for button in buttons { if button.frame.contains(point) && !selectedButtons.contains(button) { button.isSelected = true selectedButtons.append(button) let line = CAShapeLayer() line.strokeColor = UIColor.gray.cgColor line.fillColor = UIColor.clear.cgColor line.lineWidth = 3 view.layer.addSublayer(line) lines.append(line) break } } drawLines() } override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { isTouching = false touchPoint = nil for button in buttons { button.isSelected = false } validatePassword() clearSelectedButtons() clearLines() } override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { isTouching = false touchPoint = nil for button in buttons { button.isSelected = false } clearSelectedButtons() clearLines() } // MARK: - Private Methods private func drawLines() { guard let point = touchPoint else { return } let linePath = UIBezierPath() linePath.move(to: point) for button in selectedButtons { linePath.addLine(to: button.center) } if let lastButton = selectedButtons.last, isTouching { linePath.addLine(to: lastButton.convert(lastButton.center, to: view)) } lines.last?.path = linePath.cgPath } private func clearSelectedButtons() { for button in selectedButtons { button.isSelected = false } selectedButtons.removeAll() } private func clearLines() { for line in lines { line.removeFromSuperlayer() } lines.removeAll() } private func validatePassword() { let password = selectedButtons.map { "\($0.tag)" }.joined() print("Gesture password: \(password)") } } ``` 这个Demo实现了一个3x3的手势解锁界面，使用了`UIButton`和`CAShapeLayer`来实现。当用户滑动手指时，会根据手指位置，自动连接之前选中的按钮，形成一条线。当用户抬起手指时，会根据选中的按钮的顺序，输出一个密码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值