Phóng to và xoay bằng cách sử dụng gesturechange và gestureend

Question

Tôi đang làm việc trên một số sự kiện và cử chỉ cảm ứng, tôi muốn có thể phóng to và xoay đối tượng, tôi đã thực hiện thành công nó có thể kéo được nhưng cử chỉ đang gây rắc rối cho tôi. Các cử chỉ đang hoạt động nhưng chúng bị thay đổi, bất cứ khi nào bạn véo nó để phóng to hoặc thu nhỏ hoặc cố gắng xoay nó, nó nhảy từ ngón tay đến ngón tay.

Đây là mã của tôi để tham khảo.

var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("gesturechange gestureend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'gesturechange'){ 
    e.preventDefault(); 
    $(this).css("width", parseFloat(width) * orig.scale); 
    $(this).css("height", parseFloat(height) * orig.scale); 
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
}else if(e.type == 'gestureend'){ 
    a.w[ids] = parseFloat(width) * orig.scale; 
    a.h[ids] = parseFloat(height) * orig.scale; 
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
} 
}); 

Có cách nào để làm mịn và ngăn không cho nhảy từ ngón tay hoặc cách tiếp cận tôi đã làm sai. Cần một số mẹo và thủ thuật và giúp

tìm thấy một giải pháp

Có vẻ như sự kiện liên lạc của tôi cho kéo can thiệp với những cử chỉ thats tại sao nó cứ nhảy từ ngón tay để ngón tay, các con đường xung quanh này là không sử dụng cử chỉ thay vì đếm các điểm chạm trên đối tượng và sử dụng chạm bắt đầu, kết thúc và thay vào đó thay vào đó.

Đây là mã

var touches = 0; var width = 300; var height = 300; var rotation = 0; 
$('.dynamic').live("touchstart touchmove touchend", function(e){ 
var orig = e.originalEvent; 

if(e.type == 'touchstart'){ 
if(orig.touches.length == 1){ 
    touches = 1; 
}else if(orig.touches.length == 2){ 
    touches = 2; 
} 
}else if(e.type == 'touchmove'){ 
e.preventDefault(); 
if(touches == 2){ 
     $(this).css("width", parseFloat(width) * orig.scale); 
     $(this).css("height", parseFloat(height) * orig.scale); 
     $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)"); 
} 
}else if(e.type == 'touchend'){ 
    if(touches == 2){ 
     a.w[ids] = parseFloat(width) * orig.scale; 
     a.h[ids] = parseFloat(height) * orig.scale; 
     a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360; 
    } 
} 
}); 

Answer 1

làm việc Giải pháp của bạn, nhưng nó không phải là thanh lịch nhất: bạn vẫn có thể sử dụng miếng đầu tiên của mã và dựa vào gesture sự kiện.
Tất cả những gì bạn phải làm là đảm bảo rằng trình xử lý sự kiện touch không ảnh hưởng đến các số gesture của bạn.
Chỉ cần thêm này vào xử lý touch sự kiện:

$('.dynamic').live("touchstart touchmove touchend", function(e){ 
    if(e.originalEvent.touches.length > 1) 
     return; 
    /* your touch code here */ 
}); 

và sau đó sử dụng mã cử chỉ hiện tại của bạn:

$('.dynamic').live("gesturechange gestureend", function(e){ 
    /* your gesture code here */ 
}); 

này nên làm việc vì các sự kiện cử chỉ được kích hoạt chỉ có hai hoặc nhiều ngón tay chạm vào màn hình và không có mã nào khác thực thi khi điều này xảy ra, bởi vì trình xử lý sự kiện chạm chỉ phản hồi với một lần chạm duy nhất.

Answer 2

Có thể jquery không phải là tốt nhất cho nhiệm vụ này. Bạn có thể nghĩ đến việc sử dụng sencha touch. Nó đã làm những gì bạn muốn rất độc đáo. Hãy xem demos. Tùy thuộc vào những gì bạn muốn làm jQuery Mobile cũng sẽ là một lựa chọn tốt.