smart gesture

这是一个小型手势组件,支持普通的方向手势和自定义图形手势,兼容PC端和移动端,可以非常方便的用它实现一些酷炫的手势操作。

229
48
JavaScript

smart-gesture

这是一个web版的鼠标手势组件,支持普通的鼠标手势和自定义图形手势, 在线 demo

安装

可通过npm安装

npm install --save smart-gesture

也可以直接使用dist/min/smart-gesture.min.js文件

普通鼠标手势

普通手势可识别上(U)下(D)左(L)右®4个方向的任意组合

basic-gesture

自定义图形手势

可识别任意的可以一笔画出的手势,默认有预设的4种图形,同时也能自定义图形。若自定义图形手势,可以通过增加样本集来提高识别率,推荐同一个手势对应2-3个样本集。

smart-gesture

预设图形图案

demo

Usage

import smartGesture from 'smart-gesture';
const options = {
  el: document.getElementById('test'),             
  onSwipe: (list) => {
    console.log(list);
  },
  onGesture: (res, points) => {
    console.log(res);
    document.getElementById('result').innerHTML = res.score > 2 ? res.name : '未识别';
  }
};

const gesture = new smartGesture(options);

或者直接在页面中引用dist/min/smart-gesture.min.js,会在window上暴露一个smartGesture方法

<script src="dist/min/smart-gesture.min.js"></script>
<script>
    let lastPoints = [];
    const options = {
      el: document.getElementById('test'),             
      onSwipe: (list) => {
        console.log(list);
      },
      onGesture: (res, points) => {
        console.log(res);
        document.getElementById('result').innerHTML = res.score > 2 ? res.name : '未识别';
      }
    };
    const gesture = new smartGesture(options);
</script>

Documentation

configuration

var gesture = new smartGesture({el: document.querySelector('#target'), ...});

可配置的参数如下:

  • el 应用手势识别的元素,类型为DOMElement。需要注意的是,由于用于显示鼠标轨迹的svg的positionabsolute,
    所以为了保证鼠标轨迹的位置正常,建议对该元素设置position: relative。(default: body)

  • enablePath 是否显示鼠标轨迹,类型为Boolean。(default: true)

  • lineColor 鼠标轨迹的颜色,类型为String。(default: #666)

  • lineWidth 鼠标轨迹的宽度,类型为Number,单位px。(default: 4)

  • timeDelay 长按一定时间后才会触发手势识别,类型为Number,单位ms。(default: 600)

  • triggerMouseKey 触发手势识别的鼠标按键,类型为String,可选值left | right。(default: right)

  • gestures 初始化自定义图形集合。类型为Array | Object,若不想使用预设的手势,可以传空数组。(default: [所有预设的手势])

  • activeColor 开启手势时背景色。类型为String。(default: rgba(0, 0, 0, .05))

  • eventType 响应事件的类型。类型为String,可选值touch | mouse,当指定为touch时将捕获touch相关的事件,简单的说如果用于移动端请将参数设置为touch。(default: mouse)

  • onSwipe: function(directionList) 手势结束时调用,

    • directionList: 普通手势的识别结果,数组。
  • onGesture: function(result, points) 手势结束时调用

    • result: 自定义图形手势的识别结果,值为一个对象,包含namescore两个key。

    • points: 包含该次手势的轨迹的点的集合构成的数组。可以配合addGesture方法来实现自定义手势功能。

Methods

  • .addGesture(gesture) 添加自定义图形模板

    • gesture: 自定义图形模板
      • type: Object
      • gesture.name:String: 模板名称
      • gesture.points:Array: 点集合
  • .refresh(options) 重新刷新实例的options

    • options: smartGesture参数对象
  • .destroy() 销毁当前的实例

Development

npm i
npm run dev

Resources

smart-gesture for React: react-smart-gesture

smart-gesture for Vue: vue-smart-gesture

smart-gesture for ReactNative: react-native-smart-gesture

Contribution

请在提交 PR 前阅读我们的贡献指南

License

MIT