在UIView中绘制三角形切口用于选择指示

Question

我正在创建一个视图，用作我的应用的类别选择器。我希望它有一个切口三角形作为选择指示，如下图所示：

“>

我不确定如何绘制三角形，以便将其作为切口，以显示下面的主视图。下面的主视图很可能具有一个自定义的，可能是非重复的（我尚未决定）图像作为背景。另外，当选择更改时，我希望三角形可以动画到新位置，这会使事情变得更加复杂。

我意识到子视图可以使动画更容易，但是会使图形复杂化；直接绘制可能会使动画更加困难。而且我对Quartz不太熟悉，所以我不确定如何使用直接绘制路线。

提前感谢！

更新：

我看过马特·加拉格尔（Matt Gallagher）在drawing shapes with holes上的帖子，但它并不能真正回答我的问题。有没有办法让我“看到”形状中某个特定路径下面的内容并进行复制？ …然后支持动画制作？

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

我正在创建一个视图，用作我的应用的类别选择器。我希望它有一个切口三角形作为选择指示，如下图所示：我不确定如何绘制三角形，以便...

Answer 1

您看过CAShapeLayer吗？您可以为选择窗格创建一个路径，该路径定义整个轮廓，包括需要遮盖的每种状态的三角形的排除。然后，如果要在图像中显示轮廓，则可以通过设置lineWidth和strokeColor属性来描边图层。那应该能够给您您所需要的。 CAShapeLayer中的path属性是可设置动画的，这意味着您只需设置path属性即可创建动画（假设您的图层是视图的子图层而不是根图层）。