htdoc/htdocs/ipad/function9.js

function FingerComponent(obj_list,sync_obj){
	this.TRANSFORM_PREFIXED = this.getVendorPrefixed(["transform", "msTransform", "MozTransform", "webkitTransform", "OTransform"]);
	
	this.boxList = [];
	this.flag=false;
	var temp = this.assignBox(sync_obj);
	this.boxList.push(temp);
	
	for(var i = 0,objId;objId=obj_list[i];i++){
		temp = this.assignBox(objId);
		this.boxList.push(temp);
		this.listen(temp);
	}
	var _this=this;
	var loop=function(){

		for(var i=0; i<_this.boxList.length; i++) {
			_this.transform(_this.boxList[i]);
		}
		requestAnimationFrame(loop);
	};
	loop();


}
FingerComponent.prototype.checkRes=function() {
	var arrow=this.boxList[0];
	check.style.display = "inline";
	blank.style.display = "inline";
	
	//check.style.top = -200;
	//check.style.left = 580;
	
	var degx=Math.abs(arrow.degx);
	var degy=Math.abs(arrow.degy);
	var scale=Math.abs(arrow.scale)===0.9;
    var x=degx>=120 && degx<=240;
	var y=degy>=120 && degy<=240;
    var z=Math.abs(arrow.degx,arrow.degy);
	saveRecord(250);
	saveRecordr(0,degx,degy,z,scale);
	return x && y && scale;
}
FingerComponent.prototype.assignBox=function(picS) {
	var pic = document.getElementById(picS);
	//console.log(pic);
	return {
		element: pic,
		isUpdated: true,
		x: 0,//Math.random() * (window.innerWidth - 200),
		y: 0,//Math.random() * (window.innerHeight - 300),
		rad: 0,//Math.random()*Math.PI * 2,
		scale: 0.9,
		rafId: 0,
		zIndex: 1000,
		degx: 0,
		degy: 0
	}
}
FingerComponent.prototype.resetFlag = function (){
	this.flag = false;
};
FingerComponent.prototype.listen=function(pBoxO) {
	var finger = new Fingers(pBoxO.element);
	var flag=false;
	var _this=this;
	/*finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {
			if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
				//pBoxO.x += pFingers[0].getDeltaX();
				//pBoxO.y += pFingers[0].getDeltaY();
				
				var x=pFingers[0].getDeltaX();
				var y=pFingers[0].getDeltaY();
				//console.log("X:"+x+" Y:"+y);
				var temp=pBoxO.rad+y/3;
				if(temp>=-73 && temp<=17)
					pBoxO.rad = temp;//(y/100);	
				pBoxO.isUpdated = true;
			}
			else if(pEventType === Fingers.Gesture.EVENT_TYPE.start) {
				//topZIndex++;
				//pBoxO.zIndex = topZIndex;
				//pBoxO.isUpdated = true;
			}
	});*/

	finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {              
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			for(var i=0,obj; obj=_this.boxList[i]; i++) {
				//obj.scale +=0.05;
				obj.degx += pFingers[0].getDeltaY() ;
				if(obj.degx>=360)
					obj.degx-=360;
				else if(obj.degx<=-360)
					obj.degx+=360;
				obj.degy += pFingers[0].getDeltaX() ;
				if(obj.degy>=360)
					obj.degy-=360;
				else if(obj.degy<=-360)
					obj.degy+=360;
				//pBoxO.isUpdated = true;

				//obj.rad += pData.deltaRotation;
				
				obj.isUpdated = true;
				saveRecordr(0,obj.degx,obj.degy,0,0);
			}
			//pBoxO.rad += pData.deltaRotation;
			//pBoxO.scale = Math.max(0.5, Math.min(2, pBoxO.scale * pData.deltaScale));
			//pBoxO.isUpdated = true;
		}
		
	});
	finger.addGesture(Fingers.gesture.Transform, null).addHandler(function(pEventType, pData, pFingers) {              
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			for(var i=0,obj; obj=_this.boxList[i]; i++) {
				//obj.rad += pData.deltaRotation;
				obj.scale = Math.max(0.5, Math.min(2, obj.scale * pData.deltaScale));
				obj.isUpdated = true;
				if (obj.scale>1)
				{
				saveRecordr(301,0,0,0,obj.scale);
				}
				if(obj.scale < 1)
				{
				saveRecordr(302,0,0,0,obj.scale);
				}
			}
		}
	});
	pBoxO.fingers = finger ;
}
FingerComponent.prototype.transform=function(pBoxO) {
	
	if(pBoxO.isUpdated) {
		pBoxO.element.style[this.TRANSFORM_PREFIXED] = "translateZ(0) " +
						"translate(" + pBoxO.x + "px, " + pBoxO.y + "px) " +
						"scale(" + pBoxO.scale + ") " +//+ "rotate3d(0,0,0," + pBoxO.rad + "rad) ";
						"rotate(" + pBoxO.rad + "rad) "+
						"rotateY("+pBoxO.degy+"deg)" +
						"rotateX("+pBoxO.degx+"deg)";
		
		pBoxO.element.style.zIndex = pBoxO.zIndex;
		pBoxO.isUpdated = false;
	}
}
FingerComponent.prototype.loop=function(){
	var x=this.loop();
	for(var i=0; i<this.boxList.length; i++) {
		this.transform(this.boxList[i]);
	}
  requestAnimationFrame(x);
}
FingerComponent.prototype.getVendorPrefixed=function(pArrayOfPrefixes) {
	var result = null;
	for (var i=0; i<pArrayOfPrefixes.length; i++) {
		if (document.body.style[pArrayOfPrefixes[i]] !== undefined) {
			result = pArrayOfPrefixes[i];
			break;
		}
	}
	return result;
}

$(document).ready(function(){
	var canvas_offset_x = $("#canvas_preview").offset().left;
	var canvas_offset_y = $("#canvas_preview").offset().top;
	var canvas = document.getElementById('canvas_preview');
	var ctx = canvas.getContext('2d');
	var canvas2 = document.getElementById('canvas');
	var ctx2 = canvas2.getContext('2d');
	ctx2.lineWidth="2";
	var startX,startY;
	$("#blank").removeClass("hidden");
	canvasPosition();

	function canvasPosition(){
		var c = $("#canvas").offset();
		$("#canvas_preview").offset({
			top: c.top,
			left: c.left
		});
		$("#blank").offset({
			top: c.top,
			left: c.left
		});
	}

	function mouseMove(evt) {
		try{
			var px = evt.currentP.x;
			var py = evt.currentP.y;
		}
		catch(err){

		}
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.beginPath();
		ctx.moveTo(startX, startY);
		ctx.lineTo(px-canvas_offset_x, py-canvas_offset_y);
		ctx.stroke();
		saveRecordr(0,startX,startY,px-canvas_offset_x,py-canvas_offset_y);
	}

	var finger = new Fingers(canvas);
	finger.addGesture(Fingers.gesture.Raw, null).addHandler(function(pEventType, pFinger) {
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			mouseMove(pFinger);
		}
		else if(pEventType === Fingers.Gesture.EVENT_TYPE.start) {
			mouseDown(pFinger);
		}
		else if(pEventType === Fingers.Gesture.EVENT_TYPE.end) {
			mouseUp(pFinger);
		}
	});

	function mouseDown(evt){
		canvas_offset_x = $("#canvas_preview").offset().left;
		canvas_offset_y = $("#canvas_preview").offset().top;
		ctx.beginPath();
		var px = evt.currentP.x;
		var py = evt.currentP.y;
		startX = px-canvas_offset_x;
		startY = py-canvas_offset_y;
		ctx.moveTo(startX, startY);
	}
	function mouseUp(evt){
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx2.beginPath();
		ctx2.moveTo(startX, startY);
		var px = evt.currentP.x;
		var py = evt.currentP.y;
		endX = px-canvas_offset_x;
		endY = py-canvas_offset_y;
		ctx2.lineTo(endX, endY);
		ctx2.stroke();
		
	}

	document.getElementById('reset').addEventListener('click', function() {
		ctx2.clearRect(0, 0, canvas.width, canvas.height);
	}, false);
});
function changeColor(color){
	canvas = document.getElementById('canvas_preview');
	ctx = canvas.getContext('2d');
	canvas2 = document.getElementById('canvas');
	ctx2 = canvas2.getContext('2d');
	ctx.strokeStyle = color;
	ctx2.strokeStyle = color;
}