Overlay UIImageViews with Multiply blend mode?

Question

I have 2 UIImageViews that are shown on top of each other. One of them can be dragged around using a Gesture Recognizer.

Is there a way that the ImageViews can be rendered using a blend mode like Multiply? Such that when they move on top of each, they get rendered with that blend mode?

Answer 1

You have to override the drawRect: function on the parent view, in order to achieve something like this:

   - (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    [image1.image drawInRect:image1.frame blendMode:kCGBlendModeMultiply alpha:1];
    [image2.image drawInRect:image2.frame blendMode:kCGBlendModeMultiply alpha:1];
    [super drawRect:rect];
}

What it does is grab the current graphicsContext, and draws the two images into it, using a multiply blend mode.

To be able to see this, you'll need to set the alpha of the two images to 0, or the newly drawn content will be obscured. Since the parent view is redrawing them, you'll see the resulting multiplied versions.

Also, whenever the images' positions get updated, you'll need to call setNeedsDisplay on the parent view, to force it to call drawRect once again.

I'm certain there are probably more efficient ways to utilize Quartz 2D to achieve what you want, but this is probably the simplest.