ozero/gist:1009007

## 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>