Question

I am trying to make image compare an a very specific way. I’m putting 2 UIImageView one on top of another and i have vertical line that you can drag from left to right and backwards. When user dragging this line i need that the top view will be “transparent” or cropped until that line.
I tried to using crop but it very slow and inaccurate, didn’t manage to do un-crop when dragging the line backwards. Can some one lease point int the wright direction how to make this happen.

Answer 1

This isn’t too difficult but it’s definitely not straightforward. I think I can point you in the right direction.

First you’re going to need to create a CAShapeLayer large enough to cover the top UIImageView. Set this new mask layer as the mask of the layer of your top-most image view.

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.path = [UIBezierPath bezierPathWithRect:topImageView.bounds].CGPath;
topImageView.layer.mask = maskLayer;

Now you’re going to need to change the position of maskLayer to achieved the desired results. I’m assuming that you’re using a UIPanGestureRecognizer to handle dragging the vertical line from left to right and vice versa. In the method that’s triggered by the gesture recognizer, you’re going to inspect the translationInView property and use it’s x value to change the position of mask layer. This will effectively let you move the mask layer around with your finger and will begin to hide portions of the top image view and let the bottom one show from beneath.