ios 贝塞尔曲线 颜色填充_iOS-根据百分比用多种颜色填充bezierPath

I drawed a UIBezierPath in Objective-C and fill it with a red color. Now, I want to fill the path with multiple colors based on percentage. For example: I want to fill the path with 20% green color and the remaining 80% with red color, on top of each other (not a gradient). I also want a few pixels spacing between the fill and the stroke.

I don't know how I can accomplish these things. Does anyone know how I can accomplish this or point me in the right direction?

Many thanks in advance!

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];

解决方案

Here is how you can do this, I have divided the path into 5 parts 20 % of each.

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