C# Tutorial - Image Editing: Rotate [Beginner]


To follow up on the earlier image editingtutorial, I will be going over an easy technique to rotate an image just like it is done in Adobe Photoshop.

To learn some more about the inner workings on the topic you can look up image transformation matrices. Let's create a method that takes a Bitmap object and a rotation angle and returns the new, rotated image.
private Bitmap rotateImage(Bitmap b, float angle)
 
We pass in the image to rotate (System.Drawing.Bitmap) and the the angle to rotate it by in degrees. The image will be rotated clockwise.

The next step is to create the bitmap we are going to return and also the graphics object (System.Drawing.Graphics) we use to rotate and draw the image. First we create a blank Bitmap which is the same size at the incoming one. Since we'll be drawing on this new Bitmap, the next thing to do is to create a Graphics object from this Bitmap.
private Bitmap rotateImage(Bitmap b, float angle)
{
  //create a new empty bitmap to hold rotated image
  Bitmap returnBitmap = new Bitmap(b.Width, b.Height);
  //make a graphics object from the empty bitmap
  Graphics g = Graphics.FromImage(returnBitmap);
}
 
The next part is the important part which does the actual rotation. First we move the image to the middle because the image rotates from the upper left corner. Next we tell the graphics object to rotate the picture by the requested degrees. And finally we move the image back to the correct position.

The way the graphics object rotates the image is by using a transformation matrix, which you can do a lot more with than just rotate the image. If you know more about transformation matrices, you can set g.Transform to a System.Drawing.Drawing2D.Matrix to perform any number of translations. We didn't use a transformation matrix in this tutorial because this technique is easier to understand.
private Bitmap rotateImage(Bitmap b, float angle)
{
  //create a new empty bitmap to hold rotated image
  Bitmap returnBitmap = new Bitmap(b.Width, b.Height);
  //make a graphics object from the empty bitmap
  Graphics g = Graphics.FromImage(returnBitmap);
  //move rotation point to center of image
  g.TranslateTransform((float)b.Width/2,(float)b.Height / 2);
  //rotate
  g.RotateTransform(angle);
  //move image back
  g.TranslateTransform(-(float)b.Width/2,-(float)b.Height / 2);
}
The last thing to do is draw the return image and return it.
private Bitmap rotateImage(Bitmap b, float angle)
{
  //create a new empty bitmap to hold rotated image
  Bitmap returnBitmap = new Bitmap(b.Width, b.Height);
  //make a graphics object from the empty bitmap
  Graphics g = Graphics.FromImage(returnBitmap);
  //move rotation point to center of image
  g.TranslateTransform((float)b.Width/2, (float)b.Height / 2);
  //rotate
  g.RotateTransform(angle);
  //move image back
  g.TranslateTransform(-(float)b.Width/2,-(float)b.Height / 2);
  //draw passed in image onto graphics object
  g.DrawImage(b, new Point(0, 0)); 
  return returnBitmap;
}
Just like before, here is the source code and a C# VS2005 Express Edition solution with the needed methods and some test code.

Comments