3

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 ?????

Malloc
  • 15,434
  • 34
  • 105
  • 192
Domlin
  • 185
  • 1
  • 12
  • 1
    You might want to try typing your question text in your native language and then using Google Translate to convert it to English, because it is very hard to understand what you are trying to ask here. – Robert Harvey Mar 29 '13 at 03:27
  • Theres also a great answer here - https://teamtreehouse.com/community/saving-a-rotated-image-with-cgcontextrotatectm – MendyK Jan 02 '17 at 16:40
  • 1
    Possible duplicate of [rotate image using CGContextDrawImage](http://stackoverflow.com/questions/16766111/rotate-image-using-cgcontextdrawimage) – qwerty_so Jan 09 '17 at 12:02
  • I have the similar problem, I wonder do you have fix for this question now? – newszer Nov 19 '18 at 03:26

3 Answers3

21

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:

Rotated context with graph-paper grid in the background and rectangle in the foreground

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.)

    Translated context with graph-paper background, showing the origin at what will be the center of the rectangle

  3. Rotate the context.

    Translated and rotated context with graph-paper background, showing that the axes have now tilted up as before, but now the translated origin has also moved just as the rectangle did

  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.

    Rectangle drawn in its position, with graph-paper background and origin lines removed

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

Community
  • 1
  • 1
Peter Hosey
  • 95,783
  • 15
  • 211
  • 370
  • I was able to rotate the rect with this logic but once i put the finger up that is the rotate gesture ends the rectangle goes away (vanishes)? Any idea? – iAviator Jul 19 '17 at 11:06
1

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.

sbarry
  • 11
  • 2
-1

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();
Dipen Panchasara
  • 13,480
  • 5
  • 47
  • 57
  • How is that meaningfully different from what the code in the question does, and what makes this code work correctly when the code in the question doesn't? – Peter Hosey Mar 29 '13 at 15:34
  • i am drawing image using context & imageRef where in question its not there. – Dipen Panchasara Mar 29 '13 at 15:44
  • How is drawing the image using the CGContext and CGImage different from, and better than, telling the UIImage to draw itself? – Peter Hosey Mar 29 '13 at 15:51