gesture-yili

v0.0.3

Published

2 years ago

一个普通的纯前端手势识别o(*￣▽￣*)ブ

Downloads

0High
0Medium
0Low

qyl

gesture gesture recognition Front-end gesture recognition yili

Function are

函数作用

利用摄像头，对手势动作进行模糊的识别分析目前具备圆形左右与倒s(倒s手势不够精确) 具体手势访问地址 https://www.bilibili.com/video/BV1H3411N7oQ#reply114441036400 联系邮箱: [email protected]
有兴趣或者有需求的的朋友，可以自行根据自己的需求修改内部的代码，未打包的源码已放入包内

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: [email protected]
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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Function are

函数作用

Using the example

使用例子

注意

demo