CODEWITHSUNDEEP
iosobjective-cxcodecgcontext
Miquel Labòria
Miquel Labòria

Reputation: 83

Flip rotated text on CGContext

Image: https://i.sstatic.net/pbzar.png

I want to get text on 90-270 degrees (text "Aroma 7" to "Aroma 17"), rotated 180 degrees.

My code:

 for (int i=0; i<24; i++) {
    CGContextSaveGState(context);
    CGContextRef context = UIGraphicsGetCurrentContext();
    NSString *str = [NSString stringWithFormat:@"Aroma %d", i];

    CGContextTranslateCTM(context, radius, radius);
    CGContextRotateCTM(context, i * 15 * M_PI/180.0);
    [[UIColor whiteColor] set];

    CGContextTranslateCTM(context, - (radius), -(radius));

    CGSize size = [str sizeWithFont:[UIFont fontWithName:@"Helvetica" size:12.0]
                     constrainedToSize:rect.size
                         lineBreakMode:(NSLineBreakByWordWrapping)];

    [str drawAtPoint:CGPointMake(((radius * 2) - 10) - size.width, radius) withFont:[UIFont fontWithName:@"Helvetica" size:12.0]];


    CGContextRestoreGState(context);
}

Thanks for the help!

Upvotes: 3

Views: 1853

Answers (1)

Martin R
Martin R

Reputation: 539685

This should produce the wanted output:

for (int i=0; i<24; i++) {
    CGContextSaveGState(context);
    CGContextRef context = UIGraphicsGetCurrentContext();
    NSString *str = [NSString stringWithFormat:@"Aroma %d", i];

    CGContextTranslateCTM(context, radius, radius);
    CGContextRotateCTM(context, i * 15 * M_PI/180.0);
    [[UIColor whiteColor] set];
    CGSize size = [str sizeWithFont:[UIFont fontWithName:@"Helvetica" size:12.0]
                  constrainedToSize:rect.size
                      lineBreakMode:(NSLineBreakByWordWrapping)];

    CGContextTranslateCTM(context, radius-10-size.width/2, size.height/2); // (1)
    if (i >= 7 && i <= 17)
        CGContextRotateCTM(context, M_PI); // (2)
    [str drawAtPoint:CGPointMake(-size.width/2, -size.height/2) withFont:[UIFont fontWithName:@"Helvetica" size:12.0]];

    CGContextRestoreGState(context);
}

The idea is to move the origin of the coordinate system to the center of the rectangle where the text is to be drawn (see (1)). Then you can simply rotate the text by 180 degrees (see (2)).

This is the output of my test program:

enter image description here

Upvotes: 5

Related Questions