javascript - Hammer.js 分别识别捏和旋转
<p><p>我正在尝试使用 Hammer.js 来识别触摸事件。我想在捏合和旋转手势上做不同的事情，但是一旦我将两个识别器都添加到我的 Hammer.Manager 中，只有旋转手势被识别。</p>
<p>我在 iphone 6s 10.3.1 的 chrome 和 safari 上尝试此操作，结果相同(当我捏合或旋转时会识别旋转，而从不识别捏合)</p>
<p>codepen:<a href="http://codepen.io/anon/pen/YVjogm" rel="noreferrer noopener nofollow">http://codepen.io/anon/pen/YVjogm</a> </p>
<pre><code>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();
mc.on("pinch", function(ev) {
// do something
myElement.textContent += ev.type +" ";
});
mc.on("rotate", function(ev) {
// do something else
myElement.textContent += ev.type +" ";
});
</code></pre>
<p>有没有办法让这些手势分别被识别？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>也许这段代码可以解决问题。<br/>
我只使用捏来实现旋转和缩放功能。<br/>
试试这个代码:</p>
<pre><code>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;
});
</code></pre>
<p>示例:<a href="https://codepen.io/partyyaya/pen/KLoWJJ" rel="noreferrer noopener nofollow">https://codepen.io/partyyaya/pen/KLoWJJ</a> <br/>
对不起我糟糕的英语。 </p></p>
<p style="font-size: 20px;">关于javascript - Hammer.js 分别识别捏和旋转，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/44019199/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/44019199/
</a>
</p>
页:
[1]