#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.


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.



#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:


#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



#787 – Transforming a Point Using Matrix Multiplication

In WPF, all 2D transformations (e.g. scale, rotate, translate) are done internally using matrix multiplication.

Every point that you want to transform is represented as a 2 x 1 matrix (two rows and one column).  For example:



Assume that you want to transform this point, represented by x and y, into a new point.  We do this by multiplying a 2 x 2 transformation matrix by our original 2 x 1 matrix.  The result is another 2 x 1 matrix, containing our new (transformed) point.

The operation is written as follows, assuming that a, b, c and represent the four values in our 2 x 2 matrix.  We multiply the 2 x 2 transformation matrix by the original 2 x 1 matrix to get a new 2 x 1 matrix.



(Don’t worry about the values of a, b, c and d for now–we’ll fill them in later).  The actual multiplication is done as follows: