iOS - Fill bezierPath с несколькими цветами на основе процента

Question

Я нарисовал UIBezierPath в Objective-C и наполнил его красным цветом. Теперь я хочу заполнить путь несколькими цветами на основе процента. Например: я хочу заполнить путь зеленым цветом 20%, а остальные 80% - красным, поверх друг друга (а не градиентом). Я также хочу несколько пикселей между заполнением и штрихом.

Я не знаю, как я могу это осуществить. Кто-нибудь знает, как я могу это сделать или указать мне в правильном направлении?

Большое спасибо заранее!

UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
[bezierPath moveToPoint: CGPointMake(50, 50)]; 
[bezierPath addLineToPoint: CGPointMake(60, 90)]; 
[bezierPath addLineToPoint: CGPointMake(80, 90)]; 
[bezierPath addLineToPoint: CGPointMake(90, 50)]; 

bezierPath.lineCapStyle = kCGLineCapRound; 
bezierPath.lineJoinStyle = kCGLineJoinBevel; 

[UIColor.redColor setFill]; 
[bezierPath fill]; 
[UIColor.blackColor setStroke]; 
bezierPath.lineWidth = 4; 
[bezierPath stroke]; 

Answer 1

Вот как вы можете это сделать, я разделил путь на 5 частей по 20% каждого.

UIBezierPath* bezierPath = UIBezierPath.bezierPath; 
[bezierPath moveToPoint: CGPointMake(50, 50)]; 
[bezierPath addLineToPoint: CGPointMake(60, 90)]; 
[bezierPath addLineToPoint: CGPointMake(80, 90)]; 
[bezierPath addLineToPoint: CGPointMake(90, 50)]; 

bezierPath.lineCapStyle = kCGLineCapRound; 
bezierPath.lineJoinStyle = kCGLineJoinBevel; 

[UIColor.redColor setFill]; 
bezierPath.lineWidth = 4; 
[bezierPath stroke]; 
[bezierPath addClip]; 

CGRect boundingBox = CGPathGetBoundingBox(bezierPath.CGPath); 

CGRect firstTwentyPercent = CGRectMake(boundingBox.origin.x, 
             boundingBox.origin.y + boundingBox.size.height - 0.2 * boundingBox.size.height, 
             boundingBox.size.width, 
             0.2 * boundingBox.size.height); 
[[UIColor greenColor] setFill]; 
UIRectFill(firstTwentyPercent); 

CGRect secondTwentyPercent = CGRectMake(boundingBox.origin.x, 
             boundingBox.origin.y + boundingBox.size.height - 0.4 * boundingBox.size.height, 
             boundingBox.size.width, 
             0.2 * boundingBox.size.height); 
[[UIColor blueColor] setFill]; 
UIRectFill(secondTwentyPercent); 


CGRect thirdTwentyPercent = CGRectMake(boundingBox.origin.x, 
             boundingBox.origin.y + boundingBox.size.height - 0.6 * boundingBox.size.height, 
             boundingBox.size.width, 
             0.2 * boundingBox.size.height); 
[[UIColor redColor] setFill]; 
UIRectFill(thirdTwentyPercent); 


CGRect fourthTwentyPercent = CGRectMake(boundingBox.origin.x, 
             boundingBox.origin.y + boundingBox.size.height - 0.8 * boundingBox.size.height, 
             boundingBox.size.width, 
             0.2 * boundingBox.size.height); 
[[UIColor cyanColor] setFill]; 
UIRectFill(fourthTwentyPercent); 

CGRect fifthTwentyPercent = CGRectMake(boundingBox.origin.x, 
             boundingBox.origin.y, 
             boundingBox.size.width, 
             0.2 * boundingBox.size.height); 
[[UIColor orangeColor] setFill]; 
UIRectFill(fifthTwentyPercent);