gesture-yili-v2 v0.0.1
Function are
函数作用
利用摄像头，对手势动作进行模糊的识别分析
目前具备 圆形 左右 与 倒s(倒s手势不够精确)
具体手势访问地址 https://www.bilibili.com/video/BV1H3411N7oQ#reply114441036400
联系邮箱: 840450999@qq.com
有兴趣或者有需求的的朋友，可以自行根据自己的需求修改内部的代码，未打包的源码已放入包内
Using the camera, the fuzzy recognition and analysis of gestures are carried out
Currently has round left and right and inverted S (inverted S gesture is not accurate enough)
Specific gestures to access the address https://www.bilibili.com/video/BV1H3411N7oQ#reply114441036400
Contact email: 840450999@qq.com
Interested or needs of friends, according to their own needs to modify the internal code, unpackaged source code has been put into the package
Using the example
使用例子
import { yaction } from 'gesture-yili'
let shuangyan = document.querySelector(".shuangyan")
let action = new yaction();
action.on('action', (o) => {
// 触发了一个动作，圆形，左右移动到触发点，会触发该函数
// Trigger an action, circle, move left or right to trigger point, trigger this function
})
// 圆形手势类别,倒s手势判断暂时未继续精确
// Circle gesture category, inverted S gesture judgment is not accurate for the time being
action.on('s_yuan', (o) => {
if (o.s_yuan_type == 1) return
// if (o.s_yuan_type == 1) return document.querySelector('.lian').classList.toggle('blue')
// document.querySelector('.lian').classList.toggle('red')
})
// 方位根据先天八卦序数来判断 目前具备左右两方 分别为 离☲ 101 兑☵010 左右移动触发点大概在屏幕五分之一位置左右
// The position is judged by the innate trigram ordinal number. The left and right sides are respectively from ☲ 101 to ☵010. The trigger point is about one fifth of the screen
action.on('fw', (fw, o) => {
// parseInt(fw, 2) < 3 ? document.querySelector(".lian").classList.add('right') : document.querySelector(".lian").classList.remove('right')
// ; (shuangyan.style.cssText = "margin-top:" + o.pv / 10 + "px" + ";margin-left:" + (1280 - o.pv - 700) / 10 + "px")
})
// 动作1为有动作 但是未达到左右两侧动作界值
// Action 1 is an action but does not reach the left and right action threshold
action.on('action', (o) => {
// o.fw == '1' && (shuangyan.style.cssText = "margin-left:" + (1280 - o.pv - 700) / 10 + "px")
})注意
代码内部前面几个函数是自己以易经逻辑尝试实现纯前端视频处理方向上留下的,部分可删 该包可随意使用，如果您认为自己受益了，想要做些什么，那么去行一善事，帮助他人，或者回家时为自己父母，亲人，或者你的师傅带点礼物皆可(。・∀・)ノ
Inside the code in front of several functions is their own logic to try to achieve pure front-end video processing direction left, part can be deleted
The bag is free to use, and if you think you've benefited and want to do something, do a good deed, help someone else, or bring a gift for your parents, relatives, or your teacher when you get home. · ∀ ·) Blue
demo
npm 引入后 可直接复制以下demo进行查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
overflow: hidden;
/* display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%; */
}
.right {
transition: 2s all;
margin-left: calc(100vw - 20em);
}
.back {
position: absolute;
height: 100%;
width: 100%;
background: url(./1.png);
filter: blur(3px);
z-index: -1;
}
.lian {
position: absolute;
transition: 2s all;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 20em;
height: 17em;
border-radius: 30%;
background: rgb(250, 203, 132);
border: 4px solid rgba(0, 0, 0, 1);
}
.shuangyan {
width: 15em;
display: flex;
justify-content: space-around;
transition: 0.7s all;
}
.yan {
/* transition: 1s all; */
position: relative;
margin-top: 3em;
width: 20px;
height: 20px;
background: black;
/* background: transparent; */
box-shadow: 0 0 1px 1em rgba(0, 0, 0, 1), 0 0 0 1.8em rgba(255, 255, 255, 1);
border-radius: 50%;
/* border: 3px solid; */
}
.lian2 {
animation: a 1s alternate infinite;
}
@keyframes a {
0% {
transform: translate(0, 0px);
}
20% {
transform: translate(0, -15px);
}
40% {
transform: translate(0, 0px);
}
60% {
transform: translate(0, -15px);
}
80% {
transform: translate(0, 0px);
}
100% {}
}
.zui {
position: relative;
width: 1px;
height: 1px;
}
.zui::after {
content: "";
position: absolute;
left: -0.75em;
top: -5em;
width: 3em;
height: 5em;
border-radius: 50%;
border: 4px solid;
border-color: transparent transparent black transparent;
transition: 1s all;
}
.zui::before {
content: "";
position: absolute;
right: -0.75em;
top: -5em;
width: 3em;
height: 5em;
border-radius: 50%;
border: 4px solid;
border-color: transparent transparent black transparent;
transition: 1s all;
}
.carousel2 {
border: ridge 15px sandybrown;
}
.red {
background: rgba(241, 137, 137, 0.945);
}
.blue {
background: blue;
}
</style>
</head>
<body>
<div class="back"></div>
<div class="lian">
<div class="shuangyan">
<div class="yan"></div>
<div class="yan"></div>
</div>
<div>
<div class="bizi"></div>
</div>
<div class="zui">
</div>
</div>
<script src="./node_modules/gesture-yili/dist/yijing_visionAction.js"></script>
<script type="module">
let action = new yaction();
action.on('action', (o) => {
})
action.on('s_yuan', (o) => {
if (o.s_yuan_type == 1) return
// document.querySelector('.lian').classList.toggle('blue')
document.querySelector('.lian').classList.toggle('red')
// typeof +o.s_yuan_type !== 'number' && console.log(344)
})
let shuangyan = document.querySelector(".shuangyan")
action.on('fw', (fw, o) => {
parseInt(fw, 2) < 3 ? document.querySelector(".lian").classList.add('right') : document.querySelector(".lian").classList.remove('right')
; (shuangyan.style.cssText = "margin-top:" + o.pv / 10 + "px" + ";margin-left:" + (1280 - o.pv - 700) / 10 + "px")
})
action.on('action', (o) => {
o.fw == '1' && (shuangyan.style.cssText = "margin-left:" + (1280 - o.pw - 700) / 10 + "px")
})
</script>
</body>
</html>1 year ago