Search code examples
iosuiimageviewmaskingclipping

iOS UIImageView clip/mask image


Basically, I am making a view that has two images. Image one is shown in a right triangle that takes up the top left of the view, and image two takes the up the right triangle that takes up the bottom right.

Imagine a square cut diagonally, a different image exists in each resulting half.

I've been reading a lot about masks, but I don't want to use another image to mask these images.

I'm looking for a way to give it 3 points, which form that triangle, and then have it clip the image that way.

I feel like this is probably easy to do in Coregraphics, I'm just missing the calls I think.

Any help is greatly appreciated!


Solution

  • Here's one way, using clipping paths on an image context. The example is for an image size of 256 x 256, but you should easily be able to adapt it to your needs.

    UIGraphicsBeginImageContext(CGSizeMake(256, 256));
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, 256); 
    CGContextConcatCTM(context, flipVertical);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 0, 256);
    CGContextAddLineToPoint(context, 256, 256);
    CGContextClosePath(context);
    CGContextSaveGState(context);
    CGContextClip(context);
    CGContextDrawImage(context, CGRectMake(0, 0, 256, 256), [image1 CGImage]);
    CGContextRestoreGState(context);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 256, 0);
    CGContextAddLineToPoint(context, 256, 256);
    CGContextClosePath(context);
    CGContextSaveGState(context);
    CGContextClip(context);
    CGContextDrawImage(context, CGRectMake(0, 0, 256, 256), [image2 CGImage]);
    CGContextRestoreGState(context);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // image contains the result
    UIGraphicsEndImageContext();