5

I have a set of views in a carousel, each using a CAGradientLayer as a background. The carousel sits over a textured background. I've been asked for the background to poke up in a triangle to show the selected view. I can't just use a triangular image with the background texture, as it won't necessarily match up with the main background. I'd like to cut a notch out of the background of the current view, so that the textured background is visible through the notch.

How should I go about this? Is it possible to make a polygonal layer?

Simon
  • 25,468
  • 44
  • 152
  • 266

3 Answers3

10

I found I was able to do it using a CAShapeLayer:

CAShapeLayer *mask = [[[CAShapeLayer alloc] init] autorelease];
mask.frame = backgroundLayer.bounds;
mask.fillColor = [[UIColor blackColor] CGColor];

CGFloat width = backgroundLayer.frame.size.width;
CGFloat height = backgroundLayer.frame.size.height;

CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path, nil, 0, 0); 
CGPathAddLineToPoint(path, nil, width, 0);
CGPathAddLineToPoint(path, nil, width, height);
CGPathAddLineToPoint(path, nil, (width/2) + 5, height);
CGPathAddLineToPoint(path, nil, width/2, height - 5);
CGPathAddLineToPoint(path, nil, (width/2) - 5, height);
CGPathAddLineToPoint(path, nil, 0, height);
CGPathAddLineToPoint(path, nil, 0, 0);
CGPathCloseSubpath(path);

mask.path = path;
CGPathRelease(path);

backgroundLayer.mask = mask;
jimpic
  • 5,360
  • 2
  • 28
  • 37
Simon
  • 25,468
  • 44
  • 152
  • 266
0

I don't think that we can draw polygonal layers. However, I believe that the expected result can be achieved using two different ways:-

  1. If your images are of the same size then you can use a PNG image with transparent notch in between (or outside as per your desire).

  2. Draw a filled rectangle and transparent triangular polygon. Then you need to intersect both the polygon (rectangle and triangle). The resulted Shape should be placed over the carousel image. The benefit of this method is that you can dynamically change the size and shapes of the polygons if required.

Hope this helps!

Cajunluke
  • 3,103
  • 28
  • 28
Paras Mendiratta
  • 11
  • 1
-3

Is it possible to make a polygonal layer?

No.

How should I go about this?

Use a mask - a png image that's the same size as your layer but has a bit cut out - this will make the CALayer appear to have a chunk cut out of it. (However, it won't so if you cut-out is big, you might get users trying to touch whatever is behind it, which won't work!).

See the documentation (and search stackoverflow) for more details.

Community
  • 1
  • 1
deanWombourne
  • 38,189
  • 13
  • 98
  • 110
  • I can't really use a PNG mask - the view is dynamically sized. – Simon Oct 20 '11 at 11:57
  • Make your mask dynamically using the Quartz drawing APIs - http://www.codeproject.com/KB/iPhone/iOSGetStarted01.aspx – deanWombourne Oct 20 '11 at 12:53
  • This is actually a legitimate answer, since layer per se is always a rectangle (Apple's documentation), so a .png image is a workable solution. – Morgan Wilde May 11 '13 at 18:39
  • Hi, I think it's been downvoted correctly, unfortunately for my reputation! The question explicitly says 'don't use an image' and my answer says 'use an image' so I'm answering the wrong question. SO is more about helpful answers than pedantically correct ones! – deanWombourne May 13 '13 at 11:53