-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
356 lines (356 loc) · 12.2 KB
/
index.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#touchBox {
height: 80vh;
width: 80vw;
position: relative;
margin: 10vh 10vw;
overflow: hidden;
border: 1px solid rgb(199, 117, 117);
}
#transformDom {
position: absolute;
left: 0px;
top: 0px;
}
#enlargeScale, #narrowScale {
height: 60px;
width: 60px;
line-height: 60px;
position: absolute;
right: 20px;
bottom: 250px;
background: rgb(224, 110, 110);
color: #ffffff;
border-radius: 50%;
text-align: center;
transform: translateZ(120px);
z-index: 2;
}
#narrowScale {
bottom: 150px;
}
.switch {
height: 35px;
width: 65px;
position: absolute;
right: 20px;
bottom: 10px;
border-radius: 25px;
background-color: rgb(77, 54, 54);
transition: all .5s;
transform: translateZ(120px);
}
.switch::after {
content: "";
height: 29px;
width: 29px;
border-radius: 50%;
background: azure;
position: absolute;
left: 3px;
top: 3px;
transition: all .5s;
}
.switch-open {
background-color: rgb(255, 124, 124);
}
.switch-open::after {
left: calc(100% - 32px);
}
#perspective {
right: 170px;
}
.switch-label {
color: rgb(255, 124, 124);
position: absolute;
line-height: 35px;
right: 90px;
bottom: 10px;
font-weight: bolder;
transform: translateZ(120px);
}
.perspective-label {
right: 240px;
}
</style>
</head>
<body>
<div id="touchBox">
<img id="transformDom" src="https://i.postimg.cc/qvBwTrHT/QQ20181021-202255-2x.png">
</div>
<div id="enlargeScale">放大</div>
<div id="narrowScale">缩小</div>
<div id="damping" class="switch"></div>
<div id="perspective" class="switch"></div>
<div class="switch-label damping-label">阻尼感?</div>
<div class="switch-label perspective-label">透视感?</div>
<script>
class TouchMoveScale {
constructor (option) {
this.touchDom = option.touchDom
this.transformDom = option.transformDom
this.transformData = {
x: option?.transformData?.x || 0,
y: option?.transformData?.y || 0,
scale: option?.transformData?.scale || 1
},
this.maxScale = option.maxScale || Infinity
this.minScale = option.minScale || 0
// 奇奇怪怪的效果
this.damping = option.damping || false
// 透视效果
this.perspective = option.perspective || false
// 用来储存上一次的触摸的数据的
this.store = {
x: 0,
y: 0,
distance: 1
}
// 触摸的类型
this.touchType = ''
// 用来储存当前缩放中心带来的位置偏移的比例
this.scaleTranslateProportion = []
// 位置icon的dom
this.siteIconDom = new Image()
this.siteIconDom.src = 'https://i.loli.net/2021/01/21/4eSK5vTMWsClnoD.png'
this.touchDom.appendChild(this.siteIconDom)
this.siteIconDom.style.position = 'absolute'
this.siteIconDom.style.left = '-32px'
this.siteIconDom.style.top = '-64px'
this.siteIconDom.style.zIndex = '1'
this.siteIconDom.style.transformOrigin = "top left"
this.init()
}
init() {
// 得绑定this不然方法里面的this是this.touchDom
this.touchDom.addEventListener('touchstart', this.touchstart.bind(this))
this.touchDom.addEventListener('touchmove', this.touchmove.bind(this))
this.touchDom.addEventListener('touchend', this.touchend.bind(this))
// 强制设置默认缩放中心为左上角
this.transformDom.style.transformOrigin = "top left"
// 设置默认的位置
this.setTransform()
}
touchstart (e) {
e.preventDefault();
if (e.touches.length === 1) {
// 当前屏幕上只有一个触摸点的时候就是移动
this.moveStart(e.touches[0].clientX, e.touches[0].clientY);
this.touchType = "move";
} else if (e.touches.length === 2) {
// 如果两个触摸点是缩放
this.scaleStart(e.touches);
this.touchType = "scale";
}
}
touchmove (e) {
e.preventDefault();
if (e.touches.length === 1 && this.touchType === "move") {
// 如果屏幕上只有一个触摸点而且类型是移动的时候才是移动
this.move(e.touches[0].clientX, e.touches[0].clientY);
} else if (e.touches.length === 2) {
// 只要有两个触摸点就是缩放,可以从移动转换成缩放
this.scale(e.touches);
}
}
// 开始移动的方法: 记录首次的数据
moveStart (x, y) {
this.store.x = x;
this.store.y = y;
}
// 移动的方法: 上一次减去当前为偏移量
move (x, y) {
// 当前偏移的计算
this.transformData.x += x - this.store.x;
this.transformData.y += y - this.store.y;
// 记录下来下次使用
this.store.x = x;
this.store.y = y;
// 修改css
this.setTransform();
}
// 开始移动: 记录首次的触摸数据,和中心缩放比例
scaleStart(touchList) {
// 算出当前两指之间的距离
const x = touchList[0].clientX - touchList[1].clientX;
const y = touchList[0].clientY - touchList[1].clientY;
this.store.distance = Math.sqrt(x ** 2 + y ** 2);
// 缩放中心为双指点的中心,此时的双指中心只是touchBox上的,得转换成transformDom上的,
// 因为缩放中心的位置带来translate的变化,是根据当前触摸中心在transformDom上的比例算出来的
const scaleCenter = [
(touchList[0].clientX + x / 2 - this.transformData.x) / this.transformData.scale,
(touchList[0].clientY + y / 2 - this.transformData.y) / this.transformData.scale,
];
// 缩放导致偏移的比例
this.scaleTranslateProportion = [
scaleCenter[0] / this.transformDom.offsetWidth,
scaleCenter[1] / this.transformDom.offsetHeight,
];
}
// 进行缩放操作
scale(touchList) {
// 开始时move后面scale的情况下会没有上一次的scale数据,所以把这次当做start
if (this.touchType !== 'scale') {
this.touchType = "scale";
this.scaleStart(touchList);
return
}
// 算出当前两指的距离
const distance = Math.sqrt(
(touchList[0].clientX - touchList[1].clientX) ** 2 +
(touchList[0].clientY - touchList[1].clientY) ** 2
);
// 缩放大小为现在的两指距离除去上次的两指距离
this.doscale(distance / this.store.distance, false)
// 记录这一次两指距离
this.store.distance = distance;
}
// 进行指定大小的缩放
doscale (scale, useCenter = true) {
// 为0或者为1就不进行缩放
if (scale === 0 && scale === 1) return
// 缩放前的transformDom大小
const oldSize = [
this.transformDom.offsetWidth * this.transformData.scale,
this.transformDom.offsetHeight * this.transformData.scale,
];
let scaleTranslateProportion = this.scaleTranslateProportion
// 如果直接操作,不是双指进行缩放就设置touchDom中心是缩放中心
if (useCenter) {
// touchDom的中心,
const scaleCenter = [
(this.touchDom.offsetWidth / 2 - this.transformData.x) / this.transformData.scale,
(this.touchDom.offsetHeight / 2 - this.transformData.y) / this.transformData.scale,
];
// 缩放导致偏移的比例
scaleTranslateProportion = [
scaleCenter[0] / this.transformDom.offsetWidth,
scaleCenter[1] / this.transformDom.offsetHeight,
];
}
// 设置缩放的偏移,之前纠结在使用两指的偏移位置来计算,实际上缩放后大小的变化不是两指间移动的距离
// 变化大小其实就是缩放的大小乘原来的大小
this.transformData.x +=
oldSize[0] *
(1 - scale) *
scaleTranslateProportion[0] || 0;
this.transformData.y +=
oldSize[1] *
(1 - scale) *
scaleTranslateProportion[1] || 0;
// 设置缩放
this.transformData.scale *= scale
this.setTransform();
}
// 更改移动缩放的效果
setTransform() {
// console.log(this.transformData);
// 奇奇怪怪的效果
if (this.damping) {
this.transformDom.style.transition = "transform .3s"
} else {
this.transformDom.style.transition = "none"
}
// 先平移再缩放
this.transformDom.style.transform = `
${this.perspective ? 'perspective(500px) rotateX(50deg) skewX(-10deg)' : ''}
translate(${this.transformData.x || 0}px, ${this.transformData.y || 0}px)
scale(${this.transformData.scale || 0}, ${this.transformData.scale || 0})`;
// 设置位置icon的偏移
this.siteIconDom.style.transform = `
translate(${this.transformData.x + 500 * this.transformData.scale || 0}px, ${this.transformData.y + 338 * this.transformData.scale || 0}px)`;
}
// 放大操作
enlargeScale(size = 1.2) {
// 如果没有超过限制就正常缩放,超过了就缩放到限制大小
if (this.transformData.scale * size <= this.maxScale) {
this.doscale(size)
} else {
this.doscale(this.maxScale / this.transformData.scale)
}
}
// 缩小操作
narrowScale(size = 0.8) {
if (this.transformData.scale * size >= this.minScale) {
this.doscale(size)
} else {
this.doscale(this.minScale / this.transformData.scale)
}
}
touchend () {
this.store = {
x: 0,
y: 0,
distance: 0,
}
this.touchType = ''
if (this.transformData.scale > this.maxScale) {
this.doscale(this.maxScale / this.transformData.scale, false)
}
if (this.transformData.scale < this.minScale) {
this.doscale(this.minScale / this.transformData.scale, false)
}
}
getTransformData () {
return this.transformData
}
setPerspective (value) {
this.perspective = value
this.setTransform()
}
setDamping (value) {
this.damping = value
this.setTransform()
}
distory() {
this.touchDom.removeEventListener('touchstart', this.touchstart.bind(this))
this.touchDom.removeEventListener('touchmove', this.touchmove.bind(this))
this.touchDom.removeEventListener('touchend', this.touchend.bind(this))
}
}
</script>
<!-- <script type="module"> -->
<script>
// import TouchMoveScale from './index.js'
const touchMoveScale = new TouchMoveScale({
touchDom: document.getElementById('touchBox'),
transformDom: document.getElementById('transformDom'),
transformData: {
x: 65,
y: 172,
scale: .16
},
minScale: 0,
maxScale: 0
})
document.getElementById('enlargeScale').addEventListener('click', e => {
touchMoveScale.enlargeScale()
})
document.getElementById('narrowScale').addEventListener('click', e => {
touchMoveScale.narrowScale()
})
let damping = false
let perspective = false
document.getElementById('damping').addEventListener('click', function(e) {
damping = !damping
this.className = `switch ${damping ? ' switch-open' : ''}`
touchMoveScale.setDamping(damping)
})
document.getElementById('perspective').addEventListener('click', function(e) {
perspective = !perspective
this.className = `switch ${perspective ? ' switch-open' : ''}`
touchMoveScale.setPerspective(perspective)
})
</script>
</body>
</html>