IOS4 note 16 (4) CGImage
CGImage
?
The Core Graphics version of UIImage is CGImage (actually a CGImageRef). They are?easily converted to one another: a UIImage has a CGImage property that accesses its?Quartz image data, and you can make a UIImage from a CGImage using imageWithCGImage: or initWithCGImage:.
?
A CGImage lets you create a new image directly from a rectangular region of the image.(It also lets you apply an image mask, which you can’t do with UIImage.) I’ll demonstrate by ?splitting ?the ?image of Mars ?in half and drawing ?the ?two halves ?separately:
UIImage* mars = [UIImage imageNamed:@"Mars.png"];
// extract each half as a CGImage
CGSize sz = [mars size];
CGImageRef marsLeft = CGImageCreateWithImageInRect([mars CGImage],
? ? ? ? ? ? ? ? ??? ? ? CGRectMake(0,0,sz.width/2.0,sz.height));
CGImageRef marsRight = CGImageCreateWithImageInRect([mars CGImage],? ??? ? ?? ? ? ? ? ? ? ? ??CGRectMake(sz.width/2.0,0,sz.width/2.0,sz.height));
// draw each CGImage into an image context
UIGraphicsBeginImageContext(CGSizeMake(sz.width*1.5, sz.height));
?
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextDrawImage(con, CGRectMake(0,0,sz.width/2.0,sz.height), marsLeft);
CGContextDrawImage(con, CGRectMake(sz.width,0,sz.width/2.0,sz.height), marsRight);
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRelease(marsLeft); CGImageRelease(marsRight);
?
?
As already mentioned, Core Graphics functions that operate in a graphics context require us to specify this context; our call to UIGraphicsBeginImageContext did not supply?us with a reference to the resulting context,but it did make the resulting context the?current context, which we can always obtain through UIGraphicsGetCurrentContext.?Observe also that we must ?follow the appropriate memory management rules ?for C?functions: wherever we generate something ?through a ?function with “Create” in its?name, we later call the corresponding “Release” function.
?
But there’s a problem with the previous example: the drawing is upside-down. It isn’t?rotated; it’s mirrored top to bottom, or, to use the technical term, flipped. This phenomenon can arise when you create a CGImage and then draw ?it with CGContextDrawImage and is due to a mismatch in the native coordinate systems of the source?and target contexts.
?
There are various ways of compensating for this mismatch between the coordinate?systems. One is to draw the CGImage into an intermediate UIImage and extract another CGImage from that.?
Utility for flipping an image drawing:
CGImageRef flip (CGImageRef im) {
? ? CGSize sz = CGSizeMake(CGImageGetWidth(im), CGImageGetHeight(im));
? ? UIGraphicsBeginImageContext(sz);
? ? CGContextDrawImage(UIGraphicsGetCurrentContext(),
? ??CGRectMake(0, 0, sz.width, sz.height),
? ??im);
? ? CGImageRef result = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
? ? UIGraphicsEndImageContext();
? ? return result;
}
Armed with the utility function, we can now draw the halves of?Mars the right way up in the previous example:
CGContextDrawImage(con, CGRectMake(0,0,sz.width/2.0,sz.height), flip(marsLeft));
CGContextDrawImage(con, CGRectMake(sz.width,0,sz.width/2.0,sz.height), flip(marsRight));
?
?
Why Flipping Happens
?
The ultimate source of accidental flipping is that Core Graphics comes from the Mac?OS X world, where the coordinate system’s origin is located by default at the bottom?left and ?the positive y-direction is upward, whereas on iOS the origin is located by?default at the top left and the positive y-direction is downward. In most drawing situations, no problem arises, because the coordinate system of the graphics context is?adjusted ?to compensate. Thus, the default coordinate system for drawing in a Core?Graphics context on iOS has the origin at the top left, just as you expect. But creating?and drawing a CGImage exposes the issue.
?
?
?
Another solution is to wrap the CGImage in a UIImage and draw using the UIImage?drawing methods discussed in the previous section. Those same two lines might then?be replaced with this:
[[UIImage imageWithCGImage:marsLeft] drawAtPoint:CGPointMake(0,0)];
[[UIImage imageWithCGImage:marsRight] drawAtPoint:CGPointMake(sz.width,0)];
?
?
?
?
Yet another solution is to apply a transform to the graphics context before drawing the?CGImage, effectively flipping the context’s internal coordinate system. This is elegant,?but can be confusing if there are other transforms in play.?
?
A further problem is that our code draws incorrectly on a high-resolution device if there?is a high-resolution version of our image file. The reason is that a UIImage has a?scale property, but a CGImage doesn’t. When you call a UIImage’s CGImage method,?therefore, you can’t assume that the resulting CGImage is the same size as the original?UIImage; a UIImage’s size property is the same for a single-resolution image and its?double-resolution counterpart, but the CGImage of a double-resolution image is twice?as large in both dimensions as the CGImage of the corresponding single-resolution?image.
?
So, in extracting a desired piece of the CGImage, we must either multiply all appropriate?values by the scale or express ourselves in terms of the CGImage’s dimensions. In this?case, as we are extracting the left and right halves of the image, the latter is obviously?the simpler course. So here’s a version of our original code that draws correctly on either?a single-resolution or a double-resolution
device:
?
UIImage* mars = [UIImage imageNamed:@"Mars.png"];
CGSize sz = [mars size];
// Derive CGImage and use its dimensions to extract its halves
CGImageRef marsCG = [mars CGImage];
CGSize szCG = CGSizeMake(CGImageGetWidth(marsCG), CGImageGetHeight(marsCG));
CGImageRef marsLeft = CGImageCreateWithImageInRect(marsCG,
? ? ? ? ? ? ? ? ? ? ? ?CGRectMake(0,0,szCG.width/2.0,szCG.height));
CGImageRef marsRight = CGImageCreateWithImageInRect(marsCG,
? ? ? ? ? ? ? ? ? ? ? ? CGRectMake(szCG.width/2.0,0,szCG.width/2.0,szCG.height));
// Use double-resolution graphics context if possible
?
UIGraphicsBeginImageContextWithOptions(CGSizeMake(sz.width*1.5, sz.height), NO, 0.0);
// The rest is as before, calling flip() to compensate for flipping
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextDrawImage(con, CGRectMake(0,0,sz.width/2.0,sz.height), flip(marsLeft));
CGContextDrawImage(con, CGRectMake(sz.width,0,sz.width/2.0,sz.height), flip(marsRight));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRelease(marsLeft); CGImageRelease(marsRight);
?
Our flip compensation utility works here, but our other solution does?not. If you’re doing to derive a UIImage from a CGImage where scale matters, you have?to provide the scale by calling imageWithCGImage:scale:orientation (only on iOS 4.0?or later) instead of imageWithCGImage:. So our second solution now looks like this:
[[UIImage imageWithCGImage:marsLeft
? ? ? ? ? ? ? ? ?? ?? ? ?scale:[mars scale]
? ? ? ? ? ? ? ?? ? ? ?orientation:UIImageOrientationUp]
drawAtPoint:CGPointMake(0,0)];
[[UIImage imageWithCGImage:marsRight
? ? ? ? ? ?? ? ? ? ? ? ?scale:[mars scale]
? ? ? ? ? ? ? ?? ? ? ?orientation:UIImageOrientationUp]
? ?? ? ?drawAtPoint:CGPointMake(sz.width,0)];
?
?
