您的位置 首页 技术

Vue 手势组件教程

前言 最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作。 思路 直接在 DOM 上绑定 touchstart 、tou…

前言

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

思路

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

Vue 自定义指令

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

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

多点触控

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

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');        }    }});复制代码

使用指令

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

<template>    <p class="pinch" v-pinch="pinchCtrl"></p></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 绘制语法。

推荐教程:《JS教程》

以上就是Vue 手势组件教程的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/76190.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部