cgcontext rotate rectangle

Question

guys! I need to draw some image to CGContext.This is the relevant code:

CGContextSaveGState(UIGraphicsGetCurrentContext());

CGContextRef ctx = UIGraphicsGetCurrentContext();

CGRect rect = r;

CGContextRotateCTM(ctx, DEGREES_TO_RADIANS(350));
[image drawInRect:r];


CGContextRestoreGState(UIGraphicsGetCurrentContext());

Actually,the rectangle is rotate and display on a area what is not my purpose.I just want to rotate the image and display on the same position. Any ideas ?????

Answer 1

Rotation is about the context's origin, which is the same point that rectangles are relative to. If you imagine a sheet of graph paper in the background, you can see what's going on more clearly:

The line is the “bottom” (y=0) of your window/view/layer/context. Of course, you can draw below the bottom if you want, and if your context is transformed the right way, you might even be able to see it.

Anyway, I'm assuming that what you want to do is rotate the rectangle in place, relative to an unrotated world, not rotate the world and everything in it.

The only way to rotate anything is to rotate the world, so that's how you need to do it:

1. Save the graphics state.

2. Translate the origin to the point where you want to draw the rectangle. (You probably want to translate to its center point, not the rectangle's origin.)

   

3. Rotate the context.

   

4. Draw the rectangle centered on the origin. In other words, your rectangle's origin point should be negative half its width and negative half its height (i.e., (CGPoint){ width / -2.0, height / -2.0 })—don't use the origin it had before, because you already used that in the translate step.

   

5. Restore the gstate so that future drawing isn't rotated.

Answer 2

What worked for me was to first use a rotation matrix to calculate the amount of translation required to keep your image centered. Below I assume you've already calculated centerX and centerY to be the center of your drawing frame and 'theta' is your desired rotation angle in radians.

let newX = centerX*cos(theta) - centerY*sin(theta)
let newY = centerX*sin(theta) + centerY*cos(theta)

CGContextTranslateCTM(context,newX,newY)
CGContextRotateCTM(context,theta)
<redraw your image here>

Worked just fine for me. Hope it helps.

Answer 3

use following code to rotate your image

// convert degrees to Radians

CGFloat DegreesToRadians(CGFloat degrees)
{
    return degrees * M_PI / 180;
};

write it in drawRect method

 // create new context
CGContextRef context = UIGraphicsGetCurrentContext();
// define rotation angle
CGContextRotateCTM(context, DegreesToRadians(45));
// get your UIImage
UIImage *img = [UIImage imageNamed:@"yourImageName"];
// Draw your image at rect
CGContextDrawImage(context, CGRectMake(100, 0, 100, 100), [img CGImage]);
// draw context
UIGraphicsGetImageFromCurrentImageContext();