Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Calculate transformation matrix

Tmatrix class generates transformation matrix from provided transformations. It can return matrix object, apply absolute or relative transformation to canvas context, return CSS matrix filter string for IE browsers or apply crossbrowser transformation to HTML element.

Package contains tmatrix.js, tmatrix.packed.js (packed javascript) and four example files: ie_fallback.html, canvas_example.html, generate_matrix.html and css_transform.html to demonstrate class functionality.

Contents

Download

Example codes

<html>
<head>
</head>
<body>
<style>
#transformed
{
    margin-top: 200px;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    
    //some transformations
    /*IE9*/
    -ms-transform: skew(-25deg) translate(100px) rotate(20deg);
    /*FireFox*/
    -moz-transform: skew(-25deg) translate(100px) rotate(20deg);
    /*Safari and Chrome*/
    -webkit-transform: skew(-25deg) translate(100px) rotate(20deg);
    /*Opera*/
    -o-transform: skew(-25deg) translate(100px) rotate(20deg);
    /*CSS3 standard*/
    transform: skew(-25deg) translate(100px) rotate(20deg); 
    /*************
    * None of them will work in < IE9
    *************/
}
</style>
<div id='transformed'>
Some text here
</div>
<script type="text/javascript" src="./tmatrix.js" ></script>
<script type="text/javascript">
//create instance
var t = new tmatrix();
//apply same transformations
//skew
t.skewX(-25);
//translate
t.translate(100, 100);
//rotate
t.rotate(20);
//get IE CSS transformation matrix
document.getElementById("transformed").style.filter = t.getIE();
/*************
* Now it's somewhat < IE9 compatible
*************/
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew tmatrix();
DescriptionCreate tmatrix instance

Rotate

Back to method list

Method namerotate(deg)
DescriptionPerform rotate transformation
Input parametersint deg - by how many degrees to rotate

Translate

Back to method list

Method nametranslate(x,y)
DescriptionPerform translate transformation
Input parameters

int x - new 0 coordinate on x axis

int y - new 0 coordinate on y axis

Translate X

Back to method list

Method nametranslateX(x)
DescriptionPerform translate transformation for x axis
Input parametersint x - new 0 coordinate on x axis

Translate Y

Back to method list

Method nametranslateY(y)
DescriptionPerform translate transformation for y axis
Input parametersint y - new 0 coordinate on y axis

Scale

Back to method list

Method namescale(xRatio,yRatio)
DescriptionPerform scale transformation
Input parameters

int xRatio - new ratio for units on x axis

int yRatio - new ratio for units on y axis

Scale X

Back to method list

Method namescaleX(xRatio)
DescriptionPerform scale transformation for units on x axis
Input parametersint xRatio - new ratio for units on x axis<

Scale Y

Back to method list

Method namescaleY(yRatio)
DescriptionPerform scale transformation for units on y axis
Input parametersint yRatio - new ratio for units on y axis

Skew

Back to method list

Method nameskew(xAngle,yAngle)
DescriptionPerform skew transformation
Input parameters

int xAngle - angle in degrees to skew on x axis

int yAngle - angle in degrees to skew on y axis

Skew X

Back to method list

Method nameskewX(xAngle)
DescriptionPerform skew transformation for x axis
Input parametersint xAngle - angle in degrees to skew on x axis

Skew Y

Back to method list

Method nameskewY(yAngle)
DescriptionPerform skew transformation for y axis
Input parametersint yAngle - angle in degrees to skew on y axis

Matrix

Back to method list

Method namematrix(m11,m12,m21,m22,dx,dy)
DescriptionProvide existing transformation matrix
Input parametersTransformation matrix elements

Get transformation matrix

Back to method list

Method namegetMatrix()
DescriptionGet transformation matrix with all applied transformations
ReturnsObject with m11,m12,m21,m22,dx and dy properties

CSS transformation

Back to method list

Method nameCSStransform(element)
DescriptionApply crossbrowser CSS transformation to provided element
Input parametersHTML element - element to which apply transformations

Get IE matrix

Back to method list

Method namegetIE()
DescriptionGet CSS string with transformation matrix
Output exampleprogid:DXImageTransform.Microsoft.Matrix(M11='1', M12='0', M21='0', M22='1', Dx='0', Dy='0', sizingMethod='auto expand',);
Usage exampledocument.getElementById('transformed').style.filter = t.getIE();

Canvas transform - relative

Back to method list

Method nametransformCanvas(ctx)
DescriptionApply transformation matrix to canvas context
Input parametersobject ctx - canvas context

Canvas transform - absolute

Back to method list

Method namesetTransformCanvas(ctx)
DescriptionReset canvas transformation and apply transformation matrix
Input parametersobject ctx - canvas context

Reset transformation matrix

Back to method list

Method namereset()
DescriptionReset transformation matrix to unit matrix

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus