zoukankan      html  css  js  c++  java
  • 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/ )里扣出来简单支持缩放手势的部分

  • 相关阅读:
    编写EasyCluster V2.0 Portal主界面时的HTML心得(NOWRAP)
    Learning Perl 4ed Reading Notes Chapter4 Subroutines
    Ajax的异步,是鸡肋还是鸡排?
    JavaScript中使用eval函数将一个String当成一句JS代码来执行
    AJAX中消除Tomcat会cache action返回值的问题
    Learning Perl 4ed Reading Notes Chapter2 Scalar Data
    你知道这个语法吗?
    33中JS效果整理
    SQL语法大全[转]
    JS表单判断函数代码大全
  • 原文地址:https://www.cnblogs.com/vaal-water/p/3540727.html
Copyright © 2011-2022 走看看