小调整

src/PhotoView.tsx

@@ -28,6 +28,8 @@ type PhotoViewState = {
   lastX: number;
   // 触摸开始时图片 y 偏移量
   lastY: number;
+  originX: number;
+  originY: number;
   // 触摸开始时时间
   touchedTime: number;
 } & animationType;
@@ -50,6 +52,8 @@ export default class PhotoView extends React.Component<
     lastX: 0,
     lastY: 0,
 
+    originX: 0,
+    originY: 0,
     touchedTime: 0,
     animation: defaultAnimationConfig,
   };
@@ -100,7 +104,7 @@ export default class PhotoView extends React.Component<
 
   handleDoubleClick = (e) => {
     const { pageX, pageY } = e;
-    this.setState(({ x, y, scale }) => {
+    this.setState(({ x, y, scale, originX, originY }) => {
       return {
         pageX,
         pageY,
@@ -109,6 +113,8 @@ export default class PhotoView extends React.Component<
           y,
           pageX,
           pageY,
+          originX,
+          originY,
           fromScale: scale,
           toScale: scale > 1 ? 1 : 2,
         }),
@@ -118,7 +124,7 @@ export default class PhotoView extends React.Component<
 
   handleWheel = (e) => {
     const { pageX, pageY, deltaY } = e;
-    this.setState(({ x, y, scale }) => {
+    this.setState(({ x, y, scale, originX, originY }) => {
       return {
         pageX,
         pageY,
@@ -127,6 +133,8 @@ export default class PhotoView extends React.Component<
           y,
           pageX,
           pageY,
+          originX,
+          originY,
           fromScale: scale,
           toScale: scale - deltaY / 100 / 2,
         }),

src/utils.ts

@@ -48,6 +48,8 @@ export const getPositionOnScale = ({
   y,
   pageX,
   pageY,
+  originX,
+  originY,
   fromScale,
   toScale,
 }: {
@@ -55,39 +57,31 @@ export const getPositionOnScale = ({
   y: number;
   pageX: number;
   pageY: number;
+  originX: number;
+  originY: number;
   fromScale: number;
   toScale: number;
 }): {
   x: number;
   y: number;
+  originX: number;
+  originY: number;
   scale: number;
 } => {
   const { innerWidth, innerHeight } = window;
-  let endScale = toScale;
-  let distanceX = x;
-  let distanceY = y;
-  // 缩放限制
-  if (toScale < 0.5) {
-    endScale = 0.5;
-  } else if (toScale > 5) {
-    endScale = 5;
-  } else {
-    // 缩放距离计算
-    const centerPageX = pageX - innerWidth / 2;
-    const centerPageY = pageY - innerHeight / 2;
-
-    const touchedImageX = (centerPageX - x) / fromScale;
-    const touchedImageY = (centerPageY - y) / fromScale;
+  // 缩放距离计算
+  const imageCenterX = innerWidth / 2 + x;
+  const imageCenterY = innerHeight / 2 + y;
 
-    const scale = endScale - fromScale;
+  const offsetX = pageX - imageCenterX;
+  const offsetY = pageY - imageCenterY;
 
-    distanceX = x - centerPageX * scale;
-    distanceY = y - centerPageY * scale;
-  }
   return {
-    x: distanceX,
-    y: distanceY,
-    scale: endScale,
+    x: x + (offsetX - originX * fromScale),
+    y: y + (offsetY - originY * fromScale),
+    scale: Math.max(Math.min(toScale, 5), 1),
+    originX: offsetX / fromScale,
+    originY: offsetY / fromScale,
   };
 };