Я создаю представление, которое служит селектором категории для моего приложения. Мне бы хотелось, чтобы в качестве индикатора выбора был вырезанный треугольник, как на этом изображении:

Я не уверен, как нарисовать треугольник так, чтобы это был вырез, открывая основной вид внизу. Основной вид снизу, скорее всего, будет иметь собственное, возможно, неповторяющееся (я еще не решил) изображение в качестве фона. Кроме того, я хотел бы, чтобы треугольник анимировался в новом месте при изменении выделения, что еще больше усложняет ситуацию.

Я понимаю, что подпредставление облегчило бы анимацию, но усложнило бы рисование; прямое рисование, вероятно, сделает анимацию немного сложнее. И я не слишком знаком с Кварцем, поэтому я не уверен, как идти по маршруту прямого рисования.

Заранее спасибо!

Обновить: Я посмотрел на пост Мэтта Галлахера нарисование фигур с отверстиями, но это на самом деле не отвечает на мой вопрос. Есть ли способ для меня, чтобы «увидеть», что находится под определенным путем в моей форме, и скопировать это? ... а потом поддержите анимацию?

Обновление 2: Я сделал частичную работу, просто нарисовав дополнительный путь. Результат выглядит так:http://dl.dropbox.com/u/7828009/Category%20Selector.mov

Код:

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);

Очевидно, что в этом случае это работает только потому, что я использую один и тот же цвет заливки в обоих случаях; Я хотел бы устранить эту зависимость, если это возможно. Также, конечно, я бы хотел оживить положение этого треугольника.

Обновление 3: Что я пытался сделать, чтобы оживить:

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];