Question

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!

Answer 1

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();