vue2和vue3移动端网页图片触摸滑动改变top和left以及双指对图片进行缩放
vue2版本
js
<template>
<div class="coach_daily">
<div class="coach_daily-inline">
<div style="width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 10;"
@touchstart="startMap($event, 1)" @touchmove="moveMap($event, 1)" @touchend="endMap($event, 1)">
<img class="coach_daily_bg" ref="contrastimg" :src="require('@/assets/image/bgc-00.png')"
:style="{ transform: 'scale(' + store.scale + ')', top: top + 'px', left: left + 'px' }" alt="" />
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
store: { //图片缩放
scale: 1,
pageX: '',
pageY: '',
},
top: 0,
left: 0,
ot: 0,
ol: 0,
}
},
methods: {
// 图片的移动
//开始触摸
startMap (e, index) {
console.log('e', e)
this.ol = e.touches[0].clientX - this.$refs.contrastimg.offsetLeft
this.ot = e.touches[0].clientY - this.$refs.contrastimg.offsetTop
var touches = e.touches
var events = touches[0]
var events2 = touches[1]
if (!events) {
return
}
event.preventDefault()
console.log(events.pageX)
// 第一个触摸点的坐标
this.store.pageX = events.pageX
this.store.pageY = events.pageY
this.store.moveable = true
if (events2) {
this.store.pageX2 = events2.pageX
this.store.pageY2 = events2.pageY
}
this.store.originScale = this.store.scale || 1
},
//移动中
moveMap (e, index) {
let left = e.touches[0].clientX
let top = e.touches[0].clientY
this.top = top - this.ot
this.left = left - this.ol
e.preventDefault()
let store = this.store
var touches = e.touches
var events = touches[0]
var events2 = touches[1]
if (events2) {
// 双指移动
if (!store.pageX2) {
store.pageX2 = events2.pageX
}
if (!store.pageY2) {
store.pageY2 = events2.pageY
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y)
}
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) /
getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
})
var newScale = store.originScale * zoom
// 最大缩放比例限制
if (newScale > 3) {
newScale = 3
}
// 记住使用的缩放值
this.store.scale = newScale
}
},
//结束
endMap () {
},
}
}
</script>
<style scoped lang="less">
.coach_daily {
width: 100vw;
height: 100vh;
// height: auto;
position: relative;
overflow: hidden;
}
.coach_daily_bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
}
.coach_daily-inline {
width: 7.5rem;
height: 10rem;
}
</style>
效果图(移动,手指怎么滑这里就怎么移动)双指缩放(缩小)
双指缩放(放大)
上面代码直接复制粘贴到一个vue2的页面上,修改个图片地址即可,拿来即用
vue3版本
html
<script setup>
import { ref } from "vue";
const store = ref({
//图片缩放
scale: 1,
pageX: "",
pageY: "",
});
const contrastimg = ref(null);
const top = ref(0);
const left = ref(0);
const ot = ref(0);
const ol = ref(0);
// 开始移动
const startMap = (e, index) => {
ol.value = e.touches[0].clientX - contrastimg.value.offsetLeft;
ot.value = e.touches[0].clientY - contrastimg.value.offsetTop;
var touches = e.touches;
var events = touches[0];
var events2 = touches[1];
if (!events) {
return;
}
event.preventDefault();
console.log(events.pageX);
// 第一个触摸点的坐标
store.value.pageX = events.pageX;
store.value.pageY = events.pageY;
store.value.moveable = true;
if (events2) {
store.value.pageX2 = events2.pageX;
store.value.pageY2 = events2.pageY;
}
store.value.originScale = store.value.scale || 1;
};
// 移动中
const moveMap = (e, index) => {
let leftX = e.touches[0].clientX;
let topY = e.touches[0].clientY;
top.value = topY - ot.value;
left.value = leftX - ol.value;
console.log("leftX,topY", leftX, topY);
console.log("top.value,left.value", top.value, left.value);
e.preventDefault();
var touches = e.touches;
var events = touches[0];
var events2 = touches[1];
if (events2) {
// 双指移动
if (!store.value.pageX2) {
store.value.pageX2 = events2.pageX;
}
if (!store.value.pageY2) {
store.value.pageY2 = events2.pageY;
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
var zoom =
getDistance(
{
x: events.pageX,
y: events.pageY,
},
{
x: events2.pageX,
y: events2.pageY,
}
) /
getDistance(
{
x: store.value.pageX,
y: store.value.pageY,
},
{
x: store.value.pageX2,
y: store.value.pageY2,
}
);
var newScale = store.value.originScale * zoom;
// 最大缩放比例限制
if (newScale > 3) {
newScale = 3;
}
// 记住使用的缩放值
store.value.scale = newScale;
}
};
// 结束移动
const endMap = (e, index) => {};
</script>
<template>
<div class="container">
<div class="bgcContainer">
<div
class="bgImgContainer"
@touchstart="startMap($event, 1)"
@touchmove="moveMap($event, 1)"
@touchend="endMap($event, 1)"
>
<img
class="coach_daily_bg"
ref="contrastimg"
:src="require('@/assets/image/bgc-00.png')"
:style="{
transform: 'scale(' + store.scale + ')',
top: top + 'px',
left: left + 'px',
}"
alt=""
/>
</div>
</div>
</div>
</template>
<style scoped lang="less">
.bgcContainer {
width: 100vw;
height: 100vh;
.bgImgContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 10;
.coach_daily_bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
}
}
}
</style>