<template>
    <div class="imgDiv" id="imgDiv" style="height: 100%;" >
        <img draggable="true" class="paperImg" @touchstart="start($event)"
             @touchmove="move($event)"
             :src="fileUrl" alt="">
    </div>
</template>
<script>

export default{
  data() {
    return {
        x0:0,
        y0:0,
        x1:0,
        y1:0,
        rotateNum:0,//旋转的角度
        fileUrl:'',//图片路径
        fileId:''//图片fileId
    }
  },
  created() {
     window.rotateImg = ()=> this.rotateImg();
     this.fileUrl = this.$route.query.fileUrl;
     this.fileId = this.$route.query.fileId;
  },
  methods:{
    start(e){
        e.cancelBubble = true;
        e.returnValue = false;
        this.x0=e.targetTouches[0].clientX;
        this.y0=e.targetTouches[0].clientY;
    },
    move(e){//移动
        this.x1=e.targetTouches[0].clientX;
        this.y1=e.targetTouches[0].clientY;
        let x=this.x1-this.x0;
        let y=this.y1-this.y0;
        let img=document.querySelector("#imgDiv img");
        $('.paperImg').css('left',`${img.offsetLeft+x}px`);
        $('.paperImg').css('top',`${img.offsetTop+y}px`);
        this.x0=this.x1;
        this.y0=this.y1;
    },
    rotateImg(){//旋转
        this.rotateNum+=90;
        $('.paperImg').css('transform',`rotate(${this.rotateNum}deg)`);
        $('.paperImg').css('-ms-transform',`rotate(${this.rotateNum}deg)`);
        $('.paperImg').css('-moz-transform',`rotate(${this.rotateNum}deg)`);
        $('.paperImg').css('-webkit-transform',`rotate(${this.rotateNum}deg)`);
        $('.paperImg').css('-o-transform',`rotate(${this.rotateNum}deg)`);
    }
  }
}
</script>
<style scoped>

.imgDiv{
  background: #ccc;
  width: 100%;
  height: calc(100vh - 132px);
  overflow: hidden;
  position: relative;
}
.paperImg{
  position: absolute;
  max-width: 500%;
  width: 100%;
  left: 0px;
}

</style>