【问题标题】:Hammer.js: How to detect pinch with any number of / multiple fingersHammer.js:如何检测任意数量/多个手指的捏合
【发布时间】:2016-02-14 16:41:02
【问题描述】:

当我创建一个新的 Hammer Pinch 事件时,并且没有在选项中提及指针的数量,它最多只检测 3 个手指,如果我提到指针,例如

var multiPinch = new Hammer.Pinch({event: 'multipinch', pointers: 4, threshold: 0});

,那么它只检测 4 个手指的捏合。我曾尝试在文档和任何地方进行搜索,但无法在一个事件中检测到 2、3 甚至 10 根手指的捏合。我需要这个,因为我的网络应用程序必须在 81 英寸大的屏幕上运行。

【问题讨论】:

    标签: javascript gesture multi-touch hammer.js pinchzoom


    【解决方案1】:

    好吧,我终于解决了!我不知道这是否是一个黑客,但它有效! 最后的解决方案很简单,就是将指针选项设置为0,是的零!

    var multiPinch = new Hammer.Pinch({event: 'multipinch', pointers: 0, threshold: 0});
    

    现在,这个“multipinch”事件检测到任意数量的指针(范围从 2 到 10)的夹点。

    这灵感来自这里的文档:http://hammerjs.github.io/recognizer-pinch/ 这说明了指针选项:

    | Option   | Default | Description                             |
    |:--------:|---------|-----------------------------------------|
    | pointers | 1       | Required pointers. 0 for all pointers.  |
    

    所以,我尝试将捏合事件的指针选项设置为 0,瞧,它奏效了!

    【讨论】:

      【解决方案2】:

      PinchRecognizer 检查指针的数量是否与您指定的完全相同。 (这实际上是在超类AttrRecognizer 中检查的)因此,在未指定指针参数时检测到 3 个指针实际上是令人惊讶的,因为默认值为 2。

      无论如何,我看到了两种解决方案。一种是编写自己的 Pinch 识别器。只需查看hammer.js 源代码并修改现有的,它实际上不到一屏长。 attrTest 函数正是您要寻找的。不要调用super方法(检查指针的数量),只检查指针的数量是否小于或等于你想要的。

      一个更简单的解决方案是为您想要的每个指针数量定义一个 PinchRecognizer。因此,如果您想检测 4 个或更少的手指,请这样做:

      var mc = new Hammer.Manager(element);
      
      mc.add(new Hammer.Pinch({ event: 'pinch2', pointers: 2, threshold: 0 }));
      mc.add(new Hammer.Pinch({ event: 'pinch3', pointers: 3, threshold: 0 }));
      mc.add(new Hammer.Pinch({ event: 'pinch4', pointers: 4, threshold: 0 }));
      

      免责声明:我尚未对此进行测试。您可能需要调用 recognizeWith 将所有识别器链接在一起。

      【讨论】:

      • 感谢您的回答。我终于用另一种方式解决了。看看我的答案!
      • 第二种解决方案似乎太麻烦了,因为我必须为每个号码编写识别器。 2-10 的指针,然后处理它们。幸运的是,pointers: 0 有效,否则我需要修改 Pinch 识别器。顺便说一句,看到 3 个指针被检测到确实令人惊讶。
      猜你喜欢
      • 2015-09-28
      • 1970-01-01
      • 2012-12-08
      • 2012-12-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多