代码拉取完成,页面将自动刷新
功能完善,强大的 web 端手势解锁库,一站式解决手势解锁相关业务。
fly-barrage: web 端弹幕库,Gitee 推荐项目。
fly-gesture-unlock: web 端手势解锁库。
https://fly-gesture-unlock.netlify.app/
https://fly-gesture-unlock-online.netlify.app/
npm install fly-gesture-unlock
<!-- 这里使用 Vue 框架作为例子,本库并不局限于特定框架 -->
<template>
<div class="page-container">
<div
id="container"
ref="container"
style="width: 300px; height: 300px;"
/>
</div>
</template>
<script setup lang="ts">
import GestureUnlockRenderer, { Anchor } from 'fly-gesture-unlock';
import { ref, onMounted } from 'vue';
// 定义额外状态
type ExtraStatus = never;
const container = ref();
const gestureUnlockRenderer = ref<GestureUnlockRenderer<ExtraStatus>>();
onMounted(() => {
// 借助提供的辅助函数生成锚点
const anchorDefines = GestureUnlockRenderer.AnchorMatrixFactory({
canvasSize: { width: container.value.clientWidth, height: container.value.clientHeight },
padding: 35,
matrix: { row: 3, column: 3 },
anchor: { anchorCircleRadius: 30, centerCircleRadius: 10 },
});
gestureUnlockRenderer.value = new GestureUnlockRenderer<ExtraStatus>({
container: container.value,
anchorDefines,
anchorStatusStyles: {
'not-selected': {
// 锚点圆的边框宽、边框颜色、填充颜色
anchorCircleBorderWidth: 1,
anchorCircleBorderColor: '#3ea1e5',
},
'selected': {
// 锚点圆的边框宽、边框颜色、填充颜色
anchorCircleBorderWidth: 1.5,
anchorCircleBorderColor: '#128ce8',
anchorCircleFillColor: '#ffffff',
// 中心圆的边框宽、边框颜色、填充颜色
centerCircleFillColor: '#128ce8'
},
},
lineStatusStyles: {
'normal': {
lineColor: '#128ce8',
lineWidth: 1,
},
},
events: {
'end': gestureEnd,
},
});
});
const gestureEnd = (selectedAnchors: Anchor<ExtraStatus>[]) => {
const anchorIds = selectedAnchors.map(anchor => anchor.id).join('');
console.log(anchorIds);
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
.page-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #446693;
}
#container {
background-color: #ffffff;
}
</style>
完整用法,请直接 clone 项目,安装依赖后,执行 npm run dev 即可看到完整用法
尽量使用高版本 node,我本地的版本是 v18.19.0
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。