原理

本組件基于CSS的transform實現(xiàn)。移動端監(jiān)聽touch事件（單指移動，雙指移動+縮放），PC端監(jiān)聽mouse事件（移動）和滾動事件wheel（縮放），更新transform的translateX/translateY/scale值，從而實現(xiàn)縮放、移動。由于transform不會產(chǎn)生重排，因此不節(jié)流也可以有很好的性能，用戶體驗就像德芙，縱享絲滑！

鼠標事件比較好理解，記錄鼠標按下時的坐標，移動時計算偏移距離與初始translate相加即可實現(xiàn)移動。滾動事件則是判斷縱向滾動距離event.deltaY，為正（下滾）縮小，為負（上滾）放大，同時要校正因縮放產(chǎn)生的偏移，讓縮放中心始終在鼠標點上。需要特別說明的是，PC觸控板的雙指縮放也是這個事件，而不是touch，至少目前我試的Windows和Mac都是，因此PC觸控板雙指縮放時不會移動。

touch事件要復(fù)雜一些，其中單指移動的時候跟鼠標移動差不多，難點在于雙指縮放。當雙指按下時，會記錄兩點中心坐標和長度，當雙指在屏幕上移動時，根據(jù)移動后的兩點間長度與初始長度的比值調(diào)整縮放，并校正縮放中心，然后再偏移前后兩個中心點的坐標差，以達到縮放點始終在兩指中間的效果。

組件提供了slot和雙向綁定兩種用法以盡可能滿足多種場景。默認元素（tag）是div，如果要用于svg，則可以用雙向綁定的方式獲得無單位的translate像素數(shù)。文章來源地址http://www.zghlxwxcb.cn/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),
    // 起始狀態(tài)緩存
    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中參照對象是父元素，否則參照子元素
         * 因此會導(dǎo)致縮放中心偏移，估不能采用，而要改用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>

到了這里，關(guān)于vue 拖動、縮放容器組件，支持移動端雙指縮放和PC端鼠標滾輪縮放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！