Drawing Hexagon like piechart in iOS

问题

I am drawing a hexagon with 3 different colors. I gave a color for each line.

Here is my code;

- (void)drawRect:(CGRect)rect {
    self.colors = [[NSMutableArray alloc] initWithObjects:[UIColor yellowColor],[UIColor yellowColor],[UIColor blueColor],[UIColor blueColor],[UIColor greenColor],[UIColor greenColor], nil];
    [self addPointsToArray];

    CGPoint startPoint = [[self.points objectAtIndex:self.pointCounter] CGPointValue];
    CGPoint endPoint = [[self.points objectAtIndex:self.pointCounter+1] CGPointValue];
    UIColor *color = [self.colors objectAtIndex:self.pointCounter];
    [self drawingEachLineWithDifferentBezier:startPoint endPoint:endPoint color:color];

    self.pointCounter++;
}

- (void)addPointsToArray {
    self.points = [[NSMutableArray alloc] init];

    float polySize = self.frame.size.height/2;

    CGFloat hexWidth = self.frame.size.width;
    CGFloat hexHeight = self.frame.size.height;

    CGPoint center = CGPointMake(hexWidth/2, hexHeight/2);
    CGPoint startPoint = CGPointMake(center.x, 0);

    for(int i = 3; i >= 1 ; i--) {
        CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
        CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);

        NSLog(@"x = %f, y= %f",x,y);

        CGPoint point = CGPointMake(center.x + x, center.y + y);
        [self.points addObject:[NSValue valueWithCGPoint:point]];
    }

    for(int i = 6; i > 3 ; i--) {
        CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
        CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
        CGPoint point = CGPointMake(center.x + x, center.y + y);
        [self.points addObject:[NSValue valueWithCGPoint:point]];
    }
    [self.points addObject:[NSValue valueWithCGPoint:startPoint]];
}

- (void)drawingEachLineWithDifferentBezier:(CGPoint)startPoint endPoint:(CGPoint)endPoint color:(UIColor *)color {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame = self.bounds;
    pathLayer.path = path.CGPath;
    pathLayer.lineCap = kCALineCapRound;
    //pathLayer.lineCap = kCALineCapSquare;

    pathLayer.strokeColor = [color CGColor];
    pathLayer.fillColor = nil;
    pathLayer.lineWidth = 15.0f;
    pathLayer.cornerRadius = 2.0f;
    pathLayer.lineJoin = kCALineJoinBevel;
    //pathLayer.lineDashPattern = @[@15]; 

    [self.layer addSublayer:pathLayer];

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 0.3f;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnimation.delegate = self;

    [pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag{
    if (self.pointCounter < self.points.count - 1) {
        CGPoint startPoint = [[self.points objectAtIndex:self.pointCounter] CGPointValue];
        CGPoint endPoint = [[self.points objectAtIndex:self.pointCounter+1] CGPointValue];
        UIColor *color = [self.colors objectAtIndex:self.pointCounter];
        [self drawingEachLineWithDifferentBezier:startPoint endPoint:endPoint color:color];

        self.pointCounter++;
    }
}

and I got this view.

My purpose is, i want to be yellow color until red point on 3. line. So i thought if i can find red point coodinate, i can add new point in my points array. Than i can draw yellow line from end of 2. line to red point and blue line from red point to end of 3. line.

Am i on wrong way? If i am not, how can i find red point coordinate or what is your advice?

Thanks for your answer and interest :).

来源：https://stackoverflow.com/questions/33813779/drawing-hexagon-like-piechart-in-ios

标签

ios

objective-c

uibezierpath