34

It's really a pain, but always when I draw an UIImage in -drawRect:, it's upside-down.

When I flip the coordinates, the image draws correctly, but at the cost of all other CG functions drawing "wrong" (flipped).

What's your strategy when you have to draw images and other things? Is there any rule of thumb how to not get stuck in this problem over and over again?

Also, one nasty thing when I flip the y-axis is, that my CGRect from the UIImageView frame is wrong. Instead of the origin appearing at 10,10 upper left as expected, it appears at the bottom.

But at the same time, all those normal line drawing functions of CGContext take correct coordinates. drawing a line in -drawRect with origin 10,10 upper left, will really start at upper left. But at the same time that's strange, because core graphics actually has a flipped coordinate system with y 0 at the bottom.

So it seems like something is really inconsistent there. Drawing with CGContext functions takes coordinates as "expected" (cmon, nobody thinks in coordinates starting from bottom left, that's silly), while drawing any kind of image still works the "wrong" way.

Do you use helper methods to draw images? Or is there anything useful that makes image drawing not a pain in the butt?

5 Answers 5

34

Problem: Origin is at lower-left corner; positive y goes upward (negative y goes downward).
Goal: Origin at upper-left corner; positive y going downward (negative y going upward).

Solution:

  1. Move origin up by the view's height.
  2. Negate (multiply by -1) the y axis.

The way to do this in code is to translate up by the view bounds' height and scale by (1, -1), in that order.

There are a couple of portions of the Quartz 2D Programming Guide that are relevant to this topic, including “Drawing to a Graphics Context on iPhone OS” and the whole chapter on Transforms. Of course, you really should read the whole thing.

2
  • 1
    Yes, right. But when I translate and flip it, all other CG drawing functions like drawing lines and so on appear to draw wrong. So you have the choice: wrong images, or wrong paths. Or flipping back and forth all the time. Commented Apr 23, 2010 at 8:28
  • mystify: You could split the flip-space code into a method and/or use the gstate to save and restore the flip, but see the other answer I just posted. Commented Apr 23, 2010 at 22:09
10

You can do that by apply affinetransform on the point you want to convert in UIKit related coordinates. Following is example.

// Create a affine transform object
CGAffineTransform transform = CGAffineTransformMakeScale(1, -1);
// First translate your image View according to transform
transform = CGAffineTransformTranslate(transform, 0, - imageView.bounds.size.height);
// Then whenever you want any point according to UIKit related coordinates apply this transformation on the point or rect.
// To get tranformed point
CGPoint newPointForUIKit = CGPointApplyAffineTransform(oldPointInCGKit, transform);
// To get transformed rect
CGRect newRectForUIKit = CGRectApplyAffineTransform(oldPointInCGKit, transform);
4

The better answer to this problem is to use the UIImage method drawInRect: to draw your image. I'm assuming you want the image to span the entire bounds of your view. This is what you'd type in your drawRect: method.

Instead of:

CGContextRef ctx = UIGraphicsGetCurrentContext();  
UIImage *myImage = [UIImage imageNamed:@"theImage.png"];  
CGImageRef img = [myImage CGImage];
CGRect bounds = [self bounds];
CGContextDrawImage(ctx, bounds, img);

Write this:

UIImage *myImage = [UIImage imageNamed:@"theImage.png"];
CGRect bounds = [self bounds];
[myImage drawInRect:bounds];
1
  • simple..Love you <3333 Commented Aug 4, 2017 at 10:39
3

It's really a pain, but always when I draw an UIImage in -drawRect:, it's upside-down.

Are you telling the UIImage to draw, or getting its CGImage and drawing that?

As noted in “Drawing to a Graphics Context on iPhone OS”, UIImages are aware of the difference in co-ordinate spaces and should draw themselves correctly without you having to flip your co-ordinate space yourself.

0
CGImageRef flip (CGImageRef im) {
    CGSize sz = CGSizeMake(CGImageGetWidth(im), CGImageGetHeight(im));
    UIGraphicsBeginImageContextWithOptions(sz, NO, 0);
    CGContextDrawImage(UIGraphicsGetCurrentContext(),
                       CGRectMake(0, 0, sz.width, sz.height), im);
    CGImageRef result = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
    UIGraphicsEndImageContext();
    return result;
}

Call the above method using the code below: This code deals with getting the left half of an image from an existing UIImageview and setting the thus generated image to a new imageview - imgViewleft

CGContextRef con = UIGraphicsGetCurrentContext();
CGContextDrawImage(con,  
                   CGRectMake(0,0,sz.width/2.0,sz.height),
                   flip(leftReference));
imgViewLeft = [[UIImageView alloc] initWithImage:UIGraphicsGetImageFromCurrentImageContext()];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.