我正在处理一些触摸事件和手势,我希望能够缩放和旋转对象,我已成功使其可拖动,但手势给我带来了麻烦。手势正在工作,但它们不稳定,每当您捏它以放大或缩小或尝试旋转它时,它都会从一个手指跳到另一个手指。
这是我的代码供参考。
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;
}
});
有没有办法让它变得平滑,并防止它从手指上跳下来,或者我采取的方法是错误的。需要一些提示和技巧和帮助
找到了解决办法
似乎我的拖动触摸事件干扰了手势,这就是为什么它一直从一个手指跳到另一个手指,解决这个问题的方法是不使用手势而是计算对象上的触摸并使用触摸开始、结束和更改。
这是代码
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;
}
}
});