Pan

Pan方法是当你鼠标或者手指按住某个物体尝试想去拖动它的时候，鼠标或者手指在按住这个元素的情况下移动的距离超过3个像素就会触发，并且一直会持续触发，直到松开。它这个拖动可以不是真实的拖动，即物体可以不动，但是只要你鼠标是按住的，并且鼠标本身发生移动，这个事件就会触发，所以这个操作的触发是以鼠标或者手指移动的距离为判断，而不是被操作的物体的位移。

onPan(event, info): void

当Pan这个行为发生时会一直触发该回调函数

回调函数的参数
event: MouseEvent | TouchEvent | PointerEvent 不同的设备操作时会有不同的事件对象
info: PanInfo
一个对象，包含各种x和y的坐标值 - point: 想对于设备或者页面 - delta: 上一次触发事件时和当前触发事件时的坐标值的距离 - offset: 和最开始触发事件时的点的偏移距离 - velocity: 当前鼠标或者操作设备的速度

function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onPan={onPan} />

onPanStart(event, info): void

当Pan这个行为一开始发生时会触发该回调函数

回调函数的参数
event: MouseEvent | TouchEvent | PointerEvent 不同的设备操作时会有不同的事件对象
info: PanInfo
一个对象，包含各种x和y的坐标值 - point: 想对于设备或者页面 - delta: 上一次触发事件时和当前触发事件时的坐标值的距离 - offset: 和最开始触发事件时的点的偏移距离 - velocity: 当前鼠标或者操作设备的速度

function onPanStart(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onPanStart={onPanStart} />

onPanEnd(event, info): void

当Pan这个行为结束时会触发该回调函数

回调函数的参数
event: MouseEvent | TouchEvent | PointerEvent 不同的设备操作时会有不同的事件对象
info: PanInfo
一个对象，包含各种x和y的坐标值 - point: 想对于设备或者页面 - delta: 上一次触发事件时和当前触发事件时的坐标值的距离 - offset: 和最开始触发事件时的点的偏移距离 - velocity: 当前鼠标或者操作设备的速度

function onPanEnd(event, info) {
  console.log(info.point.x, info.point.y)
}

<Frame onPanEnd={onPanEnd} />