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

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