Icontem

File: generate_matrix.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Tmatrix  >  generate_matrix.html  >  Download  
File: generate_matrix.html
Role: Example script
Content type: text/plain
Description: Generate matrix example
Class: Tmatrix
Manipulate matrices to transform Web page elements
Author: By
Last change:
Date: 8 years ago
Size: 2,544 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Tmatrix class generates transformation matrix from provided transformations. 
 * It can return matrix object, apply absolute or relative transformation to canvas context 
 * or return CSS matrix filter string for IE browsers.
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Calculate-transformation-matrix
**************************************************************/
-->
<html>
<head>
</head>
<body>
<p>Transformations:</p>
<table border='1' cellpadding='5' id='transforms'>
<tr>
	<td>Rotation:</td>
	<td colspan='2'><input type='text' size='13' id='rotate' value='0'/></td>
</tr>
<tr>
	<td>Scale:</td>
	<td><input type='text' size='4' id='scaleX' value='1'/></td>
	<td><input type='text' size='4' id='scaleY' value='1'/></td>
</tr>
<tr>
	<td>Translate:</td>
	<td><input type='text' size='4' id='translateX' value='0'/></td>
	<td><input type='text' size='4' id='translateY' value='0'/></td>
</tr>
<tr>
	<td>Skew:</td>
	<td><input type='text' size='4' id='skewX' value='0'/></td>
	<td><input type='text' size='4' id='skewY' value='0'/></td>
</tr>
</table>
<p><input type='button' value='Generate matrix' onclick='generate()'/></p>
<p>Result transformation matrix:</p>
<table border='1' cellpadding='5' id='output'>
<tr>
	<td>m11:</td><td><input type='text' id='m11'/></td>
	<td>m12:</td><td><input type='text' id='m12'/></td>
</tr>
<tr>
	<td>m21:</td><td><input type='text' id='m21'/></td>
	<td>m22:</td><td><input type='text' id='m22'/></td>
</tr>
<tr>
	<td>dx:</td><td><input type='text' id='dx'/></td>
	<td>dy:</td><td><input type='text' id='dy'/></td>
</tr>
</table>
<script type="text/javascript" src="./tmatrix.packed.js" ></script>
<script type="text/javascript">
function generate(){
	//create instance
	var t = new tmatrix();
	var inps = document.getElementById("transforms").getElementsByTagName("input");
	var l = inps.length;
	for(var i = 0; i < l; i++)
	{
		var inp = inps[i];
		t[inp.id](inp.value);
	}
	var m = t.getMatrix();
	var outs = document.getElementById("output").getElementsByTagName("input");
	var l = outs.length;
	for(var i = 0; i < l; i++)
	{
		var out = outs[i];
		out.value = m[out.id];
	}
}
</script>
</body>
</html>