用一种颜色作为描边绘制一个多边形，用另一种颜色作为填充？

Posted 2023-03-13

【中文标题】用一种颜色作为描边绘制一个多边形，用另一种颜色作为填充？

【英文标题】：Drawing a polygon with one color for stroke, and a different one for fill?

【发布时间】：2013-05-09 13:08:22

【问题描述】：

我无法绘制一些用颜色描边的线条，然后用另一个线条填充它们的内部（它们构成一个多边形）。

UIColor *houseBorderColor = [UIColor colorWithRed:(170/255.0) green:(138/255.0) blue:(99/255.0) alpha:1];
CGContextSetStrokeColorWithColor(context, houseBorderColor.CGColor);
CGContextSetLineWidth(context, 3);

// Draw the polygon
CGContextMoveToPoint(context, 20, viewHeight-19.5);
CGContextAddLineToPoint(context, 200, viewHeight-19.5); // base
CGContextAddLineToPoint(context, 300, viewHeight-119.5); // right border
CGContextAddLineToPoint(context, 120, viewHeight-119.5);
CGContextAddLineToPoint(context, 20, viewHeight-19.5);

// Fill it
CGContextSetRGBFillColor(context, (248/255.0), (222/255.0), (173/255.0), 1);
//CGContextFillPath(context);

// Stroke it
CGContextStrokePath(context);

CGContextStrokePath 被注释掉，我得到这个结果：

但是如果我取消注释CGContextStrokePath并填充多边形，颜色会溢出笔画：

您如何获得这样的结果（无需重做整个绘图过程两次）：

【参考方案1】：

你可以使用

CGContextDrawPath(context, kCGPathFillStroke);

而不是

CGContextFillPath(context);
CGContextStrokePath(context);

问题在于CGContextFillPath() 和CGContextStrokePath(context) 清除当前路径，这样只有第一个操作成功，第二个操作成功 操作什么也没画。 CGContextDrawPath() 结合了填充和描边，没有 清除两者之间的路径。

【讨论】：

我不想听起来要求很高，但是您能否详细说明一下以给出完整的答案，因为我不太明白 CGContextDrawPath() 应该去哪里？

抱歉，因为我在打电话，所以回答太短了 :-) 该调用替换了 CGContextFillPath 和 ...StrokePath。

在这种情况下这是最好的解决方案。

（翻白眼。）当然... DrawPath，而不是 FillPath 或 StrokePath。某处有（Apple）逻辑！感谢您的提示...我遇到了同样的问题。

【参考方案2】：

使用 UIBezierPath 你可以这样做：

UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(20, viewHeight-19.5)];
[path addLineToPoint:CGPointMake(200, viewHeight-19.5)];
[path addLineToPoint:CGPointMake(300, viewHeight-119.5)];
[path addLineToPoint:CGPointMake(120, viewHeight-119.5)];
[path addLineToPoint:CGPointMake(20, viewHeight-19.5)];

[[UIColor colorWithRed:(248/255.0) green:(222/255.0) blue:(173/255.0) alpha:1.0] setFill];
[path fill];
[[UIColor colorWithRed:(170/255.0) green:(138/255.0) blue:(99/255.0) alpha:1.0] setStroke];
[path stroke];

【讨论】：

我只从 Apple 的示例中知道 UIBezierPath，与我的问题中提到的 CGContext 方法相比，它有什么好处吗？ @MikePollard

我认为只是使用 NSObjects 而不是 Core Foundation 对象的所有常见优势。

【参考方案3】：

当您在上下文中描边或填充路径时，上下文会为您删除路径（它希望它的工作已完成）。如果要在描边后填充路径，则必须重新添加路径。

最好创建一个CGPathRef path 局部变量，构建路径，添加它，描边，再次添加它，填充。

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, 20, viewHeight-19.5);
CGPathAddLineToPoint(path nil, 200, viewHeight-19.5); // base
CGPathAddLineToPoint(path nil, 300, viewHeight-119.5); // right border
CGPathAddLineToPoint(path nil, 120, viewHeight-119.5);
CGPathAddLineToPoint(path nil, 20, viewHeight-19.5);

CGContextAddPath(context, path);
CGContextFillPath(context);

// possibly modify the path here if you need to

CGContextAddPath(context, path);
CGContextStrokePath(context);

【讨论】：

您能否使用我提供的代码详细说明path 的创建？

您将使用CGPath API 而不是CGContext 创建路径。但是，在这种情况下，您可能应该使用CGContextDrawPath()，因为您遇到的问题确实是CGContextFillPath() 从上下文中删除了路径（因此您正在抚摸一条空路径，这就是为什么没有发生）。

非常感谢您花时间解释这个概念，这使得 CGContext 的一切都更加清晰！谢谢！