Mask arbitrarily sized UIImageView with resizable UIImage mask

Question

Current code:

    self.backgroundImageView.image = [self.message imageOfSize:self.message.size]; // Random image, random size

    UIImage *rightBubbleBackground = [[UIImage imageNamed:@"BubbleRight"]
    resizableImageWithCapInsets:BubbleRightCapInsets
    resizingMode:UIImageResizingModeStretch];

    CALayer *mask = [CALayer layer];
    mask.contents = (id)[rightBubbleBackground CGImage];

    mask.frame = self.backgroundImageView.layer.frame;
    self.backgroundImageView.layer.mask = mask;
    self.backgroundImageView.layer.masksToBounds = YES;

This does not work properly. Though the mask is applied, the rightBubbleBackground does not resize correctly to fit self.backgroundImageView, even though it has resizing cap insets (BubbleRightCapInsets) set.

Original Image:

Original image

Mask image (rightBubbleBackground):

Mask

Result:

Result

I found this answer but it only works for symmetrical images. Maybe I could modify that answer for my use.

I think `mask.frame = self.backgroundImageView.layer.frame;` should be `mask.frame = self.backgroundImageView.layer.bounds;`. Using your code will result in a shift of the mask if the layer's frame is not equal to bounds. — PowerQian, Apr 15 '14 at 08:27

score 10 · Accepted Answer · edited May 23 '17 at 12:25

10

I was wrong. That answer can be modified to work for asymmetrical images. I worked on that answer a bit and solved my own problem.

The following code made my cap insets work for the mask layer:

mask.contentsCenter =
CGRectMake(BubbleRightCapInsets.left/rightBubbleBackground.size.width,
BubbleRightCapInsets.top/rightBubbleBackground.size.height,
1.0/rightBubbleBackground.size.width,
1.0/rightBubbleBackground.size.height);

Result:

Result

edited May 23 '17 at 12:25

Community

1
1

answered Dec 08 '13 at 12:34

duci9y

4,128
3
26
42

what is the value of BubbleRightCapInsets .. i use this UIEdgeInsets BubbleRightCapInsets = UIEdgeInsetsMake(15.0f,20.0f, 15.0f, 20.0f); – MANCHIKANTI KRISHNAKISHORE Oct 07 '14 at 10:18
@MANCHIKANTIKRISHNAKISHORE I have since redesigned the app and no longer remember the insets. You should use a greater value for `right` though, to account for the arrow, and perhaps `bottom` too. – duci9y Oct 07 '14 at 22:24
Just add that for retina support `mask.contentsScale = rightBubbleBackground.scale` – Jeremy Piednoel Jun 21 '16 at 18:18
hmm... what contentsGravity have you used ? How do you resize the layer to the size of the penguin image ? Can you show us the whole set of codes around contents ? Lastly what if the image is smaller than the bubble ? what happens then? – slimbikr Jun 28 '16 at 07:45
@ironclap This was too long ago, so I do not remember much of the details. But I believe `contentsGravity` was left default. And if the image was smaller than the bubble, the image stretched to fill the bubble's size. – duci9y Jun 29 '16 at 09:23
@duci9y thanks... I ended up using bezierpath to redo bubble. Easier to engineer than to draw those bubbles using illustrator :-). Thanks anyways. – slimbikr Jun 30 '16 at 06:34

score 0 · Answer 2 · answered Oct 29 '14 at 21:34

I had (part of) the same problem - i.e. the pixelated layer contents. For me it was solved by setting the contentsScale value on the CALayer - for some reason the default scale on CALayers is always 1.0, even on Retina devices.

i.e.

layer.contentsScale = [UIScreen mainScreen].scale;

Also, if you're drawing a shape using CAShapeLayer and wondering its edges look a little jagged on retina devices, try:

shapeLayer.rasterizationScale = [UIScreen mainScreen].scale;
shapeLayer.shouldRasterize = YES;

Mask arbitrarily sized UIImageView with resizable UIImage mask

2 Answers2