使用手势更改和手势结束来缩放和旋转Javascript
|
我正在处理一些触摸事件和手势，我希望能够缩放和旋转对象，我已经成功地使其变为可拖动状态，但是手势给我带来了麻烦。这些手势虽然有效，但它们比较不稳定，每当您捏住它以放大或缩小或尝试旋转它时，它就会从一个手指跳到另一个手指。
这是我的代码供参考。
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;
}
}
});
没有找到相关结果
已邀请:
2 个回复
拈吉勉犬姆
事件处理程序不会干扰您的事件处理程序。 只需将其添加到事件处理程序中即可：$(\'.dynamic\').live(\"touchstart touchmove touchend\", function(e){ if(e.originalEvent.touches.length > 1) return; /* your touch code here */ });$(\'.dynamic\').live(\"gesturechange gestureend\", function(e){ /* your gesture code here */ });钾涎净介