moble 设备多指手势识别（tap , double_tap , pinch）

 1 function(){
 2     elem.addEventListener('touchstart', start , false)
 3     elem.addEventListener('touchend', end , false)
 4     elem.addEventListener('touchmove', move , false)
 5     var coefficient = .02
 6     var fingers
 7    
 8     var threshold = {'dbl_tap':400, 'tap':250}
 9     var start = null
10         ,last_tap = null
11     function start(evt){
12         fingers = getFingers(evt)
13         start = new Date
14      
15         }
16 
17     function end(act ,evt){
18         var now =  new Date
19         if (now - start <  threshold.tap){
20             //tap
21             if (last_tap && (now - last_tap) < threshold.dbl_tap) {
22                 #double_tap 事件
23                 last_tap = null  
24             }else{
25                 #tap 事件
26 
27             }
28             last_tap = now
29             }
30         fingers = null
31       
32 
33         }
34 
35     function move(evt){
36         evt.preventDefault()
37         var end_fingers = getFingers(evt)
38         if (2 == fingers.length && 2 == end_fingers.length)
39             return pinch(fingers , end_fingers)
40         else if (1 == fingers.length)
41             return drag(fingers ,end_fingers)
42 
43         }
44     function drag(fg1 , fg2){
45         var d = {x: fg2[0].x - fg1[0].x , y:fg2[0].y - fg1[0].y }
46         #drag 事件
47 
48         }
49     function pinch(fg1 , fg2){
50 
51         var d = []
52             d.push( getDistance(fg1[0] , fg1[1]) )
53             d.push( getDistance(fg2[0] , fg2[1]) )
54         var scale = 1 - (d[0] - d[1])/ d[0] * coefficient
55         #缩放 scale>1 pinchout ;scale<1 pinchin
56 
57         }
58     function getDistance(A ,B){
59         if (!A || !B) return 0
60         return Math.sqrt((B.x-A.x)*(B.x-A.x)+(B.y-A.y)*(B.y-A.y))
61 
62         }
63     function getFingers(evt){
64      var g = []
65         for (var i = 0; i < event.touches.length; i++) {
66             var t = event.touches[i]
67             g.push({x:t.pageX ,y :t.pageY})
68             }
69         return g
70         }
71 }

ios 上能监听到 gesturechange事件，但 android机不行，从QuoJS（http://quojs.tapquo.com/ ）里扣出来简单支持缩放手势的部分

posted on 2014-02-08 16:47 雨弓阅读(1111) 评论(0) 编辑收藏举报

moble 设备多指手势识别 （tap , double_tap , pinch）

moble 设备多指手势识别（tap , double_tap , pinch）