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/ )里扣出来简单支持缩放手势的部分

  • 相关阅读:
    Memcached下载、安装及使用演示。
    Redis和Memcache对比及选择
    Log4Net.Config配置信息《转》
    常用正则表达式!收藏
    关于ViewData,ViewBag,TempData三者学习记录!
    C#实战Microsoft Messaging Queue(MSMQ)消息队列(干货)<转>
    C# AutoResetEvent
    C#英文面试常见问题[转]
    Highsoft.Highcharts 5.0.6439.38401 key
    vs2017安装后自动应用许可证
  • 原文地址:https://www.cnblogs.com/vaal-water/p/3540727.html
Copyright © 2011-2022 走看看