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

私はクリップが以下の提案が、それは単に勾配と光沢dissappearとグレーになる三角形と私の背景を作りました。誰も私がここで間違っていることを知っていますか？

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

私は

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

はあなたのビューが透明になることを信じて。

Answer 3

誰もが必要な場合、これはUIImageViewを使用せずのUITableViewにおける着色三角形を描画するためのコードです。このメソッドは、三角形のサイズが変わる可能性があり、プログラム的に描画されるため、良い方法です。また、色を変えて三角形を透明にすることもできます。このTriangleView初期

@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のサイズがあなたのセルのビューのようなものです、それは透明であり、それは上記の描かれています。