ozero · June 5, 2011 14:43
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="resources/css-debug/sencha-touch.css" type="text/css" />
  <script type="text/javascript" src="resources/sencha-touch-debug.js"></script>
  <script>


 //global vals
 loopCount=0;


 //classes

 /*
 * pinch in/out state class
 * @param : from(x.y), to(x,y), rect_base
 */
 var Pinch = function(a,b,p,q,rect_from){
 	//get pinch coords origin
 	this.from = {coords:[[0,0],[0,0]],len:0};
 	this.from.coords = [[a,b],[p,q]];
 	this.from.len    = Math.sqrt((a-p)*(a-p) + (b-q)*(b-q));
 	this.to = {coords:[[0,0],[0,0]],len:0};
 	this.origin = [parseInt((a+p)/2),parseInt((b+q)/2)];
 	this.zoom=1;
 	this.rect_from=rect_from;
 	
 	//on transform: return transformed rect /  touch[0]{x,y}, touch[1]{x,y}
 	this.pinchto = function(c,d,r,s){
 		//get pinch coords
 		this.to.coords = [[c,d],[r,s]];
 		this.to.len    = Math.sqrt((c-r)*(c-r) + (d-s)*(d-s));
 		//get zoom ratio
 		this.zoom = this.to.len/this.from.len;
 		//get transformed rect
 		var rect_to = new Rect(0,0,0,0,"");
 		for(i=0;i<4;i++){
 			rect_to.coords[i][0] = this.rect_from.coords[i][0]
 				 - (this.origin[0] - this.rect_from.coords[i][0]) * this.zoom;
 			rect_to.coords[i][1] = this.rect_from.coords[i][1]
 				 - (this.origin[1] - this.rect_from.coords[i][1]) * this.zoom;
 		}
 		rect_to.dim.w = Math.abs(rect_to.coords[1][0]-rect_to.coords[0][0]);
 		rect_to.dim.h = Math.abs(rect_to.coords[3][1]-rect_to.coords[0][1]);
 		return rect_to;
 	}
 	return this;
 };

 /*
 * rect object class
 * coords(x,y),dimetions(width,height)
 */
 var Rect = function(top,left,width,height,domid){
 	this.coords = [[0,0],[0,0],[0,0],[0,0]];
 	this.coords[0] = [left, top];
 	this.coords[1] = [left+width, top];
 	this.coords[2] = [left+width, top+height];
 	this.coords[3] = [left, top+height];
 	this.dim = {w:width, h:height};
 	this.domid = domid;
 	
 	return this;
 };



 /////////////////////////////////////////////////////////////////////////////////////

 Ext.setup({
 	icon: 'icon.png',
 	glossOnIcon: false,
 	tabletStartupScreen: 'tablet_startup.png',
 	phoneStartupScreen: 'phone_startup.png',
 	onReady: function() {

 		rects = {
 			base:   new Rect(230,230,200,150,'r_base'),//base
 			marker: new Rect(100,100,300,200,'r_marker'),//scale center marker
 			trns:   new Rect(100,100,300,200,'r_trns'),//transformed
 			trns2x: new Rect(100,100,300,200,'r_trns2x'),//transformed 2x
 		};

 		p = new Pinch(200,200,400,400, rects.base);
 		Ext.get("r_base").setBox(
 			rects.base.coords[0][0], rects.base.coords[0][1], 
 				rects.base.dim.w, rects.base.dim.h
 		);

 		eventLoop();
 		
 	}
 });


 function eventLoop(){
 	var zoomRatio = 30 * (Math.sin(loopCount * (Math.PI / 180))  + 1 );
 	rect_tmp = p.pinchto( 200-zoomRatio,200-zoomRatio,400+zoomRatio,400+zoomRatio );
 	Ext.get(rects.trns.domid).setBox(
 		rect_tmp.coords[0][0], rect_tmp.coords[0][1], rect_tmp.dim.w, rect_tmp.dim.h
 	);
 	Ext.get("r_marker").setBox(
 		p.origin[0]-10, p.origin[1]-10, 20, 20
 	);
 	
 	//console.log(zoomRatio);
 	loopCount++;
 	if(loopCount>360){loopCount=0;}
 	setTimeout("eventLoop()", 16);
 }

 </script>
 <style>
 body{
 	background-color: #eee;
 }

 .demo *{position:absolute;width:10px;height:10px;font-size:8px;}
 #r_base{border:1px dashed #f00;}
 #r_marker{border:1px dashed #0f0;}
 #r_trns{border:1px dashed #00f;}
 #r_trns2x{border:1px dashed #666;}

 </style>
 </head>

 <body>

 <div class="demo">
 <p id="r_base">base</p>
 </div>

 <div class="demo">
 <p id="r_marker">marker</p>
 </div>

 <div class="demo">
 <p id="r_trns">trns</p>
 </div>

 <div class="demo">
 <p id="r_trns2x">trns2x</p>
 </div>


 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="resources/css-debug/sencha-touch.css" type="text/css" />
	<script type="text/javascript" src="resources/sencha-touch-debug.js"></script>
	<script>


	//global vals
	loopCount=0;


	//classes

	/*
	* pinch in/out state class
	* @param : from(x.y), to(x,y), rect_base
	*/
	var Pinch = function(a,b,p,q,rect_from){
	//get pinch coords origin
	this.from = {coords:[[0,0],[0,0]],len:0};
	this.from.coords = [[a,b],[p,q]];
	this.from.len = Math.sqrt((a-p)(a-p) + (b-q)(b-q));
	this.to = {coords:[[0,0],[0,0]],len:0};
	this.origin = [parseInt((a+p)/2),parseInt((b+q)/2)];
	this.zoom=1;
	this.rect_from=rect_from;

	//on transform: return transformed rect / touch[0]{x,y}, touch[1]{x,y}
	this.pinchto = function(c,d,r,s){
	//get pinch coords
	this.to.coords = [[c,d],[r,s]];
	this.to.len = Math.sqrt((c-r)(c-r) + (d-s)(d-s));
	//get zoom ratio
	this.zoom = this.to.len/this.from.len;
	//get transformed rect
	var rect_to = new Rect(0,0,0,0,"");
	for(i=0;i<4;i++){
	rect_to.coords[i][0] = this.rect_from.coords[i][0]
	- (this.origin[0] - this.rect_from.coords[i][0]) * this.zoom;
	rect_to.coords[i][1] = this.rect_from.coords[i][1]
	- (this.origin[1] - this.rect_from.coords[i][1]) * this.zoom;
	}
	rect_to.dim.w = Math.abs(rect_to.coords[1][0]-rect_to.coords[0][0]);
	rect_to.dim.h = Math.abs(rect_to.coords[3][1]-rect_to.coords[0][1]);
	return rect_to;
	}
	return this;
	};

	/*
	* rect object class
	* coords(x,y),dimetions(width,height)
	*/
	var Rect = function(top,left,width,height,domid){
	this.coords = [[0,0],[0,0],[0,0],[0,0]];
	this.coords[0] = [left, top];
	this.coords[1] = [left+width, top];
	this.coords[2] = [left+width, top+height];
	this.coords[3] = [left, top+height];
	this.dim = {w:width, h:height};
	this.domid = domid;

	return this;
	};



	/////////////////////////////////////////////////////////////////////////////////////

	Ext.setup({
	icon: 'icon.png',
	glossOnIcon: false,
	tabletStartupScreen: 'tablet_startup.png',
	phoneStartupScreen: 'phone_startup.png',
	onReady: function() {

	rects = {
	base: new Rect(230,230,200,150,'r_base'),//base
	marker: new Rect(100,100,300,200,'r_marker'),//scale center marker
	trns: new Rect(100,100,300,200,'r_trns'),//transformed
	trns2x: new Rect(100,100,300,200,'r_trns2x'),//transformed 2x
	};

	p = new Pinch(200,200,400,400, rects.base);
	Ext.get("r_base").setBox(
	rects.base.coords[0][0], rects.base.coords[0][1],
	rects.base.dim.w, rects.base.dim.h
	);

	eventLoop();

	}
	});


	function eventLoop(){
	var zoomRatio = 30 * (Math.sin(loopCount * (Math.PI / 180)) + 1 );
	rect_tmp = p.pinchto( 200-zoomRatio,200-zoomRatio,400+zoomRatio,400+zoomRatio );
	Ext.get(rects.trns.domid).setBox(
	rect_tmp.coords[0][0], rect_tmp.coords[0][1], rect_tmp.dim.w, rect_tmp.dim.h
	);
	Ext.get("r_marker").setBox(
	p.origin[0]-10, p.origin[1]-10, 20, 20
	);

	//console.log(zoomRatio);
	loopCount++;
	if(loopCount>360){loopCount=0;}
	setTimeout("eventLoop()", 16);
	}

	</script>
	<style>
	body{
	background-color: #eee;
	}

	.demo *{position:absolute;width:10px;height:10px;font-size:8px;}
	#r_base{border:1px dashed #f00;}
	#r_marker{border:1px dashed #0f0;}
	#r_trns{border:1px dashed #00f;}
	#r_trns2x{border:1px dashed #666;}

	</style>
	</head>

	<body>

	<div class="demo">
	<p id="r_base">base</p>
	</div>

	<div class="demo">
	<p id="r_marker">marker</p>
	</div>

	<div class="demo">
	<p id="r_trns">trns</p>
	</div>

	<div class="demo">
	<p id="r_trns2x">trns2x</p>
	</div>


	</div>
	</body>
	</html>