review

src/PhotoView.tsx

@@ -58,11 +58,6 @@ export default class PhotoView extends React.Component<
     lastX: 0,
     lastY: 0,
 
-    originX: 0,
-    originY: 0,
-    originTranslateX: 0,
-    originTranslateY: 0,
-
     touchedTime: 0,
     lastTouchLength: 0,
     animation: defaultAnimationConfig,
@@ -115,8 +110,9 @@ export default class PhotoView extends React.Component<
         lastX,
         lastY,
         scale,
-        lastTouchLength
+        lastTouchLength,
       }) => {
+        const toScale = scale + (touchLength - lastTouchLength) / 100 / 2 * scale;
         return {
           lastTouchLength: touchLength,
           ...getPositionOnMoveOrScale({
@@ -125,7 +121,7 @@ export default class PhotoView extends React.Component<
             pageX,
             pageY,
             fromScale: scale,
-            toScale: scale + (touchLength - lastTouchLength) / (window.innerHeight / 2) * scale,
+            toScale,
           }),
         };
       });

src/utils.ts

@@ -91,14 +91,14 @@ export const getPositionOnMoveOrScale = ({
 } => {
   const { innerWidth, innerHeight } = window;
   let endScale = toScale;
-  let nextX = x;
-  let nextY = y;
+  let originX = x;
+  let originY = y;
   // 缩放限制
   if (toScale < 1) {
     endScale = 1;
   } else if (toScale > 6) {
     endScale = 6;
-  } else { // 有缩放的情况下
+  } else {
     const centerPageX = innerWidth / 2;
     const centerPageY = innerHeight / 2;
     // 坐标偏移
@@ -106,12 +106,14 @@ export const getPositionOnMoveOrScale = ({
     const lastPositionY = centerPageY + y;
 
     // 放大偏移量
-    nextX = pageX - (pageX - lastPositionX) * (endScale / fromScale) - centerPageX;
-    nextY = pageY - (pageY - lastPositionY) * (endScale / fromScale) - centerPageY;
+    const offsetScale = endScale / fromScale;
+    // 偏移位置
+    originX = pageX - (pageX - lastPositionX) * offsetScale - centerPageX;
+    originY = pageY - (pageY - lastPositionY) * offsetScale - centerPageY;
   }
   return {
-    x: nextX,
-    y: nextY,
+    x: originX,
+    y: originY,
     scale: endScale,
   };
 };