android js 双指事件,移动端touch事件--点击、双指与拖拽
前言
用vue做移动端开发过程中,需要手势操作。因为vue-touch目前不支持vue2.0,所以自己写了几个手势。
实现功能
点击
双指缩放图片
移动
指令代码
myTouch.js >>
export default(Vue) => {
Vue.directive('touch', {
bind: function (el, binding, vnode) {
let type = binding.arg; // 传入点击的类型
let coordinate = {} // 记录坐标点的对象
let timeOutTap;
let timeOutLong;
let scaleSize; // 缩放尺寸
let displacement = {}; //移动的位移
// 勾股定理计算距离
function getDistance(bg, end){
return Math.sqrt(Math.pow((end.x - bg.x),2 ) + Math.pow((end.y - bg.y),2 ));
}
// 点击开始的时候
el.addEventListener('touchstart', function(e){
// 获取第一个手指点击的坐标
let x = e.touches[0].pageX;
let y = e.touches[0].pageY;
// 如果点击的时间很长,那么点击的类型就是长按 --- longTouch
timeOutLong = setTimeout(() => {
timeOutLong = 0;
if(type === 'longTouch'){
binding.value.func(binding.value.param)
}
}, 2000)
timeOutTap = setTimeout(() => {
timeOutTap = 0;
if(type === 'tap' && e.touches.length === 1){
binding.value.func(binding.value.param)
}
}, 200)
// 如果是两个手指,而且类型是缩放 --- scaleTocuh
if(e.touches.length > 1 && type === 'scaleTouch'){
// 记录双指的间距长度
coordinate.start = getDistance({
x: e.touches[0].pageX,
y: e.touches[0].pageY,
},{
x: e.touches[1].pageX,
y: e.touches[1].pageY,
})
}
// 如果是移动的话,还要记录下来最开始的位置,只能一个手指位移
if(type === 'slideTouch' && e.touches.length == 1){
// debugger
displacement.start = {
x: e.touches[0].pageX,
y: e.touches[0].pageY,
}
}
}, false)
el.addEventListener('touchmove', function(e){
clearTimeout(timeOutTap)
clearTimeout(timeOutLong)
timeOutTap = 0; timeOutLong = 0;
// 如果是缩放类型
if(type == 'scaleTouch' && e.touches.length === 2){
// 计算移动过程中的两个手指的距离
coordinate.stop = getDistance({
x: e.touches[0].pageX,
y: e.touches[0].pageY,
},{
x: e.touches[1].pageX,
y: e.touches[1].pageY,
})
// 设置缩放尺寸
scaleSize = (coordinate.stop / coordinate.start) - 1;
// 这里设置图片不能无限放大与缩小
// 这里设置放大缩小速度慢一点,所以 /4一下
binding.value.func(scaleSize / 2, false)
}
// 如果是移动类型
if(type == 'slideTouch' && e.touches.length === 1 ){
displacement.end = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY,
}
binding.value.func({x:displacement.end.x - displacement.start.x, y: displacement.end.y - displacement.start.y, is_endMove : false})
}
}, false)
el.addEventListener('touchend', function(e){
if(type === 'scaleTouch'){
binding.value.func(0, true)
}
if(type === 'slideTouch'){
binding.value.func({x:0, y: 0, is_endMove : true})
}
}, false)
}
})
}
使用方法
html:
v-touch:scaleTouch = "{func: scalePic, param: ''}"
v-touch:slideTouch = "{func: movePic, param: ''}"
/>
vue:
main.js >>
import myTouch from './myTouch'
myTouch(Vue)
app.vue >>
data:function () {
return{
baseLeft : 0,
baseTop: 0,
bodyWidth: document.body.clientWidth,
ele: null, // 不能在这里设置, dom还没有生成
}
},
放大功能实现
scalePic: function(param, is_endScale){
this.ele =document.getElementsByClassName('modal_content')[0]; // 这个应该在图片显示的时候设置
let nodeStyle = this.ele.style.transform;
let changeSize = nodeStyle ? parseFloat(nodeStyle.slice(nodeStyle.indexOf('scale')+6)) : 0;
if(is_endScale){
// 缩放图片结束,要重新计算定位
this.setMaxdisp(changeSize,parseInt(this.ele.style.marginLeft), parseInt(this.ele.style.marginTop), 'scale')
return
}
if(nodeStyle){
// 如果存在的话,就说明已经设置了,scale已经改变了
let currScaleSize = changeSize + param;
currScaleSize > 3 ? currScaleSize = 3 : null
currScaleSize < 1 ? currScaleSize = 1 : null
this.ele.style.transform = 'translate(-50%, -50%) scale('+currScaleSize+','+currScaleSize+')';
}else{ // 如果不存在,就说明是第一次设置
let scale = param + 1
this.ele.style.marginLeft = '0px';
this.ele.style.marginTop = '0px';
this.ele.style.transform = 'translate(-50%, -50%) scale('+scale+','+scale+')';
}
}
移动功能
movePic: function(param){
if(param.is_endMove){ // 每次移动松开手指的时候要下次移动的基础坐标
this.baseLeft = parseInt(this.ele.style.marginLeft.slice(0, -2));
this.baseTop = parseInt(this.ele.style.marginTop.slice(0, -2));
}else{
let nodeStyle = this.ele.style.transform
if(nodeStyle){ // 有这个就表示应该是移动
let currScaleSize = parseFloat(nodeStyle.slice(nodeStyle.indexOf('scale')+6))
this.setMaxdisp(currScaleSize,this.baseLeft+ param.x, this.baseTop + param.y, 'move')
}
}
}
计算最大位移
setMaxdisp:function(changeSize, changeX, changeY, type){
// 计算最大位移
// naturalWidth : 是图片原始的宽度,通过比例可以计算出当前图片在页面的高度
let picHeight = this.bodyWidth / (this.ele.naturalWidth / this.ele.naturalHeight);
let maxTop = ( picHeight * changeSize - window.innerHeight) /2
let maxLeft = this.bodyWidth / 2 * (changeSize - 1)
if(changeX >= maxLeft){
this.ele.style.marginLeft = maxLeft + 'px'
}else if(changeX < -maxLeft){
this.ele.style.marginLeft = -maxLeft + 'px'
}else if(type==='move'){
this.ele.style.marginLeft =changeX +'px';
}
// 如果图片当前尺寸大于屏幕尺寸,可以移动
if(maxTop > 0){
if(changeY >= maxTop){
this.ele.style.marginTop = maxTop + 'px';
}else if(changeY < -maxTop){
this.ele.style.marginTop = -maxTop + 'px'
}else if(type==='move'){
this.ele.style.marginTop = changeY+'px';
}
}else if(type==='move'){
this.ele.style.marginTop = 0 +'px';
}
}
遇到的问题
双指与单指容易混淆
在双指放大缩小的时候,两个手指松开时间不同,页面就会在两个手指松开的时候判断为点击事件。 这个还没有解决
计算图片位移程度
图片不能随意的位移。应该是在一定范围内去位移的,所以写了一个计算最大位移的函数,图片位移距离应该是图片刚好能看到的程度。通过图片原始的宽高,以及页面当前的宽度比例可以计算出当前图片在页面的高度。然后计算出最大位移
每次移动的基础位置
图片移动或者缩小懂应该是在一个基础数据上去增加减少,如果没有设置这个基础数据,会导致每次都是从1的比例来移动以及缩小,所以每次移动以及放大缩小图片之后,都要记录下来改变之后图片的参数,下次改变图片的时候都是在这个参数基础上去改变的。
android js 双指事件,移动端touch事件--点击、双指与拖拽相关推荐
- 移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
- 移动端touch事件的处理
首先简单介绍一下iOS上的浏览器(这里主要指Safari)所支持的 多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue),最后将javascript + html + ...
- demo h5 touch 移动_H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 搞定移动端一(移动端 touch 事件,TouchEvent 对象)
移动端事件 1.目标 掌握移动端 touch 事件使用 掌握 touch 事件和 mouse 事件的区别 掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
- 移动端 touch事件 过渡事件 动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...
- 移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
- Cocos Creator Touch事件与Unity3D Touch事件
Cocos Creator Touch 事件 cc.Node 有一套完整的事件监听和分发机制.在这套机制之上,提供了一些基础的节点相关的系统事件.因此,在cocos creator中touch事件是与 ...
- android touch事件无反应,移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...
- 原生js实现移动端touch事件,解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...
- 【JS教程】移动端 Touch(触摸)事件
一.pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...
最新文章
- ehchache验证缓存过期的api_ASP.NET Core ResponseCache进行缓存操作
- DotNetCore跨平台~System.DrawingCore部署Linux需要注意的
- 初学FF(火狐)的扩展(Extensions)
- LiveVideoStack主编观察03 /大会见闻思考
- 程序员面试金典 - 面试题 05.06. 整数转换(位运算)
- 329. 矩阵中的最长递增路径
- vue实现数字“滚动式增加”效果 【插件化封装】
- Android studio 2.3版本出现的问题: Please select at least one of the signature versions to use
- 开源不止,前进不息:2018 OpenInfra Days China 来了!
- 如何使用sklearn进行数据挖掘?
- python java go 区别 一句话概括
- 最短路经典 昂贵的聘礼(1062)
- 学生用计算机如何解方程,学生党必备神器!一键解方程计算器App
- 【Markdown小技巧】 整理小图标和表情符号
- 【Linux】Linux环境基础开发工具的使用 ———(yum、vim、gccg++、gdb、make/Makefile、进度条 、git)
- 【OpenGrok代码搜索引擎】四、OpenGrok使用指南
- (一)JMeter性能测试,完整入门篇:性能测试操作步骤
- 透明度百分和六进制对比表
- 数字游戏(东华大学OJ练习题)
- 个体户如何注册和认证自己的微信小程序