OGeek|极客世界-中国程序员成长平台

标题: javascript - Hammer.js 分别识别捏和旋转 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:41
标题: javascript - Hammer.js 分别识别捏和旋转

我正在尝试使用 Hammer.js 来识别触摸事件。我想在捏合和旋转手势上做不同的事情，但是一旦我将两个识别器都添加到我的 Hammer.Manager 中，只有旋转手势被识别。

我在 iphone 6s 10.3.1 的 chrome 和 safari 上尝试此操作，结果相同(当我捏合或旋转时会识别旋转，而从不识别捏合)

codepen:http://codepen.io/anon/pen/YVjogm

var myElement = document.getElementById('myElement');

var mc = new Hammer.Manager(myElement);

// create a pinch and rotate recognizer
// these require 2 pointers
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotate();

// we want to detect both separately
pinch.requireFailure(rotate);

// add to the Manager
mc.add([pinch, rotate]);


mc.on("pinch", function(ev) {
  // do something
    myElement.textContent += ev.type +" ";
});

mc.on("rotate", function(ev) {
  // do something else
    myElement.textContent += ev.type +" ";
});

有没有办法让这些手势分别被识别？

---

Best Answer-推荐答案

也许这段代码可以解决问题。
我只使用捏来实现旋转和缩放功能。
试试这个代码:

var imageSize = 1;
var preAngle = 0;
var rotateAngle = 0;
var currentAngle;
var hammer = new Hammer(imgObject);
hammer.get('pinch').set({enable: true});

hammer.on("pinchmove", function(e) {
    if(preAngle == 0){
        //recode previous angle
        preAngle = Math.round(e.rotation);
    }else{
        currentAngle = (rotateAngle + Math.round(e.rotation)-preAngle);
        imgObject.style.webkitTransform = "scale("+imageSize*e.scale+") 
        rotate("+currentAngle+"deg)";
    }   
});

hammer.on("pinchend", function(e) {
    imageSize = imgObject.getBoundingClientRect().width / imgObject.offsetWidth;
    rotateAngle = currentAngle;
    preAngle = 0;
});

示例:https://codepen.io/partyyaya/pen/KLoWJJ
对不起我糟糕的英语。

关于javascript - Hammer.js 分别识别捏和旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44019199/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4