原理
本组件基于CSS的transform实现。移动端监听touch事件(单指移动,双指移动+缩放),PC端监听mouse事件(移动)和滚动事件wheel(缩放),更新transform的translateX/translateY/scale值,从而实现缩放、移动。由于transform不会产生重排,因此不节流也可以有很好的性能,用户体验就像德芙,纵享丝滑!
鼠标事件比较好理解,记录鼠标按下时的坐标,移动时计算偏移距离与初始translate相加即可实现移动。滚动事件则是判断纵向滚动距离event.deltaY,为正(下滚)缩小,为负(上滚)放大,同时要校正因缩放产生的偏移,让缩放中心始终在鼠标点上。需要特别说明的是,PC触控板的双指缩放也是这个事件,而不是touch,至少目前我试的Windows和Mac都是,因此PC触控板双指缩放时不会移动。
touch事件要复杂一些,其中单指移动的时候跟鼠标移动差不多,难点在于双指缩放。当双指按下时,会记录两点中心坐标和长度,当双指在屏幕上移动时,根据移动后的两点间长度与初始长度的比值调整缩放,并校正缩放中心,然后再偏移前后两个中心点的坐标差,以达到缩放点始终在两指中间的效果。文章来源:https://www.toymoban.com/news/detail-769340.html
组件提供了slot和双向绑定两种用法以尽可能满足多种场景。默认元素(tag)是div,如果要用于svg,则可以用双向绑定的方式获得无单位的translate像素数。文章来源地址https://www.toymoban.com/news/detail-769340.html
用例:
<template>
<div>
<!--普通用法-->
<Viewport>
<template v-slot="scope">
<img style="width:100%" :style="{transform:scope.transform}" src="test.jpg" />
</template>
</Viewport>
<!--SVG用法-->
<Viewport tag="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="3200" height="1800" v-model:transform="transform">
<g :transform="`translate(${transform.translateX},${transform.translateY}) scale(${transform.scale})`">
<image width="3200" height="1800" href="test.jpg" />
</g>
</Viewport>
</div>
</template>
<script>
import {shallowRef} from '@vue/reactivity';
import Viewport from './Viewport.vue';
export default {
setup(){
const transform=shallowRef({});
return {
transform,
}
},
components:{Viewport},
}
</script>
<style lang="scss" scoped>
.viewport{
width:90vw;
height:40vh;
margin-left:10vw;
margin-top:5vh;
display:block;
}
</style>
源码:
<template>
<component class="viewport" :is="tag" ref="el" @touchstart="onTouchstart" @mousedown="onMousedown" @wheel.prevent="onWheel">
<slot v-bind="{transform:computedTransform}"></slot>
</component>
</template>
<script>
import { computed } from '@vue/runtime-core';
import {shallowReactive,shallowRef} from '@vue/reactivity';
export default {
props:{
tag:{type:String,default:'div'},
transform:{type:Object,default:()=>shallowReactive({})},
minScale:{type:Number,default:0.2},
maxScale:{type:Number,default:2},
},
emits:['update:transform'],
setup(props,{emit,expose}){
const el=shallowRef(null),
// 起始状态缓存
origin={
translateX:0,
translateY:0,
scale:0,
x:0,y:0, // 单点起始坐标
rectX:0,rectY:0, // 容器相对视口的起始坐标
centerX:0,centerY:0, // 两点中心相对视口的起始坐标
offsetX:0,offsetY:0, // 两点中心相对移动目标左上角的坐标,即相对容器坐标减去translate偏移距离
length:0, // 两点起始长度
},
setCentre=touches=>{
origin.translateX=props.transform.translateX;
origin.translateY=props.transform.translateY;
origin.scale=props.transform.scale;
const rect=el.value.getBoundingClientRect();
origin.rectX=rect.x;
origin.rectY=rect.y;
origin.centerX=(touches[0].clientX+touches[1].clientX)/2;
origin.centerY=(touches[0].clientY+touches[1].clientY)/2;
origin.offsetX=(origin.centerX-origin.rectX-origin.translateX);
origin.offsetY=(origin.centerY-origin.rectY-origin.translateY);
origin.length=Math.sqrt(Math.pow(touches[0].clientX-touches[1].clientX,2)+Math.pow(touches[0].clientY-touches[1].clientY,2));
};
expose({el});
if([props.transform.translateX,props.transform.translateY,props.transform.scale].includes(undefined)){
if(props.transform.translateX===undefined) props.transform.translateX=0;
if(props.transform.translateY===undefined) props.transform.translateY=0;
if(props.transform.scale===undefined) props.transform.scale=props.minScale<=1&&1<=props.maxScale?1:(props.minScale+props.maxScale)/2;
emit('update:transform',{...props.transform});
}
return {
el,
computedTransform:computed(()=>Object.entries(props.transform).map(([k,v])=>k+'('+v+(k.startsWith('translate')?'px':'')+')').join(' ')),
onWheel(e){
if(!e.deltaY) return;
const old=props.transform.scale;
if(e.deltaY>0){
if(props.transform.scale<=props.minScale) return;
props.transform.scale-=0.1;
}else if(props.transform.scale<props.maxScale){
props.transform.scale+=0.1;
}else return;
/**
* offsetX和offsetY是相对于当前元素的位置,
* 但是只有在svg中参照对象是父元素,否则参照子元素
* 因此会导致缩放中心偏移,估不能采用,而要改用rect坐标
*/
const rect=el.value.getBoundingClientRect();
props.transform.translateX+=(e.clientX-rect.x-props.transform.translateX)*(1-props.transform.scale/old);
props.transform.translateY+=(e.clientY-rect.y-props.transform.translateY)*(1-props.transform.scale/old);
emit('update:transform',{...props.transform});
},
onMousedown(e){
origin.translateX=props.transform.translateX;
origin.translateY=props.transform.translateY;
origin.x=e.clientX;
origin.y=e.clientY;
const onMove=eve=>{
eve.preventDefault();
props.transform.translateX=eve.clientX-origin.x+origin.translateX;
props.transform.translateY=eve.clientY-origin.y+origin.translateY;
emit('update:transform',{...props.transform});
},
onEnd=()=>{
el.value.removeEventListener('mousemove',onMove);
el.value.removeEventListener('mouseup',onEnd);
el.value.style.removeProperty('cursor');
};
el.value.addEventListener('mousemove',onMove);
el.value.addEventListener('mouseup',onEnd);
el.value.style.setProperty('cursor','move');
},
onTouchstart(e){
switch(e.touches.length){
case 1:
document.body.style.setProperty('overflow','hidden');
origin.translateX=props.transform.translateX;
origin.translateY=props.transform.translateY;
origin.x=e.touches[0].clientX;
origin.y=e.touches[0].clientY;
const onMove_1=eve=>{
eve.preventDefault();
eve.stopPropagation();
if(eve.touches.length!==1) return;
props.transform.translateX=eve.touches[0].clientX-origin.x+origin.translateX;
props.transform.translateY=eve.touches[0].clientY-origin.y+origin.translateY;
emit('update:transform',{...props.transform});
},
onEnd_1=eve=>{
if(eve.touches.length) return;
el.value.removeEventListener('touchmove',onMove_1);
el.value.removeEventListener('touchend',onEnd_1);
document.body.style.removeProperty('overflow');
};
el.value.addEventListener('touchmove',onMove_1);
el.value.addEventListener('touchend',onEnd_1);
break;
case 2:
e.preventDefault();
setCentre(e.touches);
const onMove_2=eve=>{
if(eve.touches.length!==2) return;
let scale=origin.scale*Math.sqrt(
Math.pow(eve.touches[0].clientX-eve.touches[1].clientX,2)
+
Math.pow(eve.touches[0].clientY-eve.touches[1].clientY,2)
)/origin.length;
if(scale<props.minScale) scale=props.minScale;
else if(scale>props.maxScale) scale=props.maxScale;
props.transform.scale=scale;
const center={
x:(eve.touches[0].clientX+eve.touches[1].clientX)/2,
y:(eve.touches[0].clientY+eve.touches[1].clientY)/2
},
rect=el.value.getBoundingClientRect();
props.transform.translateX=origin.offsetX*(1-scale/origin.scale)+origin.translateX+(center.x-origin.centerX)-(rect.x-origin.rectX);
props.transform.translateY=origin.offsetY*(1-scale/origin.scale)+origin.translateY+(center.y-origin.centerY)-(rect.y-origin.rectY);
emit('update:transform',{...props.transform});
},
onEnd_2=eve=>{
if(eve.touches.length!==1){
if(eve.touches.length===2) setCentre(eve.touches);
return;
}
origin.translateX=props.transform.translateX;
origin.translateY=props.transform.translateY;
origin.x=eve.touches[0].clientX;
origin.y=eve.touches[0].clientY;
el.value.removeEventListener('touchmove',onMove_2);
el.value.removeEventListener('touchend',onEnd_2);
};
el.value.addEventListener('touchmove',onMove_2);
el.value.addEventListener('touchend',onEnd_2);
break;
}
},
}
},
};
</script>
<style lang="scss" scoped>
// 普通元素默认transform原点是中心,需要改成左上角
:slotted(*){ transform-origin:left top; }
</style>
到了这里,关于vue 拖动、缩放容器组件,支持移动端双指缩放和PC端鼠标滚轮缩放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!