|
@@ -31,20 +31,24 @@ class RotateImg extends Component {
|
|
this.handlePlus = this.handlePlus.bind(this)
|
|
this.handlePlus = this.handlePlus.bind(this)
|
|
this.handleReduce = this.handleReduce.bind(this)
|
|
this.handleReduce = this.handleReduce.bind(this)
|
|
}
|
|
}
|
|
|
|
+ componentWillReceiveProps(next){
|
|
|
|
+ console.log(next.windowHeight,this.props.windowHeight)
|
|
|
|
+ }
|
|
componentDidMount(){
|
|
componentDidMount(){
|
|
imgDragMove('add')
|
|
imgDragMove('add')
|
|
- const { idx,imgLis } = this.props;
|
|
|
|
|
|
+ const { idx,imgLis,windowHeight } = this.props;
|
|
let currentImg = imgLis[idx];
|
|
let currentImg = imgLis[idx];
|
|
|
|
+ let scaleHeight = windowHeight*0.8;
|
|
let width = currentImg.width,height = currentImg.height;
|
|
let width = currentImg.width,height = currentImg.height;
|
|
if(width>height){
|
|
if(width>height){
|
|
- if(width > 750){
|
|
|
|
- width=750
|
|
|
|
- height=height*750/width
|
|
|
|
|
|
+ if(width > scaleHeight){
|
|
|
|
+ width=scaleHeight
|
|
|
|
+ height=height*scaleHeight/width
|
|
}
|
|
}
|
|
}else{
|
|
}else{
|
|
- if(height > 750){
|
|
|
|
- height = 750
|
|
|
|
- width = width*750/height
|
|
|
|
|
|
+ if(height > scaleHeight){
|
|
|
|
+ height = scaleHeight
|
|
|
|
+ width = width*scaleHeight/height
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.setState({
|
|
this.setState({
|
|
@@ -70,7 +74,8 @@ class RotateImg extends Component {
|
|
}
|
|
}
|
|
handleNext(){
|
|
handleNext(){
|
|
this.props.setMove(false)
|
|
this.props.setMove(false)
|
|
- const { imgLis,isMove } = this.props;
|
|
|
|
|
|
+ const { imgLis,isMove,windowHeight } = this.props;
|
|
|
|
+ let scaleHeight = windowHeight*0.8;
|
|
let tmpIdx = this.state.current;
|
|
let tmpIdx = this.state.current;
|
|
let tmpLen = this.state.length,width,height;
|
|
let tmpLen = this.state.length,width,height;
|
|
if(tmpIdx == tmpLen-1){
|
|
if(tmpIdx == tmpLen-1){
|
|
@@ -81,14 +86,14 @@ class RotateImg extends Component {
|
|
height = imgLis[tmpIdx+1].height
|
|
height = imgLis[tmpIdx+1].height
|
|
}
|
|
}
|
|
if(width>height){
|
|
if(width>height){
|
|
- if(width > 750){
|
|
|
|
- width=750
|
|
|
|
- height=height*750/width
|
|
|
|
|
|
+ if(width > scaleHeight){
|
|
|
|
+ width=scaleHeight
|
|
|
|
+ height=height*scaleHeight/width
|
|
}
|
|
}
|
|
}else{
|
|
}else{
|
|
- if(height > 750){
|
|
|
|
- height = 750
|
|
|
|
- width = width*750/height
|
|
|
|
|
|
+ if(height > scaleHeight){
|
|
|
|
+ height = scaleHeight
|
|
|
|
+ width = width*scaleHeight/height
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let imgDom = this.refs.rotateImg.getDOMNode();
|
|
let imgDom = this.refs.rotateImg.getDOMNode();
|
|
@@ -106,7 +111,8 @@ class RotateImg extends Component {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
handlePrev(){
|
|
handlePrev(){
|
|
- const { imgLis } = this.props;
|
|
|
|
|
|
+ const { imgLis,windowHeight } = this.props;
|
|
|
|
+ let scaleHeight = windowHeight*0.8;
|
|
let tmpIdx = this.state.current;
|
|
let tmpIdx = this.state.current;
|
|
let tmpLen = this.state.length,width,height;
|
|
let tmpLen = this.state.length,width,height;
|
|
if(tmpIdx == 0){
|
|
if(tmpIdx == 0){
|
|
@@ -117,14 +123,14 @@ class RotateImg extends Component {
|
|
height = imgLis[tmpIdx-1].height
|
|
height = imgLis[tmpIdx-1].height
|
|
}
|
|
}
|
|
if(width>height){
|
|
if(width>height){
|
|
- if(width > 750){
|
|
|
|
- width=750
|
|
|
|
- height=height*750/width
|
|
|
|
|
|
+ if(width > scaleHeight){
|
|
|
|
+ width=scaleHeight
|
|
|
|
+ height=height*scaleHeight/width
|
|
}
|
|
}
|
|
}else{
|
|
}else{
|
|
- if(height > 750){
|
|
|
|
- height = 750
|
|
|
|
- width = width*750/height
|
|
|
|
|
|
+ if(height > scaleHeight){
|
|
|
|
+ height = scaleHeight
|
|
|
|
+ width = width*scaleHeight/height
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let imgDom = this.refs.rotateImg.getDOMNode();
|
|
let imgDom = this.refs.rotateImg.getDOMNode();
|
|
@@ -185,15 +191,23 @@ class RotateImg extends Component {
|
|
de:deg
|
|
de:deg
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+
|
|
render() {
|
|
render() {
|
|
- const { imgLis,handleClose } = this.props;
|
|
|
|
|
|
+ const { imgLis,handleClose,windowHeight } = this.props;
|
|
const { current,imgWidth,imgHeight,mgLeft,mgTop,de,left,top } = this.state;
|
|
const { current,imgWidth,imgHeight,mgLeft,mgTop,de,left,top } = this.state;
|
|
|
|
|
|
const domNode = document.getElementById('root');
|
|
const domNode = document.getElementById('root');
|
|
return ReactDom.createPortal(<div className={style.preImgWrap}>
|
|
return ReactDom.createPortal(<div className={style.preImgWrap}>
|
|
<div className={style.modal} onClick={handleClose}></div>
|
|
<div className={style.modal} onClick={handleClose}></div>
|
|
<div className={style.mainWrap}>
|
|
<div className={style.mainWrap}>
|
|
- <div className={style.imgWrap} id="previewWrapper">
|
|
|
|
|
|
+ <div className={style.imgWrap}
|
|
|
|
+ id="previewWrapper"
|
|
|
|
+ style={{
|
|
|
|
+ width:0.8*windowHeight+'px',
|
|
|
|
+ height:0.8*windowHeight+'px',
|
|
|
|
+ marginLeft:-0.8*windowHeight/2+'px',
|
|
|
|
+ marginTop:-0.8*windowHeight/2+'px'
|
|
|
|
+ }}>
|
|
<img className={style.rotateImg}
|
|
<img className={style.rotateImg}
|
|
id="drugImg"
|
|
id="drugImg"
|
|
ref="rotateImg"
|
|
ref="rotateImg"
|