1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：warmbook 分类：Toy博客 阅读(54) 违法举报

这篇具有很好参考价值的文章主要介绍了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

领红包