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: 12 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>