0

我正在使用 jGesture jquery 库来处理手势事件。根据文档，增量和方向不适用于手势事件。 http://jgestures.codeplex.com/documentation

$('body').bind('pinchopen pinchclose', function(el, ev) {
   if (ev.description === 'pinch:+1:open') {
      alert('pinchopen');
   } else if (ev.description === 'pinch:-1:close') {
      alert('pinchclose');
   }
});

一旦触摸了图形，我尝试使用 touchstart 事件来跟踪 pageX 和 pageY，并在 pinchopen/close 事件中使用这些坐标，但这些事件有时不会同时调用。还有其他方法吗？

4

2 回答 2

1

您可以简单地使用ev.scale属性。缩小时的示例比例值：0.6803972721099854

var i = 300;
$('#element_id').bind('swipemove', function(event){ event.preventDefault();});
$('#element_id').bind('pinchopen pinchclose', function(el, ev) {
    i *= ev.scale;
    $('#element_id').css("width",i+"px");
});

这个例子的 HTML

<div style="width:300px;height:300px;overflow:hidden">
<img width="300" id="element_id" src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" />

于 2012-11-13T11:40:37.580 回答
0

我通过将 TouchStart 事件中的 X 和 Y 坐标存储在全局变量中并在 pinchopen/close 事件中使用它来解决这个问题。

window.PageX = 0;
window.PageY = 0;

$('#mainContainer').bind('swipemove', function(event){ event.preventDefault();});
$('#mainContainer').bind('pinchopen pinchclose', function(el, ev) {
    if (ev.description === 'pinch:+1:open') {
       alert('pinchopen' + window.PageX);
    } else if (ev.description === 'pinch:-1:close') {
       alert('pinchclose' + window.PageY);
    }
});

document.getElementById('mainContainer').addEventListener('touchstart', function(e) {
    window.PageX = e.changedTouches[0].pageX;
    window.PageY = e.changedTouches[0].pageY;
}, false);
于 2012-04-06T06:09:08.940 回答