Draw triangle cutout for selection indication in UIView?

You can create a path for your selection pane that defines the whole outline including the exclusion of the triangle for each state you need to mask. You can then stroke the layer if you want the outline you're showing in your image by setting the lineWidth and strokeColor properties. That should be able to give you what you need.

The path property in the CAShapeLayer is animatable which means that all you have to do is set the path property and it will animate (assuming your layers are sublayers of the view and not the root layer).

Up vote 2 down vote favorite share g+ share fb share tw.

I'm creating a view that serves as a category selector for my app. I'd like it to have a cutout triangle as the selection indication, as in this image: I'm not sure how to draw the triangle so that it is a cutout, revealing the main view underneath. The main view underneath will most likely have a custom, possibly non-repeating (I haven't decided yet) image as its background.

In addition, I would like the triangle to animate to a new location when the selection changes, which further complicates things a bit. I realize a subview would make the animation easier, but would complicate the drawing; direct drawing would probably make the animation a bit harder. And I'm not too familiar with Quartz, so I'm not sure how to go with the direct drawing route.

Thanks in advance! Update: I've looked at Matt Gallagher's post on drawing shapes with holes, but it doesn't really answer my question. Is there a way for me to "see" what's underneath a certain path within my shape, and copy that?

…And then support animating it? Update 2: I've done a partial job by simply drawing an additional path. The result looks like this: dl.dropbox.com/u/7828009/Category%20Sele... The code: CGRect cellRect = self rectForCategoryNumber:(selectedCategoryIndex + 1); UIColor scrollViewTexturedBackgroundColor setFill; CGContextMoveToPoint(currentContext, self.frame.size.

Width, (cellRect.origin. Y + cellRect.size. Height * 0.15)); CGContextAddLineToPoint(currentContext, self.frame.size.

Width, (cellRect.origin. Y + cellRect.size. Height * 0.65)); CGContextAddLineToPoint(currentContext, self.frame.size.

Width * 0.8, (cellRect.origin. Y + cellRect.size. Height * 0.4)); CGContextClosePath(currentContext); CGContextFillPath(currentContext); UIColor darkGrayColor setStroke; CGContextSetLineCap(currentContext, kCGLineCapRound); CGContextMoveToPoint(currentContext, self.frame.size.

Width, (cellRect.origin. Y + cellRect.size. Height * 0.15)); CGContextAddLineToPoint(currentContext, self.frame.size.

Width * 0.8, (cellRect.origin. Y + cellRect.size. Height * 0.4)); CGContextSetLineWidth(currentContext, 2.5); CGContextStrokePath(currentContext); UIColor lightGrayColor setStroke; CGContextMoveToPoint(currentContext,self.frame.size.

Width * 0.8, (cellRect.origin. Y + cellRect.size. Height * 0.4)); CGContextAddLineToPoint(currentContext, self.frame.size.

Width, (cellRect.origin. Y + cellRect.size. Height * 0.65)); CGContextSetLineWidth(currentContext, 1.0); CGContextStrokePath(currentContext); Obviously, in this case it only works because I'm using the same fill color in both cases; I'd like to eliminate this dependency if possible.

Also, of course I'd like to animate the position of that triangle. Update 3: What I tried to do to animate: static CALayer *previousLayer = nil; static CGMutablePathRef previousPath = nil; // … Get context, etc. CAShapeLayer *shapeLayer = CAShapeLayer alloc init; shapeLayer. Path = shapePath; shapeLayer setFillColor:UIColor redColor CGColor; shapeLayer setStrokeColor:UIColor blackColor CGColor; shapeLayer setBounds:self.

Bounds; shapeLayer setAnchorPoint:self.bounds. Origin; shapeLayer setPosition:self.bounds. Origin; if (previousPath) { // Animate change CABasicAnimation *animation = CABasicAnimation animationWithKeyPath:@"changePath"; animation.

Duration = 0.5; animation. FromValue = (id)previousPath; animation. ToValue = (id)shapePath; shapeLayer addAnimation:animation forKey:@"animatePath"; previousPath = shapePath; } if (previousLayer) previousLayer removeFromSuperlayer; previousLayer = shapeLayer; self.

Layer addSublayer:shapeLayer; ios cocoa-touch core-animation core-graphics link|improve this question edited Oct 12 '11 at 1:59 asked Oct 2 '11 at 12:39Inspire483,3921519 100% accept rate.

You can create a path for your selection pane that defines the whole outline including the exclusion of the triangle for each state you need to mask. You can then stroke the layer if you want the outline you're showing in your image by setting the lineWidth and strokeColor properties. That should be able to give you what you need.

The path property in the CAShapeLayer is animatable which means that all you have to do is set the path property and it will animate (assuming your layers are sublayers of the view and not the root layer). Best Regards. Update With Code This code: - (void)viewDidLoad { super viewDidLoad; self view setBackgroundColor:UIColor blueColor; CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path,NULL,0.0,0.0); CGPathAddLineToPoint(path, NULL, 160.0f, 0.0f); CGPathAddLineToPoint(path, NULL, 160.0f, 100.0f); CGPathAddLineToPoint(path, NULL, 110.0f, 150.0f); CGPathAddLineToPoint(path, NULL, 160.0f, 200.0f); CGPathAddLineToPoint(path, NULL, 160.0f, 480.0f); CGPathAddLineToPoint(path, NULL, 0.0f, 480.0f); CGPathAddLineToPoint(path, NULL, 0.0f, 0.0f); CAShapeLayer *shapeLayer = CAShapeLayer layer; shapeLayer setPath:path; shapeLayer setFillColor:UIColor redColor CGColor; shapeLayer setStrokeColor:UIColor blackColor CGColor; shapeLayer setBounds:CGRectMake(0.0f, 0.0f, 160.0f, 480); shapeLayer setAnchorPoint:CGPointMake(0.0f, 0.0f); shapeLayer setPosition:CGPointMake(0.0f, 0.0f); self view layer addSublayer:shapeLayer; CGPathRelease(path); } results in this display: And you can download the sample project here: http://cl.ly/3J1B1f1l2423142l3X35.

When I do a self. Layer addSublayer:shapeLayer the whole view turns black. I'd like to by able to work with the layer almost as an independent "view" that doesn't interfere with the rest of the view.

– Inspire48 Oct 8 '11 at 15:19 I'm not sure exactly what you're doing. You can set the fill color to anything you want. You can also use the shape layer as a mask by calling setMask on the layer you want to mask passing it your shape layer.

Keep in mind that a mask allows through anything that is "masked". It has always felt backwards to me, but that's the way it works. – Matt Long 8 Oct at 16:13 Could you provide me with some sample code that would replicate the example above?

I'm just getting into CALayers for this project and I'd appreciate the help. – Inspire48 Oct 10 '11 at 0:41 I updated my answer with code. Let me know if you need more clarification.

– Matt Long 8 Oct at 15:25 Well, thanks; it draws correctly (up vote for that). But I can't get the change to animate (updated my question with what I attempted to do). Also, it's covering content that I'm already drawing as well as UILabels—is there a way to put the layer behind existing content?

– Inspire48 Oct 12 '11 at 1:56.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.