MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新图片组件

Browse Source
This commit is contained in:
zyronon 2022-03-31 01:01:07 +08:00
parent f9c2323584
commit ee2366cade
1 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/test/TestImg.vue
View File

@ -22,16 +22,11 @@ export default {
x: 0,
y: 0,
scale: 1,
maxScale: 3,
minScale: 0.5,
point1: {x: 0, y: 0},
point2: {x: 0, y: 0},
diff: {x: 0, y: 0},
lastPointermove: {x: 0, y: 0},
lastPoint1: {x: 0, y: 0},
lastPoint2: {x: 0, y: 0},
lastCenter: {x: 0, y: 0},
touches: [],
}
},
created() {
@ -72,13 +67,13 @@ export default {
this.lastPoint2 = this.point2 = {x: events2.pageX, y: events2.pageY};
this.lastCenter = this.getCenter(this.lastPoint1, this.lastPoint2)
// console.log('lastPoint1', this.lastPoint1)
}
},
move(e) {
if (e.touches && e.touches.length === 1) {
} else {
this.isTwo = true
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}
@ -89,7 +84,7 @@ export default {
this.scale = this.scale * ratio
// 计算当前双指中心点坐标
// let center = this.getCenter(current1, current2)
let center = this.getCenter(current1, current2)
// console.log('center', center)
// 计算图片中心偏移量，默认transform-origin: 50% 50%
@ -97,23 +92,21 @@ export default {
// origin.y = (ratio - 1) * result.height * 0.4
// 如果通过修改宽高或使用transform缩放，但将transform-origin设置为左上角时。
// 可以不用计算origin，因为(ratio - 1) * result.width * 0 = 0
// const origin = {
// x: (ratio - 1) * this.result.width * 0.5,
// y: (ratio - 1) * this.result.height * 0.5
// };
const origin = {
x: (ratio - 1) * this.result.width * 0.5,
y: (ratio - 1) * this.result.height * 0.5
};
// 计算偏移量，认真思考一下为什么要这样计算(带入特定的值计算一下)
// this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
// this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
this.x -= (ratio - 1) * (center.x - this.x) - origin.x - (center.x - this.lastCenter.x);
this.y -= (ratio - 1) * (center.y - this.y) - origin.y - (center.y - this.lastCenter.y);
// console.log('this.x', this.x)
// console.log('this.y', this.y)
// 图像应用缩放效果
this.$refs.img.style.transform =
// `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`;
`scale(${this.scale})`;
this.$refs.img.style.transform = `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`;
// this.lastCenter = {x: center.x, y: center.y};
this.lastCenter = {x: center.x, y: center.y};
this.lastPoint1 = {x: current1.x, y: current1.y};
this.lastPoint2 = {x: current2.x, y: current2.y};
}
@ -123,8 +116,9 @@ export default {
// 图像应用缩放效果
this.scale = 1
this.x = this.y = 0
this.$refs.img.style.transform =
`translate3d(0px,0px,0) scale(1)`;
this.$refs.img.style['transition-duration'] = '300ms';
this.$refs.img.style.transform = `translate3d(0px,0px,0) scale(1)`;
// this.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
}