archive-gh-me/react-viewer
1
0
Fork 0
mirror of https://github.com/infeng/react-viewer.git synced 2025-12-08 17:36:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: add zoomSpeed

Browse Source
This commit is contained in:
infeng 2018-05-28 15:53:00 +08:00
parent ec85336810
commit e453aeee15
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ViewerCanvas.tsx
View File

@ -12,7 +12,7 @@ export interface ViewerCanvasProps {
rotate: number;
onChangeImgState: (width: number, height: number, top: number, left: number) => void;
onResize: () => void;
onZoom: (targetX: number, targetY: number, direct: number, scale: number) => void;
onZoom: (targetX: number, targetY: number, direct: number) => void;
zIndex: number;
scaleX: number;
scaleY: number;
@ -102,7 +102,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
x -= containerRect.left;
y -= containerRect.top;
}
this.props.onZoom(x, y, direct, .05);
this.props.onZoom(x, y, direct);
}
}

11
src/ViewerCore.tsx
View File

@ -42,6 +42,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
onMaskClick: noop,
changeable: true,
customToolbar: (toolbars) => toolbars,
zoomSpeed: .05,
};
private prefixCls: string;
@ -232,11 +233,11 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
break;
case ActionType.zoomIn:
let imgCenterXY = this.getImageCenterXY();
this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 0.05);
this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, this.props.zoomSpeed);
break;
case ActionType.zoomOut:
let imgCenterXY2 = this.getImageCenterXY();
this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 0.05);
this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, this.props.zoomSpeed);
break;
case ActionType.rotateLeft:
this.handleRotate();
@ -289,6 +290,10 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
});
}
handleScrollZoom = (targetX, targetY, direct) => {
this.handleZoom(targetX, targetY, direct, this.props.zoomSpeed);
}
handleZoom = (targetX, targetY, direct, scale) => {
let imgCenterXY = this.getImageCenterXY();
let diffX = targetX - imgCenterXY.x;
@ -549,7 +554,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
rotate={this.state.rotate}
onChangeImgState={this.handleChangeImgState}
onResize={this.handleResize}
onZoom={this.handleZoom}
onZoom={this.handleScrollZoom}
zIndex={zIndex + 5}
scaleX={this.state.scaleX}
scaleY={this.state.scaleY}

3
src/ViewerProps.ts
View File

@ -59,6 +59,9 @@ interface ViewerProps {
// custom toolbar
customToolbar?: (toolbars: ToolbarConfig[]) => ToolbarConfig[];
// zoom speed
zoomSpeed?: number;
}
export default ViewerProps;