filter - Matrix() (Filter/visual)

A means of applying sophisticated rotation, translate, and scaling effects to an image using matrix transformation.

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:

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

The following properties are supported:

The following simple operations can be applied:

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

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
Enabled n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
M11 n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
M12 n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
M21 n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
M22 n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Dx n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
Dy n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
SizingMethod n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-
FilterType n/a5.5 5.5 n/a5.5 5.5 n/a n/a n/a n/a n/a n/a-