Click here to Skip to main content
13,139,254 members (55,696 online)
Click here to Skip to main content
Articles » Multimedia » GDI+ » General » Revisions
Add your own
alternative version


180 bookmarked
Posted 13 Sep 2004

Matrix Transformation of Images in C#, using .NET GDI+

, 13 Sep 2004
Rate this:
Please Sign up or sign in to vote.
Use of GDI+ Matrix class to perform image transformation.
This is an old version of the currently published article.

Sample Image - trans.jpg


2D image transformation in .NET has been very much simplified by the Matrix class in the System.Drawing.Drawing2D namespace. In this article, I would like to share with the reader on the use of Matrix class for 2D image transformation.


The Matrix class takes 6 elements arranged in 3 rows by 2 cols. For example, the default matrix constructed by the default constructor has value of ( 1,0,0,1,0,0 ). In matrix representation:

Sample screenshot

This is a simplification of:

Sample screenshot

The last column is always: Sample screenshot

Thus a translation transformation of movement of 3 in x-axis and 2 in the y-axis would be represented as:

Sample screenshot but internally is represented as Sample screenshot

An important thing to note is that the transformation matrix is post multiplied to the image vectors. For example, we have an image with 4 points: (1,1) ( 2,3) (5,0) (6 7). The image vectors would be represented as a 4 rows by 2 columns matrix:

Sample screenshot but internally is represented as Sample screenshot

When the transformation matrix is operated on the image matrix, the transformation matrix is multiplied on the right of the image matrix.

Sample screenshot

The last column of the resulting matrix is ignored. Thus the resulting image would have points (4,3) (5,5) (8,2) and (9,9).

A composite transformation is made up of the product of two or more matrices. Take for example, a scaling matrix with factor 2 in x-axis and 3 in y-axis.

Sample screenshot internally represented as Sample screenshot

When we have a composite transformation of a translation followed by a scaling, the scaling matrix would be multiplied to the right of the translation matrix:

Sample screenshot

Likewise, if we have a composite matrix of a scaling followed by a translation, the translation matrix would be multiplied to the right of the scaling matrix.

Multiplying to the right is also known as appending, and to the left as prepending. Matrices on the left are always operated first.

Matrix Transformation

In this article, I would focus only on the following transformations:

  • Rotation
  • Translation
  • Stretching (Scaling)
  • Flipping (Reflection)

To create a Matrix object:

//This would create an identity matrix (1,0,0,1,0,0)
Matrix m=new Matrix();

To initialize the values of the matrix at creation:

//This would create a matrix with elements (1,2,3,4,5,6)
Matrix m=new Matrix(1,2,3,4,5,6);

The Matrix class implements various methods:

  • Rotate
  • Translate
  • Scale
  • Multiply

To create a composite matrix, first create a identity matrix. Then use the above methods to append/prepend the transformation.

Matrix m=new Matrix();

//move the origin to 200,200
//rotate 90 deg clockwise

In the above code, since the rotation transformation is prepended to the matrix, the rotation transformation would be performed first.

In matrix transformations, the order of operation is very important. A rotation followed by a translation is very different from a translation followed by a rotation, as illustrated below:

Sample screenshot

Using the Matrix Object

The following GDI+ objects make use of the Matrix object:

  • Graphics
  • Pen
  • GraphicsPath

Each of these has a Transform property which is a Matrix object. The default Tranform property is the identity matrix. All drawing operations that involve the Pen and Graphics objects would perform with respect to their Transform property.

Thus, for instance, if a 45 deg clockwise rotation matrix has been assigned to the Graphics object Transform property and a horizontal line is drawn, the line would be rendered with a tilt of 45 deg.

The operation of matrix transformation on a GraphicsPath is particularly interesting. When its Transform property is set, the GraphicsPath's PathPoints are changed to reflect the transformation.

One use of this behavior is to perform localized transformation on a GraphicsPath object and then use the DrawImage method to render the transformation.

Graphics g=Graphics.FromImage(pictureBox1.Image);

GraphicsPath gp=new GraphicsPath();

Image imgpic=(Image)pictureBoxBase.Image.Clone();

//the coordinate of the polygon must be
//point 1 = left top corner
//point 2 = right top corner
//point 3 = right bottom corner
if(cbFlipY.CheckState ==CheckState.Checked)
 gp.AddPolygon(new Point[]{new Point(0,imgpic.Height),
               new Point(imgpic.Width,imgpic.Height),
               new Point(0,0)});
 gp.AddPolygon(new Point[]{new Point(0,0),
               new Point(imgpic.Width,0),
               new Point(0,imgpic.Height)});

//apply the transformation matrix on the graphical path
//get the resulting path points
PointF[] pts=gp.PathPoints;

//draw on the picturebox content of imgpic using the local transformation
//using the resulting parralleogram described by pts


Unfortunately, there is no flipping method for the Matrix class. However, the matrix for flipping is well known. For a flip along the x-axis, i.e., flipping the y-coordinates, the matrix is (1,0,0,-1,0,0). For flipping the x-coordinates, the matrix is (-1,0,0,1,0,0).

Affined Transformation

The transformation on an image using the Matrix object is not just a simple point to point mapping.

Take for instance the rectangle with the vertices (0,0) (0,1) (1,1) (1,0). If the units are in pixels, then there are only four pixels making up the whole rectangle. If we subject the rectangle to a scaling matrix of factor 2 in both x and y-axis about the origin (0,0), the resulting rectangle would have vertices (0,0) (0,2) (2,2) (2,0). It would also contain other points within these vertices. How could a 4 points figure be mapped to a figure with more than 4 points?

The answer is that the transformation operation generated those other points that have no direct mapping by interpolation (estimation of unknown pixel values using known mapped pixels).

Using the Transformation Tester

The use of the demo program is quite intuitive. At startup, the CodeProject beloved iconic figure is loaded. The axes are based on graph-paper coordinate system. There is a check box to unflip the y-coordinates to reflect the computer coordinate system. The origin is set at (200,200) relative to the picture box.

Adjust the tracker for each of the transformation operations, and order the transformation as shown in the list box by using the + and - buttons. Click Go to start the operation.

Thanks to leppie (a reader) for his comment, I have added a new checkbox to allow the user to see real time transformation. After the Real Time checkbox is checked, all adjustments to the trackers and reordering of the transformation will cause the transformation to be performed immediately. This gives the effect of a real time update.


The code is quite adequately commented. I hope that the reader would benefit from this article and the codes, and start to unlock the power of the Matrix object in .NET.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Yang Kok Wah
Software Developer (Senior)
Singapore Singapore
Yang Kok Wah is a Software Specialist in a leading System/Solution Integration Company in Singapore. He has more than 20 years experience in software development, specializing in areas of Biometrics, Smartcards and Image Processing. He has worked with VB, C#, Java and C/C++. He graduated from University of London with BSc(Hons) in Computing and also holds a Business Administration degree from National University of Singapore.

He likes Graphics, Games, AI and Image Processing.

You may also be interested in...


Comments and Discussions

Discussions on this specific version of this article. Add your comments on how to improve this article here. These comments will not be visible on the final published version of this article.
GeneralMy vote of 5 Pin
Evgeny Bestfator1-Jul-16 2:36
professionalEvgeny Bestfator1-Jul-16 2:36 
GeneralMy vote of 3 Pin
yasureican9-May-14 1:12
memberyasureican9-May-14 1:12 
QuestionMatrix transformation on coordinates. Pin
Raheel Khan10-Jan-12 20:02
memberRaheel Khan10-Jan-12 20:02 
AnswerRe: Matrix transformation on coordinates. Pin
Yang Kok Wah8-May-14 2:48
memberYang Kok Wah8-May-14 2:48 
QuestionMessage Closed Pin
18-Oct-11 17:42
memberraymondtan.pos18-Oct-11 17:42 
GeneralYou rock. Pin
ThisIsANameOK21-Dec-09 18:21
memberThisIsANameOK21-Dec-09 18:21 
GeneralChange the orientation of axis Pin
pkp0018-Feb-09 21:51
memberpkp0018-Feb-09 21:51 
GeneralRe: Change the orientation of axis Pin
Ken Fyrstenberg9-May-14 13:22
groupKen Fyrstenberg9-May-14 13:22 
GeneralGreat Tutorial Pin
baranils9-Dec-08 6:45
memberbaranils9-Dec-08 6:45 
GeneralGraphicsPath Scale at Runtime Pin
parascadd19-Feb-08 1:43
memberparascadd19-Feb-08 1:43 
GeneralWhen transformed, the picture become not as clear as before (though zoomed out) Pin
followait23-Dec-07 19:47
memberfollowait23-Dec-07 19:47 
Generalgreat article! Pin
mwagnborg31-May-07 13:53
membermwagnborg31-May-07 13:53 
GeneralNon-proportional (non Rectangular) resizing... Pin
GraGra_3326-Jan-07 19:43
memberGraGra_3326-Jan-07 19:43 
GeneralGood Stuff Pin
PowerLee23-Nov-06 15:26
memberPowerLee23-Nov-06 15:26 
QuestionCan you use this method to create persepective? Pin
woodshed17-Sep-06 0:44
memberwoodshed17-Sep-06 0:44 
AnswerRe: Can you use this method to create persepective? Pin
Graemeg3326-Jan-07 11:39
memberGraemeg3326-Jan-07 11:39 
GeneralRe: Can you use this method to create persepective? Pin
djyoung6-May-09 22:54
memberdjyoung6-May-09 22:54 
GeneralHere is interesting project able to do perspective! Pin
Member 86643524-May-09 14:44
memberMember 86643524-May-09 14:44 
QuestionMirror Horizontal! Pin
DoXiGen17-Aug-06 14:15
memberDoXiGen17-Aug-06 14:15 
AnswerRe: Mirror Horizontal! Pin
Yang Kok Wah17-Aug-06 23:35
memberYang Kok Wah17-Aug-06 23:35 
GeneralRe: Mirror Horizontal! [modified] Pin
DoXiGen19-Aug-06 4:47
memberDoXiGen19-Aug-06 4:47 
GeneralRe: Mirror Horizontal! Pin
Yang Kok Wah20-Aug-06 5:13
memberYang Kok Wah20-Aug-06 5:13 
AnswerRe: Mirror Horizontal! Pin
Husni Che Ngah26-Mar-08 15:39
memberHusni Che Ngah26-Mar-08 15:39 
AnswerRe: Mirror Horizontal! Pin
Roey C21-Sep-10 2:50
memberRoey C21-Sep-10 2:50 
Generalcalc rotation!! Pin
Marco Delgado30-Jun-06 11:13
memberMarco Delgado30-Jun-06 11:13 
GeneralRe: calc rotation!! Pin
Yang Kok Wah2-Jul-06 22:00
memberYang Kok Wah2-Jul-06 22:00 
GeneralUsing DirectX for transformation Pin
Yang Kok Wah26-Dec-05 18:49
memberYang Kok Wah26-Dec-05 18:49 
GeneralWhy Pin
Ista15-Dec-05 12:25
memberIsta15-Dec-05 12:25 
GeneralRe: Why Pin
Yang Kok Wah26-Dec-05 17:14
memberYang Kok Wah26-Dec-05 17:14 
GeneralRe: Why Pin
Ista26-Dec-05 17:19
memberIsta26-Dec-05 17:19 
GeneralRe: Why Pin
Yang Kok Wah26-Dec-05 17:40
memberYang Kok Wah26-Dec-05 17:40 
GeneralRe: Why Pin
Ista27-Dec-05 2:42
memberIsta27-Dec-05 2:42 
Questionhow to change the location of the image Pin
sobannazir29-Nov-05 11:50
membersobannazir29-Nov-05 11:50 
AnswerRe: how to change the location of the image Pin
Yang Kok Wah4-Dec-05 15:08
memberYang Kok Wah4-Dec-05 15:08 
Generalagain thanks Pin
fdworks7-Nov-05 21:21
memberfdworks7-Nov-05 21:21 
GeneralThanks. Pin
Ribeiro Santos19-Jul-05 3:28
memberRibeiro Santos19-Jul-05 3:28 
GeneralRe: Thanks. Pin
Anonymous2-Aug-05 21:24
sussAnonymous2-Aug-05 21:24 
GeneralThank you Pin
Martin Welker19-Jun-05 22:23
memberMartin Welker19-Jun-05 22:23 
GeneralRe: Thank you Pin
Yang Kok Wah21-Jun-05 7:36
memberYang Kok Wah21-Jun-05 7:36 
GeneralNice work Pin
m0nkeybot8-Oct-04 0:42
memberm0nkeybot8-Oct-04 0:42 
GeneralGreat stuff! Pin
leppie13-Sep-04 21:20
memberleppie13-Sep-04 21:20 
GeneralRe: Great stuff! Pin
Yang Kok Wah13-Sep-04 23:18
memberYang Kok Wah13-Sep-04 23:18 
GeneralRe: Great stuff! Pin
Yang Kok Wah14-Sep-04 1:17
memberYang Kok Wah14-Sep-04 1:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 14 Sep 2004
Article Copyright 2004 by Yang Kok Wah
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid