支持通用的手势缩放，手势跟随，多图翻页
手势系统
通过 PanResponder.create 创建手势响应者，分别在 onPanResponderMove 与 onPanResponderRelease 阶段进行处理实现上述功能。
手势阶段
大体介绍整体设计，在每个手势阶段需要做哪些事。
开始
onPanResponderGrant
|
1 2 3 4 5 |
// 开始手势操作 this.lastPositionX = null this.lastPositionY = null this.zoomLastDistance = null this.lastTouchStartTime = new Date().getTime() |
开始时非常简单，初始化上一次的唯一、缩放距离、触摸时间，这些中间量分别会在计算增量位移、增量缩放、用户松手意图时使用。
移动
onPanResponderMove
|
1 2 3 4 5 |
if (evt.nativeEvent.changedTouches.length <= 1) { // 单指移动 or 翻页 } else { // 双指缩放 } |
在移动中，先根据手指数量区分用户操作意图。
当单个手指时，可能是移动或者翻页
先记录增量位移：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// x 位移 let diffX = gestureState.dx - this.lastPositionX if (this.lastPositionX === null) { diffX = 0 } // y 位移 let diffY = gestureState.dy - this.lastPositionY if (this.lastPositionY === null) { diffY = 0 } // 保留这一次位移作为下次的上一次位移 this.lastPositionX = gestureState.dx this.lastPositionY = gestureState.dy |
获得了位移距离后，我们先不要移动图片，因为横向操作如果溢出了屏幕边界，我们要触发图片切换（如果滑动方向还有图），此时不能再增加图片的偏移量，而是要将其偏移量记录下来存储到溢出量，当这个溢出量没有用完时，只滑动整体容器，不移动图片，用完时再移动图片，就可以将移动图片与整体滑动连贯起来了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// diffX > 0 表示手往右滑，图往左移动，反之同理 // horizontalWholeOuterCounter > 0 表示溢出在左侧，反之在右侧，绝对值越大溢出越多 if (this.props.imageWidth * this.scale > this.props.cropWidth) { // 如果图片宽度大图盒子宽度， 可以横向拖拽 // 没有溢出偏移量或者这次位移完全收回了偏移量才能拖拽 if (this.horizontalWholeOuterCounter > 0) { // 溢出在右侧 if (diffX < 0) { // 从右侧收紧 if (this.horizontalWholeOuterCounter > Math.abs(diffX)) { // 偏移量还没有用完 this.horizontalWholeOuterCounter += diffX diffX = 0 } else { // 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动 diffX += this.horizontalWholeOuterCounter this.horizontalWholeOuterCounter = 0 this.props.horizontalOuterRangeOffset(0) } } else { // 向右侧扩增 this.horizontalWholeOuterCounter += diffX } } else if (this.horizontalWholeOuterCounter < 0) { // 溢出在左侧 if (diffX > 0) { // 从左侧收紧an class="crayon-st">if (diffX > 0) { // 从左侧收紧2jw1f7xycls5ebg308n0e2u0x.gif" width="311" height="506">
1.gif
通过 手势阶段大体介绍整体设计，在每个手势阶段需要做哪些事。 开始
开始时非常简单，初始化上一次的唯一、缩放距离、触摸时间，这些中间量分别会在计算增量位移、增量缩放、用户松手意图时使用。 移动
在移动中，先根据手指数量区分用户操作意图。 当单个手指时，可能是移动或者翻页先记录增量位移：
获得了位移距离后，我们先不要移动图片，因为横向操作如果溢出了屏幕边界，我们要触发图片切换（如果滑动方向还有图），此时不能再增加图片的偏移量，而是要将其偏移量记录下来存储到溢出量，当这个溢出量没有用完时，只滑动整体容器，不移动图片，用完时再移动图片，就可以将移动图片与整体滑动连贯起来了。
|
