javascript手势库

在线体验 demo

特点

1. 支持鼠标和手指操作，底层统一了Touch和Mouse事件处理

2. 封装了 tap ,doubleTap (双击), longTap（长按), rotate (旋转) pinch (缩放) pressMove (手指拖动) swipe (判断手指拖动方向) 等方法

3. 使用 TypeScript 编写，内置 TypeScript 类型定义文件，良好的智能提示

4. 支持js原生使用

5. 桌面和移动端组件库 react-uni-comps 涉及鼠标手势操作的依赖库

使用

安装 npm i w-touch

1. js 调用 (Touch构造函数)

  import Touch from 'w-touch';

  // 构造对象
  const t = new Touch(el,options);

  // 销毁对象
  t.destroy();

options 事件配置

type Options = Partial<{
  onTouchStart: (evt: WTouchEvent) => void;
  onTouchMove: (evt: WTouchEvent) => void;
  onTouchEnd: (evt: WTouchEvent) => void;
  onTouchCancel: (evt: WTouchEvent) => void;
  onMultipointStart: (evt: WTouchEvent) => void;
  onMultipointEnd: (evt: WTouchEvent) => void;
  /** 点两次 */
  onDoubleTap: () => void;
  /** 长按 */
  onLongTap: () => void;
  /** 按一次 */
  onSingleTap: () => void;
  /** 旋转, 单位:deg */
  onRotate: (evt: WTouchEvent & { angle: number }) => void;
  /** 缩放  */
  onPinch: (evt: WTouchEvent & { scale: number }) => void;
  /** 单指滑动 */
  onPressMove: (evt: WTouchEvent & { deltaX: number; deltaY: number }) => void;
  /** 左右滑动 */
  onSwipe: (evt: WTouchEvent & { direction: 'left' | 'right' | 'up' | 'down' }) => void;
  /** 双指滑动 */
  onTwoFingerPressMove: (evt: WTouchEvent & { deltaX: number; deltaY: number }) => void;
}>;

1. React 调用 (TouchElement组件) 在线demo

import React, { useRef, useEffect } from 'react';
import { AutoCenter, Toast } from 'react-uni-comps';
import DemoBlock from './common/DemoBlock';
import { TouchElement } from 'w-touch';

type Position = {
  x: number;
  y: number;
  angle: number;
  scale: number;
};

const update = (el, transform, statusEl) => {
  const cssTransform = `translate(${transform.x}px,${transform.y}px) rotate(${transform.angle}deg) scale(${transform.scale})`;

  el.style.transform = cssTransform;
  statusEl.innerText = cssTransform;
};

export default function App() {
  const ref = useRef<Position>({ x: 0, y: 0, angle: 0, scale: 1 });
  const elRef = useRef<HTMLDivElement>();

  const statusElRef = useRef<HTMLDivElement>();

  useEffect(() => {
    update(elRef.current, ref.current, statusElRef.current);
  }, []);

  return (
         <TouchElement
            onDoubleTap={() => {
              Toast.show('doubleTap');
            }}
            onLongTap={() => {
              Toast.show('longTap');
            }}
          
            onSwipe={(e) => {
              console.log('swipe', e.direction);
            }}
          >
            <div
              style={{
                width: 120,
                height: 120,
                border: '1px solid red',
                position: 'relative',
              }}
            />
          </TouchElement>
  );
}