review

src/PhotoView.tsx

@@ -6,7 +6,7 @@ import isMobile from './utils/isMobile';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
 import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
 import slideToPosition from './utils/slideToPosition';
-import { getClosedHorizontal, getClosedVertical, getReachType } from './utils/getCloseEdge';
+import { getReachType, getCloseEdgeResult } from './utils/getCloseEdge';
 import withContinuousTap, { TapFuncType } from './utils/withContinuousTap';
 import {
   maxScale,
@@ -161,7 +161,11 @@ export default class PhotoView extends React.Component<
           return;
         }
         // 设置响应状态
-        this.initialTouchState = isBeyondX ? TouchStartEnum.X : TouchStartEnum.Y;
+        this.initialTouchState = isBeyondX
+          ? TouchStartEnum.X
+          : newClientY > clientY
+            ? TouchStartEnum.YPull
+            : TouchStartEnum.YPush;
       }
 
       const { width, height, naturalWidth } = current.state;
@@ -174,16 +178,24 @@ export default class PhotoView extends React.Component<
           onReachMove,
         } = this.props;
         const planX = newClientX - clientX + lastX;
-        currentY = newClientY - clientY + lastY;
+        const planY = newClientY - clientY + lastY;
+        const touchYOffset = this.initialTouchState === TouchStartEnum.YPush
+          ? minStartTouchOffset
+          : -minStartTouchOffset;
         // 边缘超出状态
-        const horizontalCloseEdge = this.initialTouchState === TouchStartEnum.X
-          ? CloseEdgeEnum.Small
-          : getClosedHorizontal(planX, scale, width);
-        const verticalCloseEdge = this.initialTouchState === TouchStartEnum.Y
-          ? CloseEdgeEnum.Small
-          : getClosedVertical(currentY, scale, height);
+        const { horizontalCloseEdge, verticalCloseEdge } = getCloseEdgeResult({
+          initialTouchState: this.initialTouchState,
+          planX,
+          planY,
+          scale,
+          width,
+          height,
+        });
         // X 方向响应距离减小
-        currentX = (newClientX - clientX) / (horizontalCloseEdge !== CloseEdgeEnum.Normal ? 2 : 1)  + lastX;
+        currentX = (planX - lastX) / (horizontalCloseEdge !== CloseEdgeEnum.Normal ? 2 : 1) + lastX;
+        // Y 方向在初始响应状态下需要补一个距离
+        currentY = planY +
+          (this.initialTouchState === TouchStartEnum.Normal ? 0 : touchYOffset);
         // 边缘触发检测
         currentReachState = getReachType({ horizontalCloseEdge, verticalCloseEdge, reachState });
 

src/types.ts

@@ -91,5 +91,6 @@ export enum ReachTypeEnum {
 export enum TouchStartEnum {
   Normal, // 未触发
   X, // X 轴优先
-  Y, // Y 轴优先
+  YPush, // Y 轴往上
+  YPull, // Y 轴往下
 }

src/utils/getCloseEdge.ts

@@ -1,4 +1,4 @@
-import { CloseEdgeEnum, ReachTypeEnum } from '../types';
+import { CloseEdgeEnum, ReachTypeEnum, TouchStartEnum } from '../types';
 
 /**
  * 接触左边或右边边缘
@@ -81,3 +81,50 @@ export function getReachType({
   }
   return ReachTypeEnum.Normal;
 }
+
+/**
+ * 边缘超出状态
+ * @param initialTouchState
+ * @param planX
+ * @param planY
+ * @param scale
+ * @param width
+ * @param height
+ */
+export function getCloseEdgeResult({
+  initialTouchState,
+  planX,
+  planY,
+  scale,
+  width,
+  height,
+}: {
+  initialTouchState: TouchStartEnum;
+  planX: number;
+  planY: number;
+  scale: number;
+  width: number;
+  height: number;
+}): {
+  horizontalCloseEdge: CloseEdgeEnum;
+  verticalCloseEdge: CloseEdgeEnum;
+} {
+  if (initialTouchState !== TouchStartEnum.Normal) {
+    const isHorizontal = initialTouchState === TouchStartEnum.X;
+    return {
+      horizontalCloseEdge:
+        isHorizontal
+          ? CloseEdgeEnum.Small
+          : CloseEdgeEnum.Normal,
+      verticalCloseEdge:
+        !isHorizontal
+          ? CloseEdgeEnum.Small
+          : CloseEdgeEnum.Normal,
+    };
+  }
+
+  return {
+    horizontalCloseEdge: getClosedHorizontal(planX, scale, width),
+    verticalCloseEdge: getClosedVertical(planY, scale, height),
+  };
+}

src/variables.ts

@@ -16,7 +16,7 @@ export const horizontalOffset: number = 20;
 /**
  * 最小初始响应距离
  */
-export const minStartTouchOffset: number = 60;
+export const minStartTouchOffset: number = 20;
 
 /**
  * 默认背景透明度