vue 多点触控手势_手写 Vue 手势组件__Vue.js
前言
最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作。
项目与效果预览
思路
直接在 DOM 上绑定 touchstart 、touchmove、touchend 不仅要绑定这几个事件,而且用在其他项目还不好复用。所以用 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');
}
}
});
使用指令
手势逻辑写入自定义指令,就可以直接使用了。
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 绘制语法。
更多文章
vue 多点触控手势_手写 Vue 手势组件__Vue.js相关推荐
- vue 多点触控手势_涨姿势了!Appium也可以多点触控操作
有头发且有趣的码农万里挑一~ 104 有料叔 | 一位有故事的程序猿 在网页中我们经常使用缩放操作来便利的查看具体的信息,在appium中使用MultiAction多点触控的类来实现 MultiAct ...
- vue filter对象_学习vue源码(3) 手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
- vue 多点触控手势_移动端手势事件(多指操作)
在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart.toucmove.touchend事件上进行改造升级,下面就介绍下升级改 ...
- vue 日期面板_手写Vue日历组件
export class Lunar {//初一显示月份 //节日按照优先级替换日 private dataObj: any ={ month:"", day:"&quo ...
- thinkpad触控笔怎么用_【ThinkPad X1 Yoga 2018笔记本电脑使用总结】键盘|手写笔|显示|触控板_摘要频道_什么值得买...
ThinkPad X1 Yoga 2018笔记本电脑使用总结(键盘|手写笔|显示|触控板) 1.键盘 这篇原创全程有X1 Yoga 2018完成,X1的键盘手感应该来说很不错,比目前在用的MD223的 ...
- android怎么监听多点触摸_什么是多点触控技术,有哪些用途
自从乔布斯将触控技术用于苹果手机上,很多的手机厂商纷纷效仿,触控技术几乎成为手机的"标配".其实,触控技术早就存在,只是一直未能大面积用于各种设备中,本文将带您认识神奇的触控技术. ...
- Android 图片随着手势缩放,平移,并且支持多点触控
效果图: 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~ 想要做到图片支持多点触控,自由的进行 ...
- Android官方开发文档Training系列课程中文版:手势处理之多点触控处理
原文地址:http://android.xsoftlab.net/training/gestures/multi.html 多点触控是指多个手指同时触摸屏幕的情况.这节课主要学习如何检测多点触控手势. ...
- Linux的触屏手势软件安装,如何添加Mac的多点触控手势到Ubuntu | MOS86
虽然Mac操作系统有很多故障,易于使用是苹果在其他地方超越的主要地方.在Mac笔记本电脑上,由于macOS如何实现触摸板手势,因此用户可以期待出色的令人印象深刻的触摸板体验. On默认情况下Ubunt ...
最新文章
- 突出告警信息(DBA_OUTSTANDING_ALERTS)
- shell脚本编程《linux下kvm虚拟机的创建、开启、显示、停止、重置》
- python环境下neo4j的安装与使用
- Swift - 从字典(或者Alamofire)直接创建Model文件的工具
- 首秀 Express 框架
- mysql 行转列 (结果集以坐标显示)
- FileNotFoundError: [Errno 2] No such file or directory: 'test/条形图03.html'
- 新建文本文档好玩的代码_(03)用什么工具写ASP源代码?
- @RequestParam详解
- JasperReport报表导出PDF中文不显示的问题
- 前端Js框架汇总【转】
- 三菱GXWorks2 程序写入CPU之前准备工作
- python判断图片是不是火车票_12306验证码图像识别程序源码-Python识别12306验证码 - PS下...
- 数据库服务器使用的RAID存储架构初步介绍
- 非典型程序员单板滑雪入门教程指北
- 关于微信平台朋友和朋友圈分享不回调的问题。
- [book]《岩田先生》
- Ubuntu系统腾讯会议使用ffmpeg屏幕录制+声音录制
- 电容传感器FDC2214单通道应用寄存器计算
- 频繁跳槽会有什么不好的影响?
热门文章
- python等待线程结束_python线程join
- Python之list每个元素小数点精度控制
- java php json转字符串_php json字符串转为数组或对象
- ajax写删除程序,ajax处理程序删除标记
- kafka maven 依赖_Flink的sink实战之二:kafka
- ajax遍历数组对象数组对象数组,javascript - 从ajax json请求中,如何将对象动态添加到数组中,以便我可以遍历它们? - 堆栈内存溢出...
- mysql三高教程(二):2.7 如何约束数据
- 不能连接到 mysql_怎么无法连接到数据库?
- Android模拟器远程,使用Android模拟器进行远程调试
- Python getattr