diff --git a/example/src/6.jpg b/example/src/6.jpg deleted file mode 100644 index ed62b54..0000000 Binary files a/example/src/6.jpg and /dev/null differ diff --git a/example/src/6.png b/example/src/6.png new file mode 100644 index 0000000..efd6f56 Binary files /dev/null and b/example/src/6.png differ diff --git a/example/src/index.tsx b/example/src/index.tsx index 18bc6d6..10d498d 100644 --- a/example/src/index.tsx +++ b/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; diff --git a/package.json b/package.json index a5740c7..5818986 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-photo-view", - "version": "0.4.0", + "version": "0.4.1", "description": "一款精致的 React 的图片预览组件", "author": "MinJieLiu", "license": "MIT", diff --git a/src/PhotoView.tsx b/src/PhotoView.tsx index bc06da0..255dc1f 100644 --- a/src/PhotoView.tsx +++ b/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; + 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 { + this.handleScaleEnd.cancel(); this.setState(prevState => ({ touched: true, clientX, @@ -269,9 +274,27 @@ export default class PhotoView extends React.Component { + const { width, height, x, y, lastX, lastY, scale, touchedTime } = this.state; + this.setState( + slideToPosition({ + x, + y, + lastX, + lastY, + width, + height, + scale, + touchedTime, + }), + ); + }; + onDoubleTap: TapFuncType = (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 { 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 {