我正在处理一些触摸事件和手势,我希望能够缩放和旋转对象,我已经成功地使其可拖动,但手势仍然让我感到困扰。手势是在起作用,但它们是不流畅的,每当你用手指捏合变焦或尝试旋转时,它会从一个手指跳到另一个手指。
以下是我的参考代码。
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;
}
});
有没有什么方法可以使它更加平滑,并防止它从手指上跳动,或者我采取的方法错了。需要一些技巧和帮助。找到解决方案。
似乎我的拖动触摸事件干扰了手势,这就是为什么它一直从一个手指跳到另一个手指的原因,解决方法是不使用手势,而是计算对象上的触摸次数,使用touch start、end和change代替手势。
这是代码:
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;
}
}
});