create "negative" rounded rect

melmoup · 01-25-2012, 01:04 PM

Hi,
I would like to create a rect with Bezier Path that is transparent inside but it keep colored opaque angles.
Basically it should be the negation of a rounded rect, I'll use it as a view to put on top of a rect UIImage view to make it look rounded.
Thanks

Duncan C · 01-25-2012, 01:18 PM

Quote:

Originally Posted by melmoup

Hi,
I would like to create a rect with Bezier Path that is transparent inside but it keep colored opaque angles.
Basically it should be the negation of a rounded rect, I'll use it as a view to put on top of a rect UIImage view to make it look rounded.
Thanks

It sounds like you want a mask that will hide the outer part of an image, but reveal a rounded rectangle shape on the inside.

There will be problems with that. The mask you create will cover not just the image view, but everything else on your window, which won't look right.

You would be better off to create a layer object, set it to the bounds you want, set it with rounded corners at the radius you want, and then install that layer as the mask layer of your image view. That will mask away everything but the rounded rectangle shape defined by the layer, without obscuring the other contents of your window.

Something like this:

Say I have an image view anImageView and I want to create a mask that's inset by 20 pixels on all sides and has rounded corners:

Code:

CGRect roundedRect = anImageView.bounds;
roundedRect = CGRectinset(roundedRect, 20, 20);
CALayer mask = [CALayer layer];
mask.bounds = imageRect;
mask.backgroundColor = [[UIColor whiteColor] CGColor]; //any opaque color works
mask.cornerRadius = 20;  //Adjust to taste
anImageView.layer.mask = mask;

That should do it. I did not compile the code above, much less test it. It might have minor typos or other mistakes in it. It's intended as a guide, not copy-and-paste-ready code.

EDIT: Note that there is special type of layer, a CAShapeLayer, that uses a CGPath to define the shape of the layer. You can use that to describe any shape that you can create with a CGPath. A Bezier path is essentially a UIKit wrapper around a CGPath; a bezier path has a CGPath property that lets you get the underlying CGPath from a bezier path, and you can use that as the path object for a CAShapeLayer. You can make a CAShapeLayer the mask for a layer. This is really, really powerful.

melmoup · 01-25-2012, 01:50 PM

Thanks, I'll try that.
Actually I'm trying to avoid using layer in there, I tried on a UIImageView in a custom table cell and the following code slowed down scrolling (at least on a old iPhone 3G)

Code:

CALayer * l = [itemPicture layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];

Duncan C · 01-25-2012, 02:18 PM

Quote:

Originally Posted by melmoup

Thanks, I'll try that.
Actually I'm trying to avoid using layer in there, I tried on a UIImageView in a custom table cell and the following code slowed down scrolling (at least on a old iPhone 3G)

Code:

CALayer * l = [itemPicture layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];

The iPhone 3G is a dinosaur in terms of it's graphics hardware. It does not have much in the way of hardware graphics acceleration.

You can't extrapolate about performance on the 3G to determine the performance on newer hardware.

I recommend dropping the 3G and the old 2nd gen iPod touch from your supported products. It makes life much easier.

Note that you could quite easily use the code that I posted to create a cropped version of your image, cropped to your rounded rectangle, and then use that directly.

All you'd have to do is to create an offscreen context sized for the cropped image, render the cropped layer into the context, and then ask for an image from the context. It's about 4 more lines of code.

melmoup · 01-25-2012, 03:42 PM

yep, but now it's really a challenge to make it as fast as possible.
Somewhere I was suggested that the primary problem with the approach with layer and corner radius is that it forces an offscreen render of the contents, which is very slow (especially when you have a lot of them).
So my idea was keep my image in a UIImageView, taking advantage of a UIImageView category for fetching the jpgs asyncronously that set as the imageview image when completed.
So always having a View on top could work.

Otherwise I could draw the UIImage in the drawRect clipping to a mask.