rc-touchlayer

问题反馈: [email protected]

派生自 @ke/touchlayer

 将触摸事件、鼠标事件和触摸板/精确式滚轮/滚轮事件合并为用户行为进行反馈的交互统一层

使用示例

import React, { useState } from "react";
import TouchLayer, { TouchLayerEvent } from "rc-touchlayer";
export default function App() {
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);
  const [scale, setScale] = React.useState(1);
  const [rotate, setRotate] = useState(0);
  return (
    <TouchLayer
      onDrag={(e:TouchLayerEvent) => {
        setX(Math.max(0, Math.min(window.innerWidth - 50, x + e.deltaX)));
        setY(Math.max(0, Math.min(window.innerHeight - 50, y + e.deltaY)));
        console.log(e);
      }}
      onZoom={(e:TouchLayerEvent) => {
        console.log(e);
        setScale(Math.max(0.3, Math.min(10, scale + e.deltaZ / 50)));
        setRotate(rotate + e.deltaW);
      }}
      wheelX //用于支持滚轮和触摸板的横向滚动
      wheelY //用于支持滚轮和触摸板的纵向滚动
    >
      <div className="test-cover">
        <div
          style={{
            width: 50,
            height: 50,
            background: "#fff",
            transform: `translate(${x}px,${y}px) rotate(${rotate}rad) scale(${scale}) `,
          }}
        ></div>
      </div>
    </TouchLayer>
  );
}

可使用的事件

所有用户操作都会以onOperate的jsx参数属性回调形式向外传递事件，所有事件都符合TouchLayerEvent（见表2）类型定义，同时每种事件也会有自己独特的jsx参数如onDrag提供开发者使用。

• 表1 :TouchLayerEventType枚举定义 - 事件参照表

| 事件名称 | 说明 | jsx参数 | | -------------- | ----------------- | ------------------ | | dragStart | 开始拖动动作 | onDragStart | | drag | 拖动 | onDrag | | dragEnd | 结束拖动动作 | onDragEnd | | inertanceEnd | 惯性拖动结束 | onInertanceEnd | | zoomStart | 开始缩放/旋转动作 | onZoomStart | | drag&zoom | 拖动同时缩放 | onDrag|onZoom | | zoom | 缩放 | onZoom | | zoomEnd | 结束缩放/旋转动作 | onZoomEnd | | click | 点击 | onClick | | doubleClick | 双击 | onDoubleClick | | longtapStart | 长按开始 | onLongtapStart | | longtapEnd | 长按结束 | onLongtapEnd |

• 表1.1 : TouchLayerOperateMode枚举定义 - 用户操作模式

| 名称 | 说明 | | ----------- | -------------------------------- | | "drag" | 拖动动作 | | "zoom" | 缩放（旋转）动作 | | "drag&zoom" | 拖动同时缩放（旋转）动作 | | "none" | 当前动作不是由用户触发（如惯性） |

• 表1.2 : TouchLayerInputType枚举定义 - 用户输入模式

| 名称 | 说明 | | ---------- | ------ | | "touch" | 触摸 | | "mouse" | 鼠标 | | "trackpad" | 触摸板 | | "wheel" | 滚轮 |

• 表2 : TouchLayerEvent类型定义

| 属性 | 类型 | 说明 | | ------------ | --------------------- | ------------------------------ | | time | number | 页面打开事件触发经过的毫秒数 | | type | TouchLayerEventType | 事件的类型（见表1） | | operateMode | TouchLayerOperateMode | 用户操作的模式（见表1.1） | | inputType | TouchLayerInputType | 用户的输入方式（见表1.2) | | mouseButton0 | boolean | 鼠标左键是否被按下 | | mouseButton1 | boolean | 鼠标中键是否被按下 | | mouseButton2 | boolean | 鼠标右键是否被按下 | | clientX | number | 当前光标的客户端坐标X | | clientY | number | 当前光标的客户端坐标Y | | deltaX | number | 和上一次触发事件间位移的坐标X | | deltaY | number | 和上一次触发事件间位移的坐标Y | | deltaZ | number | 和上一次触发事件间缩放的距离 | | deltaW | number | 和上一次触发事件间旋转的弧度差 | | speedX | number | 坐标X分量速度 | | speedY | number | 坐标Y分量速度 | | distanceX | number | X分量总移动距离 | | distanceY | number | Y分量总移动距离 | | distanceZ | number | 缩放总距离 | | distanceW | number | 旋转总弧度（最大为2PI） | | inertance | boolean | 是否为惯性触发 | | moved | boolean | 当前光标是否移动过 | | target | HTMLElement | 触发事件的Dom元素 |

所有JSX参数

interface TouchLayerProps {
  /**
   * 全局事件监听
   */
  onOperate?: (event: TouchLayerEvent) => void;
  /**
   * 点击事件
   */
  onClick?: (event: TouchLayerEvent) => void;
  /**
   * 双击事件
   */
  onDoubleClick?: (event: TouchLayerEvent) => void;
  /**
   * 双击判定时间间隔 单位ms
   * 默认值200 ms
   */
  doubleClickGap?: number;
  /**
   * 每次用户输入都反馈事件，不再按帧合并（性能降低，但反应变快）
   */
  eachTick?: boolean;
  /**
   * 输入平滑过滤参数 0~1 值越小效果越平滑，同时滞后感越强
   */
  inputFilter?: number;
  /**
   * 开始拖拽
   */
  onDragStart?: (event: TouchLayerEvent) => void;
  /**
   * 拖拽动作
   */
  onDrag?: (event: TouchLayerEvent) => void;
  /**
   * 拖拽结束
   */
  onDragEnd?: (event: TouchLayerEvent) => void;
  /**
   * 惯性运动结束，注意，该方法会在onDragEnd后触发，无论是否开启惯性模拟。当前惯性模拟被其他输入打断后，该次运动不会触发本事件
   */
  onInertanceEnd?: (event: TouchLayerEvent) => void;
  /**
   * 关闭惯性模拟
   */
  noInertance?: boolean;
  /**
   * 开始长按
   */
  onLongtapStart?: (event: TouchLayerEvent) => void;
  /**
   * 结束长按
   */
  onLongtapEnd?: (event: TouchLayerEvent) => void;
  /**
   * 监听鼠标中键按下
   */
  useMouseMiddleButton?: boolean;
  /**
   * 监听鼠标右键按下
   */
  useMouseRightButton?: boolean;
  /**
   * 监听横向滚轮、横向触摸板事件
   */
  wheelX?: boolean;
  /**
   * 监听纵向滚轮、纵向触摸板事件
   */
  wheelY?: boolean;
  /**
   * 反转滚轮X输入
   */
  flipWheelX?: boolean;
  /**
   * 反转滚轮的Y输入
   */
  flipWheelY?: boolean;
  /**
   * 滚轮不需要按住metaKey直接触发缩放
   */
  wheelZoom?: boolean;
  /**
   * 开始缩放
   */
  onZoomStart?: (event: TouchLayerEvent) => void;
  /**
   * 缩放动作
   */
  onZoom?: (event: TouchLayerEvent) => void;
  /**
   * 缩放结束
   */
  onZoomEnd?: (event: TouchLayerEvent) => void;
  /**
   * 禁止缩放时拖拽
   */
  noZoomMove?: boolean;
  noEnableCheck?: boolean;

  /**
   * 禁止缩放结束后拖拽
   */
  noHandlerDownlevel?: boolean;

  preventDefault?: boolean;
  stopPropagation?: boolean;
  stopPropagationCapture?: boolean;

  /**
   * 防止错误输入事件传递的遮罩层的zIndex
   */
  maskZIndex?: number;

  /**
   * dataset-type黑名单，用于保护特定子元素的交互，在该元素上的交互不会触发touchlayer事件
   */
  preventElementDataType?: string;
  /**
   * 该touchlayer内部的其他touchlayer上的事件不会传递到该层上
   */
  preventOtherTouchLayer?: boolean;

  style?: React.CSSProperties;
  className?: string;
}