繪製三角形iOS

Question

下面的代碼繪製了一個圓，我如何修改現有的代碼來繪製一個三角形呢？

_colorDotLayer = [CALayer layer]; 

    CGFloat width = self.bounds.size.width-6; 
    _colorDotLayer.bounds = CGRectMake(0, 0, width, width); 
    _colorDotLayer.allowsGroupOpacity = YES; 
    _colorDotLayer.backgroundColor = self.annotationColor.CGColor; 
    _colorDotLayer.cornerRadius = width/2; 
    _colorDotLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2); 

Answer 1

實施例的代碼，它是基於該SO Answer其中提請分：

@implementation TriangleView 

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

    int sides = 3; 
    double size = 100.0; 
    CGPoint center = CGPointMake(160.0, 100.0); 

    double radius = size/2.0; 
    double theta = 2.0 * M_PI/sides; 

    CGContextMoveToPoint(context, center.x, center.y-radius); 
    for (NSUInteger k=1; k<sides; k++) { 
     float x = radius * sin(k * theta); 
     float y = radius * cos(k * theta); 
     CGContextAddLineToPoint(context, center.x+x, center.y-y); 
    } 
    CGContextClosePath(context); 

    CGContextFillPath(context);   // Choose for a filled triangle 
    // CGContextSetLineWidth(context, 2); // Choose for a unfilled triangle 
    // CGContextStrokePath(context);  // Choose for a unfilled triangle 
} 

@end 

Answer 2

使用UIBezeierPaths

CGFloat radius = 20; 
CGMutablePathRef path = CGPathCreateMutable(); 
CGPathMoveToPoint(path, NULL, (center.x + bottomLeft.x)/2, (center.y + bottomLeft.y)/2); 
CGPathAddArcToPoint(path, NULL, bottomLeft.x, bottomLeft.y, bottomRight.x, bottomRight.y, radius); 
CGPathAddArcToPoint(path, NULL, bottomRight.x, bottomRight.y, center.x, center.y, radius); 
CGPathAddArcToPoint(path, NULL, center.x, center.y, bottomLeft.x, bottomLeft.y, radius); 
CGPathCloseSubpath(path); 

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithCGPath:path]; 
CGPathRelease(path); 

Answer 3

@implementation TriangleView { 
    CAShapeLayer *_colorDotLayer; 
} 

- (void)layoutSubviews { 
    [super layoutSubviews]; 

    if (_colorDotLayer == nil) { 
     _colorDotLayer = [CAShapeLayer layer]; 
     _colorDotLayer.fillColor = self.annotationColor.CGColor; 
     [self.layer addSublayer:_colorDotLayer]; 
    } 

    CGRect bounds = self.bounds; 
    CGFloat radius = (bounds.size.width - 6)/2; 
    CGFloat a = radius * sqrt((CGFloat)3.0)/2; 
    CGFloat b = radius/2; 
    UIBezierPath *path = [UIBezierPath bezierPath]; 
    [path moveToPoint:CGPointMake(0, -radius)]; 
    [path addLineToPoint:CGPointMake(a, b)]; 
    [path addLineToPoint:CGPointMake(-a, b)]; 
    [path closePath]; 
    [path applyTransform:CGAffineTransformMakeTranslation(CGRectGetMidX(bounds), CGRectGetMidY(bounds))]; 
    _colorDotLayer.path = path.CGPath; 
} 

- (void)awakeFromNib { 
    [super awakeFromNib]; 
    self.annotationColor = [UIColor redColor]; 
} 

@end 

結果：

Answer 4

雖然顯示幾個核芯顯卡的解決方案，我想補充一個基於Core Animation的解決方案。基於我的博客文章

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    UIBezierPath* trianglePath = [UIBezierPath bezierPath]; 
    [trianglePath moveToPoint:CGPointMake(0, view3.frame.size.height-100)]; 
    [trianglePath addLineToPoint:CGPointMake(view3.frame.size.width/2,100)]; 
    [trianglePath addLineToPoint:CGPointMake(view3.frame.size.width, view2.frame.size.height)]; 
    [trianglePath closePath]; 

    CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer]; 
    [triangleMaskLayer setPath:trianglePath.CGPath]; 

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0, size.width, size.height)]; 

    view.backgroundColor = [UIColor colorWithWhite:.75 alpha:1]; 
    view.layer.mask = triangleMaskLayer; 
    [self.view addSubview:view]; 
} 

代碼：http://blog.vikingosegundo.de/2013/10/01/hittesting-done-right/

Answer 5

我覺得比這個解決方案更容易：

UIBezierPath *path = [UIBezierPath new]; 
[path moveToPoint:(CGPoint){20, 0}]; 
[path addLineToPoint:(CGPoint){40, 40}]; 
[path addLineToPoint:(CGPoint){0, 40}]; 
[path addLineToPoint:(CGPoint){20, 0}]; 

// Create a CAShapeLayer with this triangular path 
// Same size as the original imageView 
CAShapeLayer *mask = [CAShapeLayer new]; 
mask.frame = self.viewTriangleCallout.bounds; 
mask.path = path.CGPath; 

這是我的白色三角： 您可以更改點或旋轉，如果你想：

UIBezierPath *path = [UIBezierPath new]; 
[path moveToPoint:(CGPoint){0, 0}]; 
[path addLineToPoint:(CGPoint){40, 0}]; 
[path addLineToPoint:(CGPoint){20, 20}]; 
[path addLineToPoint:(CGPoint){0, 0}]; 

// Create a CAShapeLayer with this triangular path 
// Same size as the original imageView 
CAShapeLayer *mask = [CAShapeLayer new]; 
mask.frame = self.viewTriangleCallout.bounds; 
mask.path = path.CGPath;