useScratch

跟踪元素上的刮擦/拖动手势，支持鼠标和触摸。

Usage

实时编辑器

function Demo() {
  const elementRef = useRef(null);
  const state = useScratch(elementRef, {
    onScratchStart: (s) => {
      console.log('开始刮擦:', s);
    },
    onScratch: (s) => {
      console.log('刮擦中:', s);
    },
    onScratchEnd: (s) => {
      console.log('刮擦结束:', s);
    },
  });

  return (
    <div style={{ padding: '20px' }}>
      <div
        ref={elementRef}
        style={{
          width: '300px',
          height: '200px',
          border: '1px solid var(--ifm-color-emphasis-300)',
          borderRadius: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: state.isScratching ? 'var(--ifm-color-emphasis-200)' : 'var(--ifm-background-surface-color)',
          color: 'var(--ifm-color-content)',
          cursor: 'pointer',
          userSelect: 'none',
        }}
      >
        {state.isScratching ? '刮擦中...' : '点击并拖动以刮擦'}
      </div>
      <div style={{ marginTop: '20px', fontFamily: 'monospace', fontSize: '12px', color: 'var(--ifm-color-content)' }}>
        <div><strong>正在刮擦:</strong> {state.isScratching ? '是' : '否'}</div>
        {state.x !== undefined && <div><strong>x:</strong> {Math.round(state.x)}</div>}
        {state.y !== undefined && <div><strong>y:</strong> {Math.round(state.y)}</div>}
        {state.dx !== undefined && <div><strong>dx:</strong> {Math.round(state.dx)}</div>}
        {state.dy !== undefined && <div><strong>dy:</strong> {Math.round(state.dy)}</div>}
      </div>
    </div>
  );
};

结果

点击并拖动以刮擦

正在刮擦: 否

API

UseScratchState

参数名	描述	类型	默认值
isScratching	是否正在刮擦	boolean (必填)	-
start	开始时间戳	number	-
end	结束时间戳	number	-
x	相对于元素的 x 坐标	number	-
y	相对于元素的 y 坐标	number	-
dx	x 方向的增量	number	-
dy	y 方向的增量	number	-
docX	文档中的 x 坐标	number	-
docY	文档中的 y 坐标	number	-
posX	元素在文档中的 x 位置	number	-
posY	元素在文档中的 y 位置	number	-
elH	元素高度	number	-
elW	元素宽度	number	-
elX	元素 x 位置	number	-
elY	元素 y 位置	number	-

UseScratchOptions

参数名	描述	类型	默认值
disabled	是否禁用	boolean	-
onScratch	刮擦时的回调	(state: UseScratchState) => void	-
onScratchStart	开始刮擦时的回调	(state: UseScratchState) => void	-
onScratchEnd	结束刮擦时的回调	(state: UseScratchState) => void	-

useScratch

Returns

UseScratchState: 刮擦状态

Arguments

参数名	描述	类型	默认值
target	目标元素	BasicTarget<HTMLElement> (必填)	-
options	配置项	UseScratchOptions | undefined	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;