CODEWITHSUNDEEP
ioscore-graphics
Wingzero
Wingzero

Reputation: 9754

CGContextRotateCTM not working for rotating a UIImage

I want to draw a delete button just like the delete app button on home screen like below code.

The idea is draw the cross first, and then rotate 45 degree. What's wrong with my code?

self.deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, BADGE_SIZE, BADGE_SIZE)];

if (!deleteBtnImg) {
    CGRect imgFrame = self.deleteButton.bounds;

    UIGraphicsBeginImageContextWithOptions(imgFrame.size, NO, 0.0);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imgFrame.size.width/2, imgFrame.size.height/2)
                                                        radius:size/2-RADIUS_MARGIN
                                                    startAngle:0
                                                      endAngle:M_PI * 2
                                                     clockwise:YES];
    [path moveToPoint:CGPointMake(size / 2, 0)];
    [path addLineToPoint:CGPointMake(size / 2, size)];
    [path moveToPoint:CGPointMake(0, size / 2)];
    [path addLineToPoint:CGPointMake(size, size / 2)];
    [[UIColor whiteColor] setFill];
    [[UIColor redColor] setStroke];
    [path setLineWidth:1.0];
    [path fill];
    [path stroke];

    CGContextRotateCTM(context, M_PI/4);

    deleteBtnImg = UIGraphicsGetImageFromCurrentImageContext();
    CGContextRestoreGState(context);
    UIGraphicsEndImageContext();
}
[self.deleteButton setImage:deleteBtnImg forState:UIControlStateNormal];

Upvotes: 0

Views: 994

Answers (1)

Eric Qian
Eric Qian

Reputation: 2256

You have to rotate the context before start drawing. However even if you rotate before drawing. The image still does not look right. It is because when you rotate the context, the context is actually rotating around it's origin point which is (0,0) or the bottom-left corner (The CoreGraphic's coordinate system is a bit different from UI's). So what you could do is, before rotation, translate the context so that it will rotate around its center, and then move it back after rotation. Here is a quick example: 

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
CGContextTranslateCTM(context, size / 2, size / 2);
CGContextRotateCTM(context, M_PI_4);
CGContextTranslateCTM(context, -size / 2, -size / 2); 
// Start your drawing code

Upvotes: 6

Related Questions