绘制三角形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

虽然有几个Core Graphics解决方案，但我想添加一个基于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];
}

基于我的博客文章的代码。

Answer 2

@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 3

我认为比这个解决方案更容易：

 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;

Answer 4

示例代码，它基于此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 5

使用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);