Properly rotate an image

Question

How to I rotate an image without it showing like this?

Here's my Rotation Method:

public static Bitmap RotateImageN(Bitmap bmp, float angle)
    {
        Bitmap rotatedImage = new Bitmap(bmp.Width, bmp.Height);
        using (Graphics g = Graphics.FromImage(rotatedImage))
        {
            // Set the rotation point to the center in the matrix
            g.TranslateTransform(bmp.Width / 2, bmp.Height / 2);
            // Rotate
            g.RotateTransform(angle);
            // Restore rotation point in the matrix
            g.TranslateTransform(-bmp.Width / 2, -bmp.Height / 2);
            // Draw the image on the bitmap
            g.DrawImage(bmp, new Point(0, 0));
        }

        return rotatedImage;
    }

Edit: After trying Loocid's Code

You need a bigger result bitmap or you need to scale down the source. — Jeroen van Langen, Oct 25 '18 at 08:45

Loocid · Answer 1 · 2018-10-25T06:35:04.300

3

Your rotatedImage Bitmap needs to be big enough to accommodate the rotated image.

Say you rotated your original image by 30° you need to get the size of the bounding box like so:

Using some basic trig:

x = L*cos(30 * π / 180) + w*cos(60 * π / 180)

y = L*sin(30 * π / 180) + w*sin(60 * π / 180)

Therefore change the start of your code to:

var x = bmp.Width * Math.Cos(angle * Math.PI / 180) + bmp.Height * Math.Cos((90-angle) * Math.PI / 180)
var y = bmp.Width * Math.Sin(angle * Math.PI / 180) + bmp.Height * Math.Sin((90-angle) * Math.PI / 180)
Bitmap rotatedImage = new Bitmap(x, y);

edited Oct 25 '18 at 06:35

answered Oct 25 '18 at 05:43

Loocid

6,112
1
24
42

Bitmap rotatedImage = new Bitmap(x, y); I guess – Access Denied Oct 25 '18 at 05:48
As written basically. C# has `Math.Sin`, `Math.Cos` and `Math.PI`. – Loocid Oct 25 '18 at 05:49
if I use that as my x and y in the Draw Image, it won't draw. – TerribleDog Oct 25 '18 at 06:12
Did you change 30 and 60 to `angle` and `90 - angle`? – Loocid Oct 25 '18 at 06:32
@untargeted I've updated my answer to include the C# code you need to use. This is assuming `angle` is in degrees. – Loocid Oct 25 '18 at 06:35
There is no overloaded method for Bitmap() with just x and y only – TerribleDog Oct 25 '18 at 06:40
But thats what you had in your original code? `new Bitmap(bmp.Width, bmp.Height);` – Loocid Oct 25 '18 at 06:43
ow, I thought x and y are coordinates. – TerribleDog Oct 25 '18 at 06:44
@Loocid I added a screenshot of what happened with the code you gave – TerribleDog Oct 25 '18 at 08:39

score 1 · Accepted Answer · answered Oct 25 '18 at 08:47

The issue occurs in the rotating is related to the bounding box. It is clipping the edge because of the image you provided does not fit into the area that you have given.

I also faced this issue. So I tried a solution from here.

Adding the code that works for me.

public static Bitmap RotateImageN(Bitmap bitmap, float angle)
{
    Matrix matrix = new Matrix();
    matrix.Translate(bitmap.Width / -2, bitmap.Height / -2, MatrixOrder.Append);
    matrix.RotateAt(angle, new System.Drawing.Point(0, 0), MatrixOrder.Append);
    using (GraphicsPath graphicsPath = new GraphicsPath())
    {
        graphicsPath.AddPolygon(new System.Drawing.Point[] { new System.Drawing.Point(0, 0), new System.Drawing.Point(bitmap.Width, 0), new System.Drawing.Point(0, bitmap.Height) });
        graphicsPath.Transform(matrix);
        System.Drawing.PointF[] points = graphicsPath.PathPoints;

        Rectangle rectangle = boundingBox(bitmap, matrix);
        Bitmap resultBitmap = new Bitmap(rectangle.Width, rectangle.Height);

        using (Graphics gDest = Graphics.FromImage(resultBitmap))
        {
            Matrix mDest = new Matrix();
            mDest.Translate(resultBitmap.Width / 2, resultBitmap.Height / 2, MatrixOrder.Append);
            gDest.Transform = mDest;
            gDest.DrawImage(bitmap, points);
            return resultBitmap;
        }
    }
}

private static Rectangle boundingBox(Image image, Matrix matrix)
{
    GraphicsUnit graphicsUnit = new GraphicsUnit();
    Rectangle boundingRectangle = Rectangle.Round(image.GetBounds(ref graphicsUnit));
    Point topLeft = new Point(boundingRectangle.Left, boundingRectangle.Top);
    Point topRight = new Point(boundingRectangle.Right, boundingRectangle.Top);
    Point bottomRight = new Point(boundingRectangle.Right, boundingRectangle.Bottom);
    Point bottomLeft = new Point(boundingRectangle.Left, boundingRectangle.Bottom);
    Point[] points = new Point[] { topLeft, topRight, bottomRight, bottomLeft };
    GraphicsPath graphicsPath = new GraphicsPath(points, new byte[] { (byte)PathPointType.Start, (byte)PathPointType.Line, (byte)PathPointType.Line, (byte)PathPointType.Line });
    graphicsPath.Transform(matrix);
    return Rectangle.Round(graphicsPath.GetBounds());
}

it does not crop now, but it doesn't also perfectly rotates. — TerribleDog, Oct 25 '18 at 08:56
Please show the original image and also tell me the rotation angle. — Keyur Ramoliya, Oct 25 '18 at 09:08
Original IMage: https://imgur.com/a/diglXEJ . Rotation Angle : 52 Degrees — TerribleDog, Oct 25 '18 at 09:11
It is working fine for me. I guess the problem might be somewhere else. Test image rotation in the separate exe so that you can get the idea. — Keyur Ramoliya, Oct 25 '18 at 09:15

Properly rotate an image

2 Answers2