Rotate image math (C#)

Question

I have an image with two points, aligned something like this:

|----------------|
|                |
|    .           |
|                |
|          .     |
|                |
|----------------|

I have both X, Y coordinates for both points and I need to rotate the image X degrees so it looks like this instead:

|----------------|
|                |
|                |
|    .     .     |
|                |
|                |
|----------------|

Basically so they align next to eachother, what's the math for this? (A code example in C# would be even better but not required)

Answer 1

It depends on which point you want to use as a "center" for your rotation. Let's call the point to the up and left pointA and the one to the right and below pointB. If you want to rotate around the point A so that point B aligns with it, calculating the rotation angle in radians would go like this:

double angle = Math.Atan2(pointB.Y - pointA.Y, pointB.X - pointA.X);

I don't how you're handling your image, so the following applies only if you're using System.Drawing.Graphics:

myImage.TranslateTransform(-pointA.X, -pointA.Y);
myImage.RotateTransform((float) angle, MatrixOrder.Append);
myImage.TranslateTransform(pointA.X, pointA.Y, MatrixOrder.Append);

Hope it helps.

Answer 2

No code, sorry, but a stratagy.

You need to be able to create the result image by sampling the the source image. You know the angle of rotation, so you now need to create a mapper function which maps from the result back to the original.

The code would simply scan each row of the result image, and map the pixel back to the original image. You can do a simple;

for (int plotY = 0; plotY < resultHeight; plotY++)
{
   for (int plotX = 0; plotX < resultWidth; plotX++)
   {
         resultImage.PlotPixel(getOriginalPixel(plotX, plotY, angleOfRotation));
   } 
}

So now we just need the magical "getOriginalPixel" method, and this is where the maths comes in.

If we rotate the image 0 degrees, then plotX, plotY is just the X/Y of the original image. But that's no fun.

pickX = x * cos(angle) - y * sin(angle)
pickY = y * cos(angle) + x * sin(angle)

I think will map to the source pixel. You'll need to check if it's out of bounds and just return black or something :)

Answer 3

The below code works

  Matrix mRotate = new Matrix();
    mRotate.Translate(Convert.ToInt32(Width.Value) / -2, Convert.ToInt32(Height.Value) / -2, MatrixOrder.Append);
    mRotate.RotateAt(theta, new Point(0, 0), MatrixOrder.Append);

    using (GraphicsPath gp = new GraphicsPath())
    {  // transform image points by rotation matrix
        gp.AddPolygon(new Point[] { new Point(0, 0), new Point(Convert.ToInt32(Width.Value), 0), new Point(0, Convert.ToInt32(Height.Value)) });
        gp.Transform(mRotate);
        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);
            gDest.DrawRectangle(Pens.Transparent, bbox);
            //drawAxes(gDest, Color.Red, 0, 0, 1, 100, "");
            return bmpDest;
        }
    }

Answer 4

First find the centre point:

Point p = new Point((x1-x2)/2, (y1-y2)/2)

Then use trigonomentry to solve for the angle. I'm going to assume we have rebased the origin to our central point so I now have a new x3 and y3 to one of the points.

hypotenuse = SqrRt(x3^2 + y3^2)

We are solving for the unknown angle TH

Sin(TH) = opposite / hypotenuse

So to solve for TH we need:

TH = Asin(y3 / hypotenuse)

Rotate by TH.

See Wikipedia for trigonometric functions reference

Answer 5

Performing a general 2D transformation involves solving a pair of eqautions with 6 unknowns.

'x = xA + yB + C

'y = xD + yE + D

Given 3 corresponding points, you will have 6 knowns and the system can be solved. You only have 4 points in this case, since you don't care about shear, but you could imagine introducing a 3rd point at 90 degrees to the line formed by the other two points. Creating a rotated image is then ( pseudo codedily ) just something like:

for ( y = 0; y < height; y++ )
 for ( x = 0; x < width; x++ )
  {
    newx = x*A + y*B + C;
    newy = x*D + y*D + E;
    newimage(x,y ) = oldimage( newx, newy );
  }
}

If performance is important, the multiplies in the inner loop can be optimised away by noting that y*B only changes in the outer look and that newx,newy change by constants A and D in the inner loop.

Answer 6

You need to look up geometric rotation matrices: See this site for an detailed explanation

However, for best results, you need to transform from the destination to the source and then use the transformation for each destination pixel:

m = rotation matrix

for each point p in destination
  p' = p.m
  get pixel p' from source
  set pixle p in destination

There is, in the .net framework methods to do all this: System.Drawing.Graphics.RotateTransform and System.Drawing.Graphics.TranslateTransform. You will need to set up a translation to move the rotation point of the image to the origin, then apply the rotation and then another translation to return it to the original position. You'll need to experiment with these functions to work out how they behave - I'm at work at the moment and haven't the time to hand to get some code together that works. :-(