How do I prevent clipping when rotating an image in C#?

Question

I just went through a bunch of stuff trying to figure out how to get the image to even rotate. That works but now it\'s clipping and I\'m not really sure how to make it stop

Answer 1

A rotated image may require a larger bitmap to be contained without clipping. A fairly simple way to compute the bounds is to apply the transformation matrix to the corners of the original bounding rectangle. Since the new bitmap is larger, the original image must be drawn such that it is centered, rather than at (0,0).

This is demonstrated in the following revision to your code:

public static Image RotateImage(Image img, float rotationAngle)
{
    int minx = int.MaxValue, maxx = int.MinValue, miny = int.MaxValue, maxy = int.MinValue;

    using (Bitmap bmp = new Bitmap(1, 1)) // Dummy bitmap, so we can use TransformPoints to figure out the correct size.
    {
        using (Graphics g = Graphics.FromImage(bmp))
        {
            g.TranslateTransform((float)img.Width / 2, (float)img.Height / 2);
            g.RotateTransform(rotationAngle);
            g.TranslateTransform(-(float)img.Width / 2, -(float)img.Height / 2);

            Point[] pts = new Point[4];
            pts[0] = new Point(0, 0);
            pts[1] = new Point(img.Width, 0);
            pts[2] = new Point(img.Width, img.Height);
            pts[3] = new Point(0, img.Height);
            g.TransformPoints(CoordinateSpace.Device, CoordinateSpace.World, pts);

            foreach (Point pt in pts)
            {
                minx = Math.Min(minx, pt.X);
                maxx = Math.Max(maxx, pt.X);
                miny = Math.Min(miny, pt.Y);
                maxy = Math.Max(maxy, pt.Y);
            }
        }
    }

    Bitmap bmp2 = new Bitmap(maxx - minx, maxy - miny);
    using (Graphics g = Graphics.FromImage(bmp2))
    {
        g.TranslateTransform((float)bmp2.Width / 2, (float)bmp2.Height / 2);
        g.RotateTransform(rotationAngle);
        g.TranslateTransform(-(float)bmp2.Width / 2, -(float)bmp2.Height / 2);
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.DrawImage(img, bmp2.Width / 2 - img.Width / 2, bmp2.Height / 2 - img.Height / 2);
    }

    return bmp2;
}

Answer 2

I found some help from another website. Here's what I ended up doing for those of you who want to know:

// Rotates the input image by theta degrees around center.
    public static Bitmap RotateImage(Bitmap bmpSrc, float theta)
    {
        Matrix mRotate = new Matrix();
        mRotate.Translate(bmpSrc.Width / -2, bmpSrc.Height / -2, MatrixOrder.Append);
        mRotate.RotateAt(theta, new System.Drawing.Point(0, 0), MatrixOrder.Append);
        using (GraphicsPath gp = new GraphicsPath())
        {  // transform image points by rotation matrix
            gp.AddPolygon(new System.Drawing.Point[] { new System.Drawing.Point(0, 0), new System.Drawing.Point(bmpSrc.Width, 0), new System.Drawing.Point(0, bmpSrc.Height) });
            gp.Transform(mRotate);
            System.Drawing.PointF[] pts = gp.PathPoints;

            // create destination bitmap sized to contain rotated source image
            Rectangle bbox = boundingBox(bmpSrc, mRotate);
            Bitmap bmpDest = new Bitmap(bbox.Width, bbox.Height);

            using (Graphics gDest = Graphics.FromImage(bmpDest))
            {  // draw source into dest
                Matrix mDest = new Matrix();
                mDest.Translate(bmpDest.Width / 2, bmpDest.Height / 2, MatrixOrder.Append);
                gDest.Transform = mDest;
                gDest.DrawImage(bmpSrc, pts);
                return bmpDest;
            }
        }
    }

    private static Rectangle boundingBox(Image img, Matrix matrix)
    {
        GraphicsUnit gu = new GraphicsUnit();
        Rectangle rImg = Rectangle.Round(img.GetBounds(ref gu));

        // Transform the four points of the image, to get the resized bounding box.
        System.Drawing.Point topLeft = new System.Drawing.Point(rImg.Left, rImg.Top);
        System.Drawing.Point topRight = new System.Drawing.Point(rImg.Right, rImg.Top);
        System.Drawing.Point bottomRight = new System.Drawing.Point(rImg.Right, rImg.Bottom);
        System.Drawing.Point bottomLeft = new System.Drawing.Point(rImg.Left, rImg.Bottom);
        System.Drawing.Point[] points = new System.Drawing.Point[] { topLeft, topRight, bottomRight, bottomLeft };
        GraphicsPath gp = new GraphicsPath(points,
                                                            new byte[] { (byte)PathPointType.Start, (byte)PathPointType.Line, (byte)PathPointType.Line, (byte)PathPointType.Line });
        gp.Transform(matrix);
        return Rectangle.Round(gp.GetBounds());
    }

Answer 3

follow these steps:

1. Create empty destination image whose width & height = bounding box of your rotated image
2. Draw your source image onto the destination image. (0,0) of source will map to (ox,oy) of destination
3. Now do the steps to rotate the destination image.

Details to accomplish above steps:

W,H = width & height of destination

w,h = width & height of source

c=|cos(theta)|

s=|sin(theta)|

w * c + h * s = W

w * s + h * c = H

ox = ( W - w ) / 2

oy = ( H - h ) / 2

Answer 4

public Bitmap rotateImage(Bitmap b, float angle)
    {
        if (angle > 0)
        {
            int l = b.Width;
            int h = b.Height;
            double an = angle * Math.PI / 180;
            double cos = Math.Abs(Math.Cos(an));
            double sin = Math.Abs(Math.Sin(an));
            int nl = (int)(l * cos + h * sin);
            int nh = (int)(l * sin + h * cos);
            Bitmap returnBitmap = new Bitmap(nl, nh);
            Graphics g = Graphics.FromImage(returnBitmap);
            g.TranslateTransform((float)(nl-l) / 2, (float)(nh-h) / 2);
            g.TranslateTransform((float)b.Width / 2, (float)b.Height / 2);
            g.RotateTransform(angle);
            g.TranslateTransform(-(float)b.Width / 2, -(float)b.Height / 2);
            g.DrawImage(b, new Point(0, 0));
            return returnBitmap;
        }
        else return b;
    }