#799 – How Transforms Are Combined

Because all transforms in WPF use homogeneous coordinates, combining transforms is accomplished simply by multiplying one or more 3 x 3 matrices together.

For example, suppose that we want to combine a rotation and a translation transform:

                <TransformGroup>
                    <RotateTransform Angle="30"/>
                    <TranslateTransform X="5.0" Y="10.0"/>
                </TransformGroup>

Recall that the 3 x 3 transformation matrix for rotation looks like:
799-001

And recall that the 3 x 3 transformation matrix for translation looks like:

799-002

To combine these two transforms together, we multiply the matrices, but in the opposite order from how they are listed:

799-005

For the example above, that works out to:

799-006

Multiplying any point by this final matrix will result in the point first being rotated and then translated.

In WPF, all of this works automatically behind the scenes.  You just specify in XAML the transforms that you want applied to your user interface elements and WPF calculates and stores the proper transformation matrix.

#798 – Rotation Transforms Using Homogeneous Coordinates

You can apply a rotation transform to a 2D point using a 2 x 2 transformation, multiplying it by a 2 x 1 point matrix.  This results in a second 2 x 1 point matrix that represents the transformed (rotated) point.

798-001

In WPF, however, rotation transforms are done using homogeneous coordinates, which means that we multiply a 3 x 3 transformation matrix by a 3 x 1 point matrix.

798-002

In the resulting 3 x 1 matrix, the first and second rows contain the x and y values of the transformed (rotated) point.

#797 – Scale Transforms Using Homogeneous Coordinates

You can apply a scale transform to a 2D point using a 2 x 2 transformation, multiplying it by a 2 x 1 point matrix.  This results in a second 2 x 1 point matrix that represents the transformed (scaled) point.

789-001

 

In WPF, however, scaling transforms are done using homogeneous coordinates, which means that we multiply a 3 x 3 transformation matrix by a 3 x 1 point matrix.

Untitled

 

In the resulting 3 x 1 matrix, the first and second rows contain the x and y values of the transformed (scaled) point.

 

#796 – WPF Transforms Use Homogeneous Coordinates

We saw that we can perform scale and rotation transforms on points in 2D by multiplying a 2 x 2 transformation by a 2 x 1 matrix representing a point.  A translation transform, however, could not be accomplished using a 2 x 2 matrix.  Instead, we multiply a 3 x 3 matrix by a 3 x 1 matrix that represents the 2D point.

795-001

In WPF, all 2D transforms are accomplished using a 3 x 3 transformation matrix and a 3 x 1 point matrix.  The 3 x 1 matrix contains the x and y components of the point in the first two rows and a value of 1 as the third row.  This is done so that we can easily combine scale, rotate and translation transforms, since they all use matrices of the same dimensions.

In representing a 2D point using a 3 x 1 matrix, WPF is making us of homogeneous coordinates, which involves adding a third dimension, represented by the third row of the point matrix.

#795 – How a Translation Transform Works

A 2D translation transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.

Unlike rotation and scaling transforms, we can’t perform a translation by multiplying a 2 x 2 matrix (representing the transform) by a 2 x 1 matrix (representing the point).  Instead, we multiple a 3 x 3 matrix by a 3 x 1 matrix, as shown below.

795-001

In this case, we represent the point (x, y) not by a 2 x 1 matrix, but by a 3 x 1 matrix where the third row is always 1.  The resulting 3 x 1 matrix then also contains a third row with a value of 1 and the new transformed (x, y) point in the first two rows.

Notice that we get what we expect for a translation.  Tx is added to x and Ty is added to y, representing a translation.

#794 – Matrix Multiplication, Part IV – Some Examples

Here are a few examples of doing matrix multiplication, for some of the typical matrix sizes used for doing 2D and 3D transforms.

794-002

 

#793 – Matrix Multiplication, Part III – Procedure

Once you know that an m x n matrix can be multiplied by an n x p matrix to get a m x p matrix and you know how to multiply a row by a column, you can multiply one matrix by another.

To do the operation, you multiply each row in the the first matrix by each column in the second matrix, using the dot product of two vectors to do the multiplication.  The resulting value is stored in the corresponding row and column of the target matrix, as follows.

Multiplying matrix A by matrix B to get matrix C, row i of matrix A is multiplied by column j of matrix B, to get a result that is stored in row i and column j of matrix C.

For example:

793-001

 

#792 – Matrix Multiplication, Part II – Multiplying a Row by a Column

When you multiply two matrixes together, you perform a series of operations where you multiply a row in the first matrix by a column in the second matrix.  This multiplication results in a single term that will appear in the resulting matrix.

To multiply a row by a column, they must have the same number of elements.  If you consider each of them as vectors, you multiply them by calculating the dot product of the two vectors.

A dot product is calculated by multiplying the corresponding elements in the two vectors and then adding the terms together.

For example, we might multiply a row containing the values a, b, c with a column containing the values x, y, z as follows:

792-001

#791 – Matrix Multiplication, Part I – Rows and Columns

To understand how WPF transforms points, it’s useful to know how to multiply two matrices together.

You can multiply one matrix (A) by another matrix (B) if the number of columns in A equals the number of rows in B.  The resulting matrix has the same number of rows as matrix A and the same number of columns as matrix B.

That is–multiplying an m x n matrix by an n x p matrix yields an m x p matrix.

Note: When describing the dimensions of a matrix, the first number refers to the number of rows and the second number refers to the number of columns.

For  example:

  • Multiplying a 2 x 3 matrix by a 3 x 1 matrix yields a 2 x 1 matrix
  • Multiplying a 2 x 2 matrix by a 2 x 1 matrix yields a 2 x 1 matrix
  • Multiplying a 3 x 3 matrix by a 3 x 1 matrix yields a 3 x 1 matrix

791-001

 

#790 – How a Rotation Transform Works

A 2D rotation transform in WPF is accomplished by using a transformation matrix.  The transformation matrix is multiplied by another matrix representing a single 2D point to be transformed.  The resulting matrix describes the transformed point.  When rotating a user interface element, this transformation is done individually on each point to generate the set of points representing the transformed element.

The transformation operation for rotation looks like:

790-001

Where ϴ represents the Angle property of the ScaleTransform, indicating the number of degrees to rotate the point in a clockwise direction.

This leads to the equations:

790-002