feat: 缩放后处理

example/src/index.tsx

@@ -9,21 +9,11 @@ import photo2 from './2.jpg';
 import photo3 from './3.jpg';
 import photo4 from './4.jpg';
 import photo5 from './5.jpg';
-import photo6 from './6.jpg';
+import photo6 from './6.png';
 import photo7 from './7.jpg';
 import photo8 from './8.jpg';
 
-
-export const photoImages = [
-  photo1,
-  photo2,
-  photo3,
-  photo4,
-  photo5,
-  photo6,
-  photo7,
-  photo8,
-];
+export const photoImages = [photo1, photo2, photo3, photo4, photo5, photo6, photo7, photo8];
 
 export const ImageList = styled.div`
   padding: 40px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "一款精致的 React 的图片预览组件",
   "author": "MinJieLiu",
   "license": "MIT",

src/PhotoView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import debounce from 'lodash.debounce';
 import Photo from './Photo';
 import throttle from './utils/throttle';
 import isTouchDevice from './utils/isTouchDevice';
@@ -111,11 +112,14 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   private initialTouchState = TouchStartEnum.Normal;
 
   private readonly handlePhotoTap: TapFuncType<number>;
+  private readonly handleScaleEnd;
 
   constructor(props: IPhotoViewProps) {
     super(props);
     this.onMove = throttle(this.onMove, 8);
     this.handleResize = throttle(this.handleResize, 8);
+    // 放大/缩小后自适应
+    this.handleScaleEnd = debounce(this.onScaleEnd, 600);
     // 单击与双击事件处理
     this.handlePhotoTap = withContinuousTap(this.onPhotoTap, this.onDoubleTap);
   }
@@ -158,6 +162,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
   };
 
   handleStart = (clientX: number, clientY: number, touchLength: number = 0) => {
+    this.handleScaleEnd.cancel();
     this.setState(prevState => ({
       touched: true,
       clientX,
@@ -269,9 +274,27 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
     }
   };
 
+  onScaleEnd = () => {
+    const { width, height, x, y, lastX, lastY, scale, touchedTime } = this.state;
+    this.setState(
+      slideToPosition({
+        x,
+        y,
+        lastX,
+        lastY,
+        width,
+        height,
+        scale,
+        touchedTime,
+      }),
+    );
+  };
+
   onDoubleTap: TapFuncType<number> = (clientX, clientY) => {
-    const { width, naturalWidth } = this.state;
-    const { x, y, scale } = this.state;
+    const { width, naturalWidth, x, y, scale, reachState } = this.state;
+    if (reachState !== ReachTypeEnum.Normal) {
+      return;
+    }
     this.setState({
       clientX,
       clientY,
@@ -285,11 +308,15 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
         toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width),
       }),
     });
+    this.handleScaleEnd();
   };
 
   handleWheel = e => {
     const { clientX, clientY, deltaY } = e;
-    const { width, naturalWidth } = this.state;
+    const { width, naturalWidth, reachState } = this.state;
+    if (reachState !== ReachTypeEnum.Normal) {
+      return;
+    }
     this.setState(({ x, y, scale }) => {
       const endScale = scale - deltaY / 100 / 2;
       // 限制最大倍数和最小倍数
@@ -307,6 +334,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
         }),
       };
     });
+    this.handleScaleEnd();
   };
 
   handleMaskStart = (clientX: number, clientY: number) => {