<!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>
|
Download
