Question

I’ve been looking into this for a while now.

I’m trying to put a gray image over a cup

Currently i’m stretching an uiimageview with a grey background to the amount the slider has gone.

-(void) sliderChanged:(CGFloat) value{
drinksView.grayArea.frame = CGRectMake( 0 , -value ,372 ,value);

I know this is very dirty ,not what i want…

What i want is that the grey part only covers the part where there is a cup (e.g the part where the image is not transparant). The image of the cup just has a transparant background

Does anybody have an idea of how to achieve this ? i’m a noob with masks and many tutorials have led me nowhere and i don’t even know if it’s possible.

P.S: drawing a path around the cup is not possible because the cup image can change to a glass

Answer 1

The easiest way I can think of is to use a masked CALayer. This is what you need to do:

1. Instead of using a UIImageView, use a CALayer with gray background as your overlay. Your sliderChanged: method would remain untouched, except that drinksView.grayArea would be a layer instead of a view.

2. So far the effect will be exactly the same as before. Now, you need to set the grayArea‘s mask. Do the following:

   CALayer * maskLayer = [CALayer new];
   maskLayer.contents = myCupImage.CGImage;
   grayArea.mask = maskLayer;
   

3. I think by default the layer will stretch the content as the scale is changed. We don’t want that. You can fix this by setting the layer’s contentsGravity to, say, kCAGravityTop.

That should do what you want.

One caveat: I’m not quite sure how masks cope with changing content gravity. If you have issues on that front, you can fixed it by adding a container layer:

1. Set a fixed frame for grayArea (equal to the size of the cup image).

2. Instead of adding grayArea directly, introduce a container layer for it:

   CALayer * container = [CALayer new];
   container.masksToBounds = YES;
   [container addSublayer:grayArea];
   [drinksView.layer addSublayer:container];
   

3. In your sliderChanged:, change the frame of container instead of the grayArea.

Hope this works.