iOS - 如何在视图中绘制透明三角形

Question

我正在尝试使用指向标签栏视图的透明三角形来创建自定义标签栏.

现在我在drawRect方法中为此选项卡栏的背景绘制线性渐变和光泽.我只需要在那里添加透明三角形.我知道如何绘制三角形.我只需要知道如何使其透明以显示标签栏视图下方的背景.

有人知道怎么做吗？

更新

这是当前的代码:

void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor) 
{    
    drawLinearGradient(context, rect, startColor, endColor);

    CGColorRef glossColor1 = [UIColor colorWithRed:1.0 green:1.0 
                                          blue:1.0 alpha:0.35].CGColor;
    CGColorRef glossColor2 = [UIColor colorWithRed:1.0 green:1.0 
                                          blue:1.0 alpha:0.1].CGColor;

    CGRect topHalf = CGRectMake(rect.origin.x, rect.origin.y, 
                            rect.size.width, rect.size.height/2);

    drawLinearGradient(context, topHalf, glossColor1, glossColor2);

}

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef  endColor) 
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)startColor, (__bridge id)endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextSaveGState(context);
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace); 
}
- (void)drawTriangle
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGPoint pt1 = CGPointMake(0.0f, 0.0f);
    CGPoint pt2 = CGPointMake(10.0f, 10.0f);
    CGPoint pt3 = CGPointMake(20.0f, 0.0f);

    CGPoint vertices[] = {pt1, pt2, pt3, pt1};

    CGContextBeginPath(context);
    CGContextAddLines(context, vertices, 3);
    CGContextClosePath(context);
    CGContextClip(context);
}

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();    


    CGColorRef lightColor = [UIColor colorWithRed:65.0f/255.0f green:64.0f/255.0f 
                                         blue:66.0f/255.0f alpha:1.0].CGColor;
    CGColorRef darkColor = [UIColor colorWithRed:37.0/255.0 green:31.0/255.0 
                                        blue:32.0/255.0 alpha:1.0].CGColor;

    [self drawTriangle];

    CGRect viewRect = self.bounds;

    drawGlossAndGradient(context, viewRect, lightColor, darkColor); 
}

我添加了下面建议的剪辑,但只是使我的背景渐变,光泽消失了,三角形变成了灰色.有谁知道我在做错了什么？

Answer 1

如果在drawRect:方法中绘制此渐变,则只需在其前面添加剪切路径.

例:

-(void)drawRect:(CGRect)rect {
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  CGPoint vertices[] = {coordinates of vertices};

  CGContextBeginPath(ctx);
  CGContextAddLines(ctx, vertices, sizeof(vertices)/sizeof(CGPoint));
  CGContextClosePath(ctx);
  CGContextClip(ctx);

  // draw the gradient
}

顶点 - 是一个有7个点的数组.self.bounds每个角落1个点,定义三角形的3个点.

例如:

   (0)  (1)  (3)           (4)
     _____   ________________
    |     \ /               |
    |      V                |
    |     (2)               |
(6) |_______________________|(5)

CGPoint vertices[7] = {CGPointZero, // origin
                       p1, p2, p3, // vertices of the triangle
                       {self.bounds.size.width, 0},
                       {self.bounds.size.width, self.bounds.size.height},
                       {0, self.bounds.size.height}
}