review

src/PhotoView.tsx

@@ -28,10 +28,6 @@ type PhotoViewState = {
   lastX: number;
   // 触摸开始时图片 y 偏移量
   lastY: number;
-  // 上一次触摸开始时 x 原始坐标
-  lastPageX: number | undefined;
-  // 上一次触摸开始时 y 原始坐标
-  lastPageY: number | undefined;
   // 触摸开始时时间
   touchedTime: number;
 } & animationType;
@@ -54,10 +50,7 @@ export default class PhotoView extends React.Component<
     lastX: 0,
     lastY: 0,
 
-    lastPageX: undefined,
-    lastPageY: undefined,
     touchedTime: 0,
-
     animation: defaultAnimationConfig,
   };
 
@@ -107,7 +100,7 @@ export default class PhotoView extends React.Component<
 
   handleDoubleClick = (e) => {
     const { pageX, pageY } = e;
-    this.setState(({ x, y, scale, lastPageX, lastPageY }) => {
+    this.setState(({ x, y, scale }) => {
       return {
         pageX,
         pageY,
@@ -116,8 +109,6 @@ export default class PhotoView extends React.Component<
           y,
           pageX,
           pageY,
-          lastPageX,
-          lastPageY,
           fromScale: scale,
           toScale: scale > 1 ? 1 : 2,
         }),
@@ -127,7 +118,7 @@ export default class PhotoView extends React.Component<
 
   handleWheel = (e) => {
     const { pageX, pageY, deltaY } = e;
-    this.setState(({ x, y, scale, lastPageX, lastPageY }) => {
+    this.setState(({ x, y, scale }) => {
       return {
         pageX,
         pageY,
@@ -136,8 +127,6 @@ export default class PhotoView extends React.Component<
           y,
           pageX,
           pageY,
-          lastPageX,
-          lastPageY,
           fromScale: scale,
           toScale: scale - deltaY / 100 / 2,
         }),

src/utils.ts

@@ -48,8 +48,6 @@ export const getPositionOnScale = ({
   y,
   pageX,
   pageY,
-  lastPageX,
-  lastPageY,
   fromScale,
   toScale,
 }: {
@@ -57,15 +55,11 @@ export const getPositionOnScale = ({
   y: number;
   pageX: number;
   pageY: number;
-  lastPageX: number | undefined;
-  lastPageY: number | undefined;
   fromScale: number;
   toScale: number;
 }): {
   x: number;
   y: number;
-  lastPageX: number;
-  lastPageY: number;
   scale: number;
 } => {
   const { innerWidth, innerHeight } = window;
@@ -81,6 +75,10 @@ export const getPositionOnScale = ({
     // 缩放距离计算
     const centerPageX = pageX - innerWidth / 2;
     const centerPageY = pageY - innerHeight / 2;
+
+    const touchedImageX = (centerPageX - x) / fromScale;
+    const touchedImageY = (centerPageY - y) / fromScale;
+
     const scale = endScale - fromScale;
 
     distanceX = x - centerPageX * scale;
@@ -89,8 +87,6 @@ export const getPositionOnScale = ({
   return {
     x: distanceX,
     y: distanceY,
-    lastPageX: pageX,
-    lastPageY: pageY,
     scale: endScale,
   };
 };