html5摄像头手势识别,通过html5 touch事件封装手势识别组件(示例代码)

html5移动端新增了touchstart,touchmove,touchend事件，利用这3个事件，判断手指的点击和划动轨迹，我们可以封装各种手势的识别功能，

这3个事件和pc端的mousedown,mousemove,mouveup非常类似，不同的是touch事件可以有多个点击的点，而鼠标每次只有一个点，我们即然是做组件封装，就要考虑在pc上调试的情况，否则用手机调试非常不方便，通过对mouse事件的处理，可以一套代码同时兼容pc端和移动端。

下面来逐步封装一个滑动手势(swipe)的组件

1.判断是否触摸屏

我们使用能力检测，检测是否支持touchstart事件，就可以知道是否是触摸屏，因为触摸事件可以通过document.ontouchstart=function(){} 这样的方式定义，用in操作符判断即可，对于win8，触屏能力会在navigator对象中生成一个msPointerEnabled属性。

if (‘ontouchstart‘ in window || ‘ontouchstart‘ indocument) {//iOS & android

supportsTouch = true;

}else if(window.navigator.msPointerEnabled) {//Win8

supportsTouch = true;

}

2.同时兼容鼠标和触摸屏的事件绑定

我们根据上一步的判断，如果支持toucestart就绑定对应的touchstart,touchmove,touchend事件，如果不支持，则绑定对应的3个鼠标事件

if(isSupportTouch()){

el.addEventListener(‘touchstart‘,touchStart);

el.addEventListener(‘touchend‘,touchEnd);

el.addEventListener(‘touchmove‘,touchMove);

}else{

el.addEventListener(‘mousedown‘,touchStart);

el.addEventListener(‘mouseup‘,touchEnd);

el.addEventListener(‘mousemove‘,touchMove);

}

3.获取点击的点位置信息(兼容鼠标和触摸屏)

从事件参数中可以得到位置信息，如果是鼠标，则通过e.pageX,e.pageY获取点击位置相对于页面根节点的坐标，如果是触摸屏，则e.touches对象是一个点击点位置的数组，包含多个手指的点击位置，我们暂时只处理一只手指的情况，所以取e.touches[0].pageX,e.touches[0].pageY.

functiontouchStart(e){var t=e.touches?e.touches[0]:e;

startPoint={x:t.pageX,y:t.pageY};

}

4.判断手指滑动方向

在toucemove事件中判断手指划动，toucemove事件会连续触发，为了过滤掉划动距离太短的无效滑动，我们可以判断pageX和pageY和上一次位置的偏移量超过两个像素才认为是有效事件，然后再判断滑动方向，当前点击位置的(x,y)坐标，减去上一个位置的(x,y)坐标，如果x轴的差值大，就认为是左右滑，如果是y轴的差值大就认为是上下滑，再进一步判断差值 为正数则是左或上，差值为负数则为右或下。代码如下：

functiongetSwipeDirection(x1, x2, y1, y2) {return Math.abs(x1 - x2) >=Math.abs(y1- y2) ? (x1 - x2 > 0 ? ‘left‘ : ‘right‘) : (y1 - y2 >0 ? ‘up‘ : ‘down‘)

}

5.jquery插件封装

为了更方便使用，可以封装成jquery插件，我们常说的jquery对象其实是指继随自jquery原型的对象，jquery的原型是指$.fn,只要扩展$.fn即可，

如$.fn.methodName=function(){//code}

或用$.fn.extend({

methodName:funciton(){//code}

})

完整代码如下：

function TouchEvent(){

var self=this,element=$(this);

var el=element[0],isTouching,isSwipe,startTime,startPoint,currentPoint;

if(arguments.length>1){

var eventType=arguments[0];

}

var callback=arguments[arguments.length-1];

function doAction(type,args){

args.type=type;

if(eventType){

if(eventType==type){

callback.call(self,args);

}

}else{

callback.call(self,args);

}

}

function getSwipeDirection(x1, x2, y1, y2) {

return Math.abs(x1 - x2) >=

Math.abs(y1 - y2) ? (x1 - x2 > 0 ? ‘left‘ : ‘right‘) : (y1 - y2 >0 ? ‘up‘ : ‘down‘)

}

function isSupportTouch(){

var supportsTouch = false;

if (‘ontouchstart‘ in window || ‘ontouchstart‘ in document) {

//iOS & android

supportsTouch = true;

} else if(window.navigator.msPointerEnabled) {

//Win8

supportsTouch = true;

}

return supportsTouch;

}

function touchStart(e){

isTouching=true;

startTime=new Date();

var t=e.touches?e.touches[0]:e;

startPoint={x:t.pageX,y:t.pageY};

}

function touchMove(e){

if(isTouching){

var t=e.touches?e.touches[0]:e;

var p={x:t.pageX,y:t.pageY};

currentPoint=p;

var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y;

if(Math.abs(x1-x2)>2 || Math.abs(y1-y2)>2){

isSwipe=true;

var direction=getSwipeDirection(x1,x2,y1,y2);

//console.log(direction);

e.direction=direction;

doAction("swipe",e);

}

}

}

function touchEnd(e){

isTouching=false;

if(!isSwipe){

e["long"]=new Date()-startTime>1000;

doAction("tap",e);

//console.log("tap");

}else{

var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y;

var direction=getSwipeDirection(x1,x2,y1,y2);

console.log(direction)

doAction("swipeEnd",{direction:direction});

}

isSwipe=false;

}

if(isSupportTouch()){

el.addEventListener(‘touchstart‘,touchStart);

el.addEventListener(‘touchend‘,touchEnd);

el.addEventListener(‘touchmove‘,touchMove);

//el.addEventListener(‘touchcancel‘,actionFinsh);

}else{

el.addEventListener(‘mousedown‘,touchStart);

el.addEventListener(‘mouseup‘,touchEnd);

el.addEventListener(‘mousemove‘,touchMove);

}

}

$.fn.touchEvent = TouchEvent;