Question

I’m using this code to colorize some images of a UIButton subclass:

UIImage *img = [self imageForState:controlState];

// begin a new image context, to draw our colored image onto
UIGraphicsBeginImageContextWithOptions(img.size, NO, 0.0f);
// get a reference to that context we created
CGContextRef context = UIGraphicsGetCurrentContext();

// set the fill color
[self.buttonColor setFill];

CGContextSetAllowsAntialiasing(context, true);
CGContextSetShouldAntialias(context, true);

// translate/flip the graphics context (for transforming from CG* coords to UI* coords
CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

// set the blend mode to multiply, and the original image
CGContextSetBlendMode(context, kCGBlendModeScreen);
CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
CGContextDrawImage(context, rect, img.CGImage);

// set a mask that matches the shape of the image, then draw the colored image
CGContextClipToMask(context, rect, img.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context,kCGPathFill);

// generate a new UIImage from the graphics context we drew onto
UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

//return the colored image
[self setImage:coloredImg forState:controlState];

But the images come out with rough edges. I’ve tried using screen, lighten, and plusLighter blend modes, because some of the images have white parts that I want to stay white. The only part I want colorized is the black areas. I’ve attached the original button images, and after they’ve been colorized. I can’t get the edges to look good. When I had them as white images that were colorized using multiply blend mode, it looked much better. But I want to use black so I can use one method for colorizing images with and without white in them. I tried with anti-aliasing, that didn’t help either. It looks like it just isn’t anti-aliasing it. I haven’t worked with Core Graphics enough to know what’s up with it.

EDIT
Here’s what the original PNGs look like:

and here’s what it should look like:

and here’s what it does look like:

The size if different, but you can see the bad quality around the edges.

Answer 1

Maybe your original icons (PNGs?) are just “too sharp”? Could you show us? You just draw the image at its original size without resizing, so the problem could be right from the start.