filter - Matrix()

	JavaScript Programmer's Reference
Prev	Home	Up		Next

Availability:

JScript - 5.5

Internet Explorer - 5.5

Object properties: Enabled, M11, M12, M21, M22, Dx, Dy, SizingMethod, FilterType

Supported by objects: A, ACRONYM, ADDRESS, B, BDO, BIG BLOCKQUOTE, body, BUTTON, CAPTION, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET< Hn, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

Matrix transformation of images provides the ability to do free rotation to any angle if you are prepared to do the trigonometrical maths.

This matrix transformation provides the following possibilities:

Scaling
Rotation
Flipping

The matrix transformations are based on a 2x2 matrix with an additional linear vector.

The following properties are supported:

The Enabled property can be set to true or false to control whether the Matrix() filter is active or not.
The M11, M12, M21 and M22 properties contain the four values that comprise the matrix. You can define values in each one of them on its own or you can perform more complex transforms by defining several at once.
The Dx and Dy properties take floating point values and are used to move the resulting filtered output along a linear vector. This helps to simplify the transformation matrix and allows it to be implanted as a 2x2 matrix instead of a 2x3 or 3x3 matrix.
The FilterType property is used to select a method for deriving the resulting filter output. This is necessary because when transforming objects with a matrix, you need to interpolate pixel values to fill in gaps. This operator can be defined as a bilinear or nearest neighbor interpolation function. The bilinear interpolation is better at the expense of needing more compute power. The nearest neighbor interpolation technique may be more useful for animated effects.
The sizingMethod property determines how the results are displayed. They can either be clipped to fit the container or the container can be resized to accommodate the new size of the transformed output. The values are "clip to original" or "auto expand".

The following simple operations can be applied:

Flip horizontal
Flip vertical
Resize
Rotate

A horizontal flip can be accomplished with this code fragment:

   myFilter.M11 -= myFilter.M11;

   myFilter.M12 -= myFilter.M12;

A vertical flip can be accomplished with this code fragment:

   myFilter.M21 -= myFilter.M21;

   myFilter.M22 -= myFilter.M22;

A resize of the whole image can be accomplished like this:

   myFilter.M11 *= aScaleFactor;

   myFilter.M12 *= aScaleFactor;

   myFilter.M21 *= aScaleFactor;

   myFilter.M22 *= aScaleFactor;

A horizontal stretch can be done like this:

   myFilter.M11 *= aScaleFactor;

   myFilter.M12 *= aScaleFactor;

And a vertical stretch like this:

   myFilter.M21 *= aScaleFactor;

   myFilter.M22 *= aScaleFactor;

A rotation is a little more complex:

   deg2radians = Math.PI * 2 / 360;

   rad         = deg * deg2radians;

   costheta    = Math.cos(rad);

   sintheta    = Math.sin(rad);

   

   myFilter.M11 = costheta;

   myFilter.M12 = -sintheta;

   myFilter.M21 = sintheta;

   myFilter.M22 = -costheta;

The example demonstrates these transformations individually. Strange shearing effects can be achieved by modifying the coefficients of the rotation matrix. These introduce scaling artifacts which might be useful when fitting an image into a space, perhaps for designing some VRML like projected surfaces without using VRML itself.

Example code:

   <HTML>

   <HEAD>

   <STYLE>

   .aFilter

   {

      filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand');

      position:absolute;

   }

   </STYLE>

   </HEAD>

   <BODY>

   <TABLE BORDER=1>

   <TR HEIGHT=160><TD>Normal--&gt;</TD><TD ALIGN=CENTER WIDTH=160>

   <IMG ID="NORMAL" SRC="./Logo150.gif">

   </TD></TR>

   <TR HEIGHT=160><TD>Flip H--&gt;</TD><TD ALIGN=CENTER>

   <IMG ID="FLIPH" CLASS="aFilter" SRC="./Logo150.gif">

   </TD></TR>

   <TR HEIGHT=160><TD>Flip V--&gt;</TD><TD>

   <IMG ID="FLIPV" CLASS="aFilter" SRC="./Logo150.gif">

   </TD></TR>

   <TR HEIGHT=160><TD>Scale--&gt;</TD><TD ALIGN=CENTER>

   <IMG ID="SCALE" CLASS="aFilter" SRC="./Logo150.gif">

   </TD></TR>

   <TR HEIGHT=160><TD>Scale--&gt;</TD><TD>

   <IMG ID="ROTOR" CLASS="aFilter" SRC="./Logo150.gif">

   </TD></TR>

   </TABLE>

   <SCRIPT>

   FLIPH.filters.item(0).M11 *= -1;

   FLIPH.filters.item(0).M12 *= -1;

   FLIPH.style.top = 30+160;

   FLIPH.style.left = 110;

   FLIPV.filters.item(0).M21 *= -1;

   FLIPV.filters.item(0).M22 *= -1;

   FLIPV.style.top = 30+(160*2);

   FLIPV.style.left = 110;

   SCALE.filters.item(0).M11 *= 0.5;

   SCALE.filters.item(0).M12 *= 0.5;

   SCALE.filters.item(0).M21 *= 0.5;

   SCALE.filters.item(0).M22 *= 0.5;

   SCALE.style.top = 70+(160*3);

   SCALE.style.left = 130;

   myDeg2Rad = Math.PI*2/360;

   myRadians = 30 * myDeg2Rad;

   myCosine  = Math.cos(myRadians);

   mySine    = Math.sin(myRadians);

   ROTOR.filters.item(0).M11 = myCosine;

   ROTOR.filters.item(0).M12 = -mySine;

   ROTOR.filters.item(0).M21 = mySine;

   ROTOR.filters.item(0).M22 = myCosine;

   ROTOR.style.top = 20+(160*4);

   ROTOR.style.left = 80;

   </SCRIPT>

   </BODY>

   </HTML>

See also: filter - BasicImage(), filter - FlipH(), filter - FlipV(), Filter object, style.filter

Property	JScript	IE	Notes
`Enabled`	5.5	5.5	-
`M11`	5.5	5.5	-
`M12`	5.5	5.5	-
`M21`	5.5	5.5	-
`M22`	5.5	5.5	-
`Dx`	5.5	5.5	-
`Dy`	5.5	5.5	-
`SizingMethod`	5.5	5.5	-
`FilterType`	5.5	5.5	-

Prev	Home	Next
filter - MaskFilter()	Up	filter - MotionBlur()
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions.

JavaScriptProgrammer'sReference

filter - Matrix() (Filter/visual)

Example code:

JavaScript
Programmer's
Reference