码迷,mamicode.com
首页 > 其他好文 > 详细

如何手 Vue的手势组件呢?本文教你

时间:2020-06-12 10:38:01      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:else   binding   bind   多点触控   ctrl   asc   uil   需要   事件   

前言

最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作。

项目与效果预览

 

技术图片

 

思路

直接在 DOM 上绑定 touchstart 、touchmovetouchend 不仅要绑定这几个事件,而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适,指令还可以封装成插件,再使用 npm 托管,这样随时随地都可以使用了。

Vue 自定义指令

Vue 官网就有 自定义指令 的教程,摘取我们需要的关键代码。

Vue.directive(‘pinch‘, {
  // 只调用一次,指令第一次绑定到元素时调用
  bind (el, binding)  {
    // el:指令所绑定的元素,可以用来直接操作 DOM
    // binding.value():运行添加到指令的回调方法

  }
})
复制代码

多点触控

实现捏合手势,必然是多根手指操作,因此使用 touch 的多点触控,就可以拿到多个触控点的位置了。再通过判断两点 touchstart 与 touchend 前的距离偏差,就可以判断出是捏合手势,还是放大手势了。关键代码如下:

let touchFlag = false;
let touchInitSpacing = 0;
let touchNowSpacing = 0;

el.addEventListener(‘touchstart‘,(e)=>{
    if(e.touches.length>1){
        touchFlag = true;
        touchInitSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }else{
        touchFlag = false;
    }
});

                
el.addEventListener(‘touchmove‘,(e)=>{
    if(e.touches.length>1&&touchFlag){
        touchNowSpacing = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)**2 +(e.touches[1].clientY-e.touches[1].clientY)**2);
    }
});

el.addEventListener(‘touchend‘,()=>{
    if(touchFlag){
        touchFlag = false;
        if(touchInitSpacing-touchNowSpacing>0){
            binding.value(‘pinchin‘);
        }else{
            binding.value(‘pinchout‘);
        }
    }
});我是08年出道的高级前端老鸟,有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦

使用指令

手势逻辑写入自定义指令,就可以直接使用了。

<template>
    <div class="pinch" v-pinch="pinchCtrl"></div>
</template>
复制代码
new Vue({
  methods: {
      pinchCtrl: function (e) {        
          if(e===‘pinchin‘){
              console.log(‘捏合‘)
          }
          if(e===‘pinchout‘){
              console.log(‘扩大‘);
          }
      }
  }
})
复制代码

总结

使用 Vue 自定义指令完成手势操作并不复杂,同时将该逻辑封装成组件量级很轻。

组件源码

点此 查看完整源码。

使用该组件

如果该组件对你有所帮助,可以通过 npm 的方式进行安装:

npm i vue-pinch --save
复制代码

更多组件

create-picture:该组件提供了 canvas 的图片绘制与文本绘制功能,使用同步的语法完成异步绘制,简化原生 canvas 绘制语法。记住:我是08年出道的高级前端老鸟,有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦

本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

如何手 Vue的手势组件呢?本文教你

标签:else   binding   bind   多点触控   ctrl   asc   uil   需要   事件   

原文地址:https://www.cnblogs.com/chengxuyuanaa/p/13097849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!