Silverlight-MatrixTransform Detailed Introduction and How to Realize Other Transforms with It

This post focuses on how to use MatrixTransform to realize other transformations in Silverlight.

Essence of MatrixTransform: Every Piexels on element which needs to transform multiply matrix to get new coordinate of this point.

The following shows MatrixTransform 3*3 element image:

Number 0,0,1 are changless in silverlight so that we can ignor them. But there are four coordinate Matrix moudules (M11, M12,  M21, M22) we need to multiply.

Then, we can get the new coordinate points (X1, Y1) according to algorithm of old (X,Y) *matrix.

But the new point is not the final location. We need to plus offset point OffsetX and OffsetY to get the final coordinate point (X1+OffsetX, Y+OffsetY).

In conclusion, each coordinate point of original image must be calculated with this equation: X2=X*M11+Y*M21+OffsetX, Y2=X*M12+Y*M22+OffsetY to get the final coordinate point location.

The usage in source code is <MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>.

Now, the following instance how to realize other transformations by MatrixTransform.

1. RotateTransform Effect

<! —a90°?transformation around central point (0,0)–>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“48,49,0,0” Name=“image11” Stretch=“Fill”  Width=“50” Source=“/SLTrans;component/iPhone_001.png”  Opacity=“.3” />
<Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“48,49,0,0” Name=“image1” Stretch=“Fill”  Width=“50” Source=“/SLTrans;component/iPhone_001.png” >
    <Image.RenderTransform>
        <!–m11(0) m12(1)   m21(-1) m22(0)   OffsetX(0) OffsetY(0)–>
        <!–0*X+ -1*X=-1X    1*Y+0*Y =1Y   -1X+0     1Y+0      =>New Coordinate Point (-1X,1Y)  –>
        <MatrixTransform Matrix=“0 1 -1 0 0 0”></MatrixTransform>
    </Image.RenderTransform>
</Image>

2. ScaleTransform Effect

<!–0.6 times scale transform–>
 <ImageHeight=“50”HorizontalAlignment=“Left”VerticalAlignment=“Top”Margin=“139,49,0,0”Name=“image21”Stretch=“Fill”Width=“50”Source=“/SLTrans;component/iPhone_002.png” Opacity=“.3”/> <ImageHeight=“50”HorizontalAlignment=“Left”VerticalAlignment=“Top”Margin=“139,49,0,0”Name=“image2”Stretch=“Fill”Width=“50”Source=“/SLTrans;component/iPhone_002.png”>
        <Image.RenderTransform>
            <!–m11(0.6) m12(0)   m21(0) m22(0.6)   OffsetX(0) OffsetY(0)–>
            <!–0.6*X+0*X=0.6X    0*Y+0.6*Y =0.6Y   0.6X+0     0.6Y+0      =>New Coordinate Point(0.6X,0.6Y)  –>
            <MatrixTransformMatrix=“0.6 0 0 0.6 0 0”></MatrixTransform>
        </Image.RenderTransform>
    </Image>

3. SkewTransform Effect

<! —aSkew Transform–>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“226,49,0,0” Name=“image31” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_003.png” Opacity=“.3”/>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“226,49,0,0” Name=“image3” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_003.png” >
    <Image.RenderTransform>
        <!–m11(1) m12(0)  m21(1) m22(1)  OffsetX(0) OffsetY(0)–>
        <!–1*X+1*X=2X     0*Y+1*Y =1Y    2X+0       1Y+0   =>New Coordinate Point(2X,0Y)  –>
        <MatrixTransform Matrix=“1 0 1 1 0 0”></MatrixTransform>
    </Image.RenderTransform>       
</Image>

4. TranslateTransform Effect

<!–TranslateTransform–>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“331,49,0,0” Name=“image41” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_004.png” Opacity=“.3”/>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“331,49,0,0” Name=“image4” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_004.png” >
        <Image.RenderTransform>
            <!–m11(1) m12(0)  m21(0) m22(1) OffsetX(10) OffsetY(50)–>
            <!–1*X+0*X=2X     0*Y+1*Y =0Y   1X+10       1Y+50  => New Coordinate Point(1X+10,1Y+50)  –>
            <MatrixTransform Matrix=“1 0 0 1 10 50”></MatrixTransform>
        </Image.RenderTransform>
    </Image>

5. TransformGroup Effect

<! —aOverturn around Y axle–>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“426,49,0,0” Name=“image51” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_005.png” Opacity=“.3”/>
    <Image Height=“50” HorizontalAlignment=“Left” VerticalAlignment=“Top” Margin=“426,49,0,0” Name=“image5” Stretch=“Fill” Width=“50” Source=“/SLTrans;component/iPhone_005.png” >
        <Image.RenderTransform>
            <!–m11(1) m12(0) m21(0) m22(-1)   OffsetX(0) OffsetY(100)–>
            <!–1*X+ 0*X=1X   0*Y+ -1*Y =-1Y   1X+0       -1Y+100  => New Coordinate Point(1X,-1Y)  –>
            <MatrixTransform Matrix=“1 0 0 -1 0 0”></MatrixTransform>
        </Image.RenderTransform>
    </Image>

The following image shows the results.

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

One thought on “Silverlight-MatrixTransform Detailed Introduction and How to Realize Other Transforms with It

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s