rc-touchlayer

rc-touchlayer

问题反馈: chzh314@hotmail.com

派生自 @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;
}