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');
   }
});

フィギュアがタッチされたら、タッチスタートイベントを使用してpageXとpageYを追跡し、それらの座標をピンチョオープン/クローズイベントで使用しようとしましたが、これらのイベントが同時に呼び出されないことがあります。他に方法はありますか？

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 座標をグローバル変数に格納し、それを pinchoopen/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 に答える