vue 拖动、缩放容器组件,支持移动端双指缩放和PC端鼠标滚轮缩放

这篇具有很好参考价值的文章主要介绍了vue 拖动、缩放容器组件,支持移动端双指缩放和PC端鼠标滚轮缩放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原理

本组件基于CSS的transform实现。移动端监听touch事件(单指移动,双指移动+缩放),PC端监听mouse事件(移动)和滚动事件wheel(缩放),更新transform的translateX/translateY/scale值,从而实现缩放、移动。由于transform不会产生重排,因此不节流也可以有很好的性能,用户体验就像德芙,纵享丝滑!

鼠标事件比较好理解,记录鼠标按下时的坐标,移动时计算偏移距离与初始translate相加即可实现移动。滚动事件则是判断纵向滚动距离event.deltaY,为正(下滚)缩小,为负(上滚)放大,同时要校正因缩放产生的偏移,让缩放中心始终在鼠标点上。需要特别说明的是,PC触控板的双指缩放也是这个事件,而不是touch,至少目前我试的Windows和Mac都是,因此PC触控板双指缩放时不会移动。

touch事件要复杂一些,其中单指移动的时候跟鼠标移动差不多,难点在于双指缩放。当双指按下时,会记录两点中心坐标和长度,当双指在屏幕上移动时,根据移动后的两点间长度与初始长度的比值调整缩放,并校正缩放中心,然后再偏移前后两个中心点的坐标差,以达到缩放点始终在两指中间的效果。

组件提供了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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包