Basic Understanding of Matrix Transformation

Article
07/31/2009

Left to my own devices and not having good clear documentation this is my observation on how it works, but as it is just an informed guess I may be inaccurate. This is targeted at people that are just starting to learn WPF

Technorati Tags: WPF 4,Matrx Transformation,XAML image inversion

<Grid>

<Image.RenderTransform >

<MatrixTransform.Matrix>

</MatrixTransform.Matrix>

</MatrixTransform>

</Image.RenderTransform>

</Image>

</Grid>

The above XAML produces a standard normally oriented image for me to view. That looks something like this:

Indeed without the MatrixTransform I would have gotten the same result. The top left corner represents 0,0 and the bottom right represents 320,240. There has been no adjustment to the image and as such it renders in the default way. To understand the MatrixTransform let's pick it apart piece by piece. First, let's take the simplest modification and modify the offsets for X and Y. We'll change the Matrix element to read:

So, it will shift the start point for rendering by the amount specified which will give us the following result:

Take note of the horizontal and vertical shift. However, the image orientation is the same as there has been no shift in the value or direction of the X and Y coordinates. To do this, we set values for M11 and M12 where M11 will be the multiplier for the starting X coordinate and M12 is the multiplier for the bottom left coordinate. Let's revert the image offset to 0's and flip it on its X axis. What does that mean in terms of M11? Since I simply want to flip it, but make no other change I will set the value to -1 as M11 represents the for coordinate pair of the object and a negative number will make it work in the opposite direction:

This changes the value of X from 320 to -320 resulting in an image that looks like:

I'd really like to get that image into the view window. Since it is now rendering to the left thanks to a sign change I need the final point to end up at 0 on the X axis. As such, I simply shift the OffsetX over the with by setting it to 320.

However, since my image has some blank space I'm actually going to set the OffsetX to 240 in order to ensure that it shows properly in the window.

Thus, the image will start rendering backward at 320 and end up at 0 resulting in this:

As you can see, I have now caused it to render backward in the same orientation as before by simply negating the X coordinates and then moved it into proper view with an OffsetX adjustment. Of note, if you want to stretch the image/control along the left side you need to set M12 to some other value as M12 represents the mdifier endpoint of the line going from top left to bottom left.

Lastly, let's do the same simple demo with the Y coordinate. If we want to flip it, but not skew it in any way we simply need to negate the Y coordinates by setting M22 equal to -1 as this will change the end point for the vertical rendering:

Which results in this image:

Once again we need to adjust the offset and since there is no empty space at the bottom or top this can be the same as the actual define window space:

This results in:

And that concludes my simple, but hopefully enlightening tutorial. Please, if it helped you let me know and I'll do more remedial getting to know your platform stuff like this based on what I wish someone would have told me. Additionally, if I misstated how something works, please, please, post a comment clarifying as the knowledge will only help me :)

Basic Understanding of Matrix Transformation

Additional resources