diff --git a/src/assets/img/poster/a.jpg b/src/assets/img/poster/a.jpg
new file mode 100644
index 0000000..2944509
Binary files /dev/null and b/src/assets/img/poster/a.jpg differ
diff --git a/src/components/slide/SlideImgs.vue b/src/components/slide/SlideImgs.vue
index 1c5dce6..ae85be7 100644
--- a/src/components/slide/SlideImgs.vue
+++ b/src/components/slide/SlideImgs.vue
@@ -4,8 +4,8 @@
+ @touchmove="touchmove"
+ @touchend="touchend">
@@ -285,7 +285,7 @@ export default {
return Math.hypot(stop.x - start.x, stop.y - start.y);
},
touchstart(e) {
- // console.log('start', e.touches.length)
+ console.log('start', e.touches.length)
if (this.state !== 'custom') {
this.state = 'stop'
}
@@ -296,6 +296,7 @@ export default {
this.startY = e.touches[0].pageY
this.startTime = Date.now()
} else {
+ if (this.isTwo) return
this.isTwo = true
this.itemRefs[this.index].style['transition-duration'] = '0ms';
@@ -303,23 +304,23 @@ export default {
e.preventDefault();
}
- this.lastPoint1 = this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
- this.lastPoint2 = this.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
+ this.last.point1 = this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
+ this.last.point2 = this.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
this.startCenter = this.getCenter(this.point1, this.point2)
}
},
- move(e) {
+ touchmove(e) {
console.log('move', e.touches.length)
if (this.isTwo && e.touches.length === 1) {
// console.log('单手移动',)
let current = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let movementX = current.x - this.last.point1.x
let movementY = current.y - this.last.point1.y
- // console.log(movementX, movementY)
+ console.log(movementX, movementY)
const t = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, movementX, movementY, 0, 1,]);
- ov = mat4.multiply(out, t, ov);
- this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
- this.last.point1 = current
+ let ov1 = mat4.multiply(out, t, ov);
+ this.itemRefs[this.index].style.transform = `matrix3d(${ov1.toString()})`;
+ // this.last.point1 = current
} else {
if (e.touches.length === 1) {
this.isTwo = false
@@ -341,7 +342,6 @@ export default {
if (e.cancelable) {
e.preventDefault();
}
-
let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
let current2 = {x: e.touches[1].pageX, y: e.touches[1].pageY}
@@ -353,12 +353,12 @@ export default {
rect = rectMap.get(this.index)
} else {
//getBoundingClientRect在手机上获取不到值
- // rect = this.itemRefs[this.index].getBoundingClientRect()
let offset = $(this.itemRefs[this.index]).offset()
rect.x = offset.left
rect.y = offset.top
rectMap.set(this.index, rect)
}
+
let center = cloneDeep(this.startCenter)
center.x -= rect.x
center.y -= rect.y
@@ -369,11 +369,24 @@ export default {
//如果zoom是累加放大(比如每次都是0.15),第三个参数用ov
//但这里zoom是每次都是最后放大倍数,第三个参数用原值(即,矩阵x乘时,都是乘以单位矩阵)
ov = mat4.multiply(out, t, original);
+
+ let movementX = current1.x - this.last.point1.x
+ let movementY = current1.y - this.last.point1.y
+ let movement2X = current2.x - this.last.point2.x
+ let movement2Y = current2.y - this.last.point2.y
+
+ let minX = Math.min(movementX, movement2X)
+ let minY = Math.min(movementY, movement2Y)
+
+ console.log('minX', minX, 'minY', minY)
+
this.itemRefs[this.index].style.transform = `matrix3d(${ov.toString()})`;
+ this.last.point1 = current1
+ this.last.point2 = current2
}
}
},
- end(e) {
+ touchend(e) {
console.log('end', e.touches.length, this.isTwo)
if (this.isTwo && e.touches.length === 1) {
//双指绽放,但只松开了一只手