Vẽ một đa giác với một màu cho đột quỵ và một màu khác để điền?

Question

Tôi đang gặp sự cố khi vẽ một số đường kẻ được vuốt bằng một màu và sau đó điền vào bên trong chúng (chúng tạo một đa giác) với một hình khác.

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

Với CGContextStrokePath nhận xét ra, tôi nhận được kết quả này:

Nhưng nếu tôi bỏ ghi chú CGContextStrokePath và điền thông tin vào đa giác, màu sắc tràn đột quỵ:

Làm cách nào để bạn đạt được kết quả như thế này (mà không cần phải làm lại thủ tục vẽ ole hai lần):

Answer 1

Bạn có thể sử dụng

CGContextDrawPath(context, kCGPathFillStroke); 

thay vì

CGContextFillPath(context); 
CGContextStrokePath(context); 

Vấn đề là cả hai CGContextFillPath() và CGContextStrokePath(context) rõ ràng con đường hiện nay, để chỉ những hoạt động đầu tiên thành công, và hoạt động thứ hai không có gì. CGContextDrawPath() kết hợp điền và đột quỵ mà không cần xóa đường dẫn ở giữa.

Answer 2

Khi bạn đột quỵ hoặc điền vào đường dẫn trong bối cảnh, bối cảnh loại bỏ con đường cho bạn (nó hy vọng rằng đó là công việc được thực hiện). Bạn phải thêm lại đường dẫn nếu bạn muốn điền nó sau khi vuốt nó.

Có lẽ cách tốt nhất là tạo một biến địa phương CGPathRef path, tạo đường dẫn, thêm, đột quỵ, thêm lại, điền.

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

Answer 3

Sử dụng UIBezierPath bạn có thể làm điều này:

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