移動端多指操作一 ios篇

說在前面

移動端常用的事件上篇文章已講，這篇文章講點花的，多指操作（ios篇）

ios 多指操作

第一步 清除默認事件

 // 清除默認事件 否則會選取元素
 document.addEventListener("touchstart",(e)=>{
     var e = e || window.event;
         e.preventDefault();
 })

gesturestart 事件

 var con = document.getElementById("con");
 // 手指觸摸屏幕 屏幕上有兩個或者兩個以上的手指
 con.addEventListener("gesturestart",(e)=>{
      con.innerHTML = "兩個手指";
  })

gesturechange 事件

 //手指觸碰元素，屏幕上有兩個或兩個以上的手指，位置在發生移動
 con.addEventListener('gesturechange', function(e){
      con.innerHTML = "移動";
  });

gestureend 事件

 //手指離開事件
 con.addEventListener('gestureend', function(){
   		con.innerHTML = "手指離開";
 });

多指操作應用實例

封裝一個cssTransform做一些花式操作

function cssTransform(element, attr, val){
//下面分爲取值和賦值階段，如果val不存在說明是取值的，如果val存在，說明是賦值階段
//取值階段
	if(!element.transform){
		element.transform = {};
	}	
	if(typeof val === "undefined"){ 
//取值階段，又要分爲，該值已經有了，和初始化該值階段
		if(typeof element.transform[attr] === "undefined"){
			switch(attr){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					element.transform[attr] = 100;
					break;
				default:
					element.transform[attr] = 0;	
			}
		} 
//取值完畢，返回該值
		return element.transform[attr];
	} else {
//下面爲賦值階段
		element.transform[attr] = val;
		var transformVal  = "";
//因爲transform對象中可能不止一個屬性，所以要對其進行遍歷
 
		for(var s in element.transform){
			switch(s){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					transformVal += " " + s + "("+(element.transform[s]/100)+")";
					break;
				case "rotate":
				case "rotateX":
				case "rotateY":
				case "rotateZ":
				case "skewX":
				case "skewY":
					transformVal += " " + s + "("+element.transform[s]+"deg)";
					break;
				default:
					transformVal += " " + s + "("+element.transform[s]+"px)";				
			}
		}
		element.style.WebkitTransform = element.style.transform = transformVal;
	}

多指操作實現旋轉: 初始值+差值

var con= document.getElementById('con');
var start = 0;
oBox.addEventListener('gesturestart', function(e){
	start = cssTransform(con, 'rotate');
}, false);
oBox.addEventListener('gesturechange', function(e){
	var disR = e.rotation;
	cssTransform(con, 'rotate', start + disR);
}, false);

多指操作實現縮放: 初始值+差值

var start = 0;
// 消除縮放時的殘影
cssTransform(con, 'translateZ', 0);
con.addEventListener('gesturestart', function(e){
	start = cssTransform(con, 'scale');
}, false);
con.addEventListener('gesturechange', function(e){
	var disS = e.scale;
	cssTransform(con, 'scale', start*disS);
}, false);