|
@@ -0,0 +1,229 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import $ from "jquery";
|
|
|
+import style from "./index.less";
|
|
|
+import ReactDom from "react-dom";
|
|
|
+import closeImg from "./img/closeImg.png";
|
|
|
+import imgBgActive from "./img/imgBgActive.png";
|
|
|
+import plus from "./img/plus.png";
|
|
|
+import reduce from "./img/reduce.png";
|
|
|
+import nextImg from "./img/nextImg.png";
|
|
|
+import prevImg from "./img/prevImg.png";
|
|
|
+import rotated from "./img/rotated.png";
|
|
|
+import {imgDragMove} from '@utils/drag';
|
|
|
+
|
|
|
+class RotateImg extends Component {
|
|
|
+ constructor(props){
|
|
|
+ super(props);
|
|
|
+ this.state={
|
|
|
+ de:0,
|
|
|
+ current:0,
|
|
|
+ length:0,
|
|
|
+ imgWidth:'auto',
|
|
|
+ imgHeight:'auto',
|
|
|
+ mgLeft:'',
|
|
|
+ mgTop:'',
|
|
|
+ left:'50%',
|
|
|
+ top:'50%'
|
|
|
+ }
|
|
|
+ this.handlePrev = this.handlePrev.bind(this)
|
|
|
+ this.handleNext = this.handleNext.bind(this)
|
|
|
+ this.handleRotate = this.handleRotate.bind(this)
|
|
|
+ this.handlePlus = this.handlePlus.bind(this)
|
|
|
+ this.handleReduce = this.handleReduce.bind(this)
|
|
|
+ }
|
|
|
+ componentWillReceiveProps(next){
|
|
|
+ console.log(next.windowHeight,this.props.windowHeight)
|
|
|
+ }
|
|
|
+ componentDidMount(){
|
|
|
+ imgDragMove('add')
|
|
|
+ const { idx,imgLis } = this.props;
|
|
|
+ let currentImg = imgLis[idx];
|
|
|
+ let width = currentImg.width,height = currentImg.height;
|
|
|
+ if(width>height){
|
|
|
+ if(width > 750){
|
|
|
+ width=750
|
|
|
+ height=height*750/width
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(height > 750){
|
|
|
+ height = 750
|
|
|
+ width = width*750/height
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ current:idx,
|
|
|
+ length:imgLis.length,
|
|
|
+ imgWidth:width,
|
|
|
+ imgHeight:height,
|
|
|
+ mgLeft:-width/2,
|
|
|
+ mgTop:-height/2
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getStyle(){
|
|
|
+ const { imgDetail,idx,imgLis } = this.props;
|
|
|
+ let currentImg = imgLis[this.state.current];
|
|
|
+ let width = currentImg.width,height = currentImg.height;
|
|
|
+ let isLorR = width > height;
|
|
|
+ return {
|
|
|
+ width:width,
|
|
|
+ height:height,
|
|
|
+ marginLeft:-width/2,
|
|
|
+ marginTop:-height/2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleNext(){
|
|
|
+ this.props.setMove(false)
|
|
|
+ const { imgLis,isMove } = this.props;
|
|
|
+ let tmpIdx = this.state.current;
|
|
|
+ let tmpLen = this.state.length,width,height;
|
|
|
+ if(tmpIdx == tmpLen-1){
|
|
|
+ width = imgLis[0].width
|
|
|
+ height = imgLis[0].height
|
|
|
+ }else{
|
|
|
+ width = imgLis[tmpIdx+1].width
|
|
|
+ height = imgLis[tmpIdx+1].height
|
|
|
+ }
|
|
|
+ if(width>height){
|
|
|
+ if(width > 750){
|
|
|
+ width=750
|
|
|
+ height=height*750/width
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(height > 750){
|
|
|
+ height = 750
|
|
|
+ width = width*750/height
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let imgDom = this.refs.rotateImg.getDOMNode();
|
|
|
+ $(imgDom).css({
|
|
|
+ left:'50%',
|
|
|
+ top:'50%'
|
|
|
+ })
|
|
|
+ this.setState({
|
|
|
+ current:tmpIdx == tmpLen-1?0:(tmpIdx+1),
|
|
|
+ imgWidth:width,
|
|
|
+ imgHeight:height,
|
|
|
+ mgLeft:-width/2,
|
|
|
+ mgTop:-height/2,
|
|
|
+ de:0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ handlePrev(){
|
|
|
+ const { imgLis } = this.props;
|
|
|
+ let tmpIdx = this.state.current;
|
|
|
+ let tmpLen = this.state.length,width,height;
|
|
|
+ if(tmpIdx == 0){
|
|
|
+ width = imgLis[tmpLen-1].width
|
|
|
+ height = imgLis[tmpLen-1].height
|
|
|
+ }else{
|
|
|
+ width = imgLis[tmpIdx-1].width
|
|
|
+ height = imgLis[tmpIdx-1].height
|
|
|
+ }
|
|
|
+ if(width>height){
|
|
|
+ if(width > 750){
|
|
|
+ width=750
|
|
|
+ height=height*750/width
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(height > 750){
|
|
|
+ height = 750
|
|
|
+ width = width*750/height
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let imgDom = this.refs.rotateImg.getDOMNode();
|
|
|
+ $(imgDom).css({
|
|
|
+ left:'50%',
|
|
|
+ top:'50%'
|
|
|
+ })
|
|
|
+ this.setState({
|
|
|
+ current:tmpIdx == 0?tmpLen-1:tmpIdx-1,
|
|
|
+ imgWidth:width,
|
|
|
+ imgHeight:height,
|
|
|
+ mgLeft:-width/2,
|
|
|
+ mgTop:-height/2,
|
|
|
+ de:0
|
|
|
+ })
|
|
|
+ this.props.setMove(false)
|
|
|
+ }
|
|
|
+ handlePlus(){
|
|
|
+ const {imgWidth,imgHeight,isMove} = this.state;
|
|
|
+ if(this.props.isMove){
|
|
|
+ this.setState({
|
|
|
+ imgWidth:1.2*imgWidth,
|
|
|
+ imgHeight:1.2*imgHeight
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ imgWidth:1.2*imgWidth,
|
|
|
+ imgHeight:1.2*imgHeight,
|
|
|
+ mgLeft:-imgWidth*1.2/2,
|
|
|
+ mgTop:-imgHeight*1.2/2
|
|
|
+ })
|
|
|
+ }
|
|
|
+ handleReduce(){
|
|
|
+ const {imgWidth,imgHeight} = this.state;
|
|
|
+ if(this.props.isMove){
|
|
|
+ this.setState({
|
|
|
+ imgWidth:imgWidth*0.8,
|
|
|
+ imgHeight:imgHeight*0.8
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ imgWidth:imgWidth*0.8,
|
|
|
+ imgHeight:imgHeight*0.8,
|
|
|
+ mgLeft:-imgWidth*0.8/2,
|
|
|
+ mgTop:-imgHeight*0.8/2
|
|
|
+ })
|
|
|
+ }
|
|
|
+ handleRotate(flg){
|
|
|
+ let deg = this.state.de;
|
|
|
+ if(flg){
|
|
|
+ deg = deg-90
|
|
|
+ }else{
|
|
|
+ deg = deg-0+90
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ de:deg
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { imgLis,handleClose } = this.props;
|
|
|
+ const { current,imgWidth,imgHeight,mgLeft,mgTop,de,left,top } = this.state;
|
|
|
+
|
|
|
+ const domNode = document.getElementById('root');
|
|
|
+ return ReactDom.createPortal(<div className={style.preImgWrap}>
|
|
|
+ <div className={style.modal} onClick={handleClose}></div>
|
|
|
+ <div className={style.mainWrap}>
|
|
|
+ <div className={style.imgWrap} id="previewWrapper">
|
|
|
+ <img className={style.rotateImg}
|
|
|
+ id="drugImg"
|
|
|
+ ref="rotateImg"
|
|
|
+ src={imgLis[current].originalImage}
|
|
|
+ style={{
|
|
|
+ width:imgWidth+'px',
|
|
|
+ height:imgHeight+'px',
|
|
|
+ marginLeft:mgLeft+'px',
|
|
|
+ marginTop:mgTop+'px',
|
|
|
+ transform:"rotate(" + de + "deg)",
|
|
|
+ left:left,
|
|
|
+ top:top,
|
|
|
+ }}
|
|
|
+ alt="预览图片"/>
|
|
|
+ <div className={style.activeBar}>
|
|
|
+ <img className={style.plus} src={plus} onClick={this.handlePlus} alt="图片放大"/>
|
|
|
+ <img className={style.reduce} src={reduce} onClick={this.handleReduce} alt="图片缩小"/>
|
|
|
+ <img className={style.rotate} src={rotated} onClick={this.handleRotate} alt="图片旋转"/>
|
|
|
+ </div>
|
|
|
+ <img src={closeImg} onClick={handleClose} className={style.close} alt="close"/>
|
|
|
+ </div>
|
|
|
+ <img src={nextImg} className={style.next} onClick={this.handleNext} alt="下一张"/>
|
|
|
+ <img src={prevImg} className={style.prev} onClick={this.handlePrev} alt="上一张"/>
|
|
|
+ </div>
|
|
|
+ </div>,domNode)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default RotateImg;
|