1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<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>