iOS

Question

我在 Objective-C 中绘制了一个 UIBezierPath 并用红色填充它。现在，我想根据百分比用多种颜色填充路径。例如：我想用 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);

iOS - 根据百分比用多种颜色填充 bezierPath

iOS - Fill bezierPath with multiple colors based on percentage

drawing

uibezierpath