Composite Images using Image Masks — 11 Comments

  1. This is a great article. Thank you. I found that it doesn’t draw correctly on the Retina display. I added CGFloat scale = [[UIScreen mainScreen] scale]; to the top of the various methods and multiply (width, height, offset) by the scale to adjust the sizes and then everything looks good. Is that the right way to go it? I don’t know any other way of determining retina than [[UIScreen mainScreen] scale].

  2. Hi Marc. I’m surprised you had to make this edit. I built the app and ran it without issue on all the simulators and on my Retina iPhone4. The display appeared just like the screenshot in the article. Interesting that adjusting by the scale factor would “fix” this (it makes sense). At least for me, however, that isn’t needed. Weird, to say the least. I am using the latest Xcode (4.5.x), iOS6, etc. You?

  3. Hi. I am running the latest OS X, Xcode, and iOS 6. Here are two screen shots of the 3.5″ Retina display simulator when run with scaling applied and without.
    You can see the difference. My simulator was set to pre-retina iPhone and it looked great. When I switched to retina, the image got jagged. I’ve seen scaling applied in other places which is what made me think of it.

  4. Ah! I see what you’re saying.

    I was going to chalk this up to running in the simulator, because unless you have a Retina MacBook Pro, your Mac’s display is not a Retina display. So why would you expect to see Retina resolution in the simulator?

    However, I did some digging, and there is a better way to fix this. In both doughnut methods replace the lines like this:

    UIImage *image = [UIImage imageWithCGImage:imageRef];

    with this:

    UIImage *image = [UIImage imageWithCGImage:imageRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];

    Now, interestingly, this method creates images both of the correct scale and visual size for the composite “doughnut” images. But when +imageWithCGImage:scale:orientation: is used for the basic pattern image (the diamond), the resulting image for Retina displays is half size. I am not sure why that is…

    But the above change for the composite images definitely yields a nicer image.

  5. My pleasure. Thank YOU for your input. It’s nice to know that a) someone reads these posts, and b) finds them interesting or useful. 🙂

  6. By the way, the docs say that CoreGraphics handles scaling issues automatically. So I am a little confused why anything special is needed. It may be that for the “simple” pattern image, CG is doing what it says it should be doing, and there is something unusual about the composite images for which CG cannot do its magic automatically. I’ll have to look into that more deeply (unless someone knows the answer and posts a comment here. 🙂

  7. Marc: You were actually on the right track. It turns out (of course) Retina images are always 2x bigger! So my little demo should take that into account automatically based on the mainScreen scale. The second part of this is to return an image with an appropriate scale value. Then there will be no difference, I suspect, based on the way the image is created (composite or not). I’ll work on this so the solution is generic and seamless. Thanks for highlighting this nuance of dealing with Retina displays when creating your own images on the fly. It’s an important one!

  8. Hi Marcel,

    Thanks for writing that blog post! It’s really awesome to see someone “pick up the ball” and expand on a topic to help everyone learn even more. Great stuff!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: