htdoc/htdocs_old/button/function11.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() {
	check.style.display = "inline";
	check.style.top = -400;
	check.style.left = 580;
	saveRecord(250);
	var arrow=this.boxList[0];
	var degx=Math.abs(arrow.degx);
	var degy=Math.abs(arrow.degy);
	var z=Math.abs(arrow.degx,arrow.degy);
	var scale=Math.abs(arrow.scale)>1;
    var x=degx>=120 && degx<=240;
	var y=degy>=120 && degy<=240;
	saveRecordr(0,degx,degy,z,arrow.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: 1,
		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;
			}
			//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;
			}
		}
	});
	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;
}
/*
function LineComponent(canvas_id,bg_id){
	this.lineColor = "";
	this.canvas = document.getElementById(canvas_id);
	this.context = canvas.getContext('2d');
	this.bg = document.getElementById(bg_id);
	this.clear();
	var _this=this;
	var finger = new Fingers(canvas);
	finger.addGesture(Fingers.gesture.Raw, null).addHandler(function(pEventType, pFinger) {
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			_this.moveLine(pFinger);
		}
		else if(pEventType === Fingers.Gesture.EVENT_TYPE.start) {
			_this.startLine(pFinger);
		}
		else if(pEventType === Fingers.Gesture.EVENT_TYPE.end) {
			_this.endLine(pFinger);
		}
	});
}
LineComponent.prototype.clear=function() {
	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
 
LineComponent.prototype.setColor=function(color) {
	this.lineColor=color;
}
LineComponent.prototype.startLine=function(pFinger) {
		
		this.context.beginPath();
		// a circle at the start
		//this.context.arc(pFinger.getX(), pFinger.getY(), 10, 0,2*Math.PI, false);
		this.context.fillStyle = this.lineColor;
		this.context.lineWidth = 7;
		this.context.lineCap="round";
		this.context.strokeStyle = this.lineColor;
		this.context.fill();
}

LineComponent.prototype.moveLine=function(pFinger) {
	var color = "";
	this.context.beginPath();
	this.context.moveTo(pFinger.previousP.x, pFinger.previousP.y);
	this.context.lineTo(pFinger.getX(), pFinger.getY());
	saveRecordr(0,pFinger.getX(),0,0,0);
	saveRecordr(0,0,pFinger.getY(),0,0);
	this.context.stroke();
}

LineComponent.prototype.endLine=function(pFinger) {
	//var color = "#000000";
	//this.context.fillRect(pFinger.getX()-10, pFinger.getY()-10, 20, 20);  // and a square at the end
}
*/
function saveRecord(code){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000));
}

function saveRecords(code,time){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&dragtime=" + time);
}

function saveRecordr(code,rotX,rotY,rotZ,rotS){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);
}

$(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;
}