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}
}

Answer 2

如果有人需要，这是一个在不使用UIImageView的情况下在UITableView中绘制彩色三角形的代码。这种方法很好，因为三角形的大小可以变化，而且是通过编程绘制的。此外，您可以更改颜色并使三角形透明。

@implementation RRTriangleView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
      CGMutablePathRef path = CGPathCreateMutable();
      CGPathMoveToPoint(path, NULL, 0.0, 0.0);
      CGPathAddLineToPoint(path, NULL, - self.bounds.size.height / 2.0, self.bounds.size.height / 2.0);
      CGPathAddLineToPoint(path, NULL, 0.0, self.bounds.size.height);
      CGPathAddLineToPoint(path, NULL, 0.0f, 0.0f);
      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      [shapeLayer setPath:path];
      [shapeLayer setFillColor:[COLOR_CUSTOM_LIGHT_BLUE CGColor]];
      [shapeLayer setStrokeColor:[COLOR_CUSTOM_LIGHT_BLUE CGColor]];
      [shapeLayer setPosition:CGPointMake(self.bounds.size.width, 0.0f)];
      [[self layer] addSublayer:shapeLayer];
      CGPathRelease(path);
    }
    return self;
}

初始化这个三角形视图并将其添加到您的单元格中，当它被选中时：

- (RRTriangleView *)triangleView
{
  if (! _triangleView) {
    _triangleView = [[RRTriangleView alloc] initWithFrame:self.bounds];
    _triangleView.layer.backgroundColor = [[UIColor clearColor] CGColor];
    _triangleView.clipsToBounds = NO;
  }
  return _triangleView;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
  //[super setSelected:selected animated:animated];
  if (selected) {
    [self addSubview:self.triangleView];
  }
  else {
    [self.triangleView removeFromSuperview];
  }
}

triangleView的大小与单元格的视图相似，它是透明的，并且绘制在上面。

Answer 3

我认为

[view setBackgroundColor:[UIColor clearColor]];
[view setOpaque:NO];

将使您的视图透明。