合并多个CGPath组成一条路径 [英] Merge multiple CGPaths together to make one path

问题描述

我正在使用一些CGRects和Ellipses制作复杂的形状.创建该路径后，我想查找该路径.当我绘制路径时，它会绘制每个形状.有没有一种方法可以将每个形状合并到一条路径中，从而使笔划不相交?

I am making a complex shape using a few CGRects and Ellipses. I would like to stroke that path once it has been created. When I stroke the path it strokes each shape. Is there a way I can merge each shape into a single path, so the stroke doesn't intersect?

int thirds = self.height / 3;

CGPathRef aPath = CGPathCreateMutable();

CGRect rectangle = CGRectMake((58 - 10) / 2, 46, 10, self.height - 58);
CGPathAddRect(aPath, nil, rectangle);

CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, 0, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds * 2, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake(0, self.height - 58, 58, 58));
CGPathCloseSubpath(aPath);
CGPathRef other = CGPathCreateCopy(aPath);

CAShapeLayer *square = [CAShapeLayer layer];
square.fillColor = [UIColor colorWithRed:36/255.0f green:56/255.0f blue:82/255.0f alpha:1.0f].CGColor;
square.strokeColor = [UIColor colorWithRed:50/255.0f green:70/255.0f blue:96/255.0f alpha:1.0f].CGColor;
square.path = other;
[self.layer addSublayer:square];

更新

我尝试一起添加路径，但得到的结果完全相同

I tried with adding paths together and I got the exact same result

CGPathAddPath(aPath, nil, CGPathCreateWithRect(rectangle, nil));

CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, 0, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, thirds, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake((58 - 48) / 2, thirds * 2, 48, 48), nil));
CGPathAddPath(aPath, nil, CGPathCreateWithEllipseInRect(CGRectMake(0, self.height - 58, 58, 58), nil));

推荐答案

如果要使用仅描述路径组成轮廓的路径，则需要对参与的形状执行布尔运算.
有一些不错的教程.
例如.: http: //losingfight.com/blog/2011/07/07/how-to-implement-boolean-operations-on-bezier-paths-part-1/

If you want a path that only describes the outline of your path composition, you'd need to perform boolean operations on the participating shapes.
There are some good tutorials out there.
E.g.: http://losingfight.com/blog/2011/07/07/how-to-implement-boolean-operations-on-bezier-paths-part-1/

如果只想获得轮廓的视觉外观，则可以绘制2个形状层:

If you just want to achieve the visual appearance of an outline, you could draw 2 shape layers:

• 填充通过CGPathCreateCopyByStrokingPath和
获得的路径的一个
• 一个可以填补您原始路径的顶部

• one that fills a path obtained via CGPathCreateCopyByStrokingPath and
• one that fills your original path atop

使用您发布的代码中的形状:

Using the shapes from the code you posted:

int thirds = self.height / 3;

CGMutablePathRef aPath = CGPathCreateMutable();

CGRect rectangle = CGRectMake((58 - 10) / 2, 46, 10, self.height - 58);
CGPathAddRect(aPath, nil, rectangle);

CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, 0, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake((58 - 48) / 2, thirds * 2, 48, 48));
CGPathAddEllipseInRect(aPath, nil, CGRectMake(0, self.height - 58, 58, 58));
CGPathCloseSubpath(aPath);

CGPathRef other = CGPathCreateCopyByStrokingPath(aPath, NULL, 12.0, kCGLineCapRound, kCGLineJoinRound, 1.0);
CAShapeLayer *square = [CAShapeLayer layer];
square.fillColor = [UIColor colorWithRed:36/255.0f green:56/255.0f blue:82/255.0f alpha:1.0f].CGColor;
square.path = other;
[self.view.layer addSublayer:square];

CAShapeLayer *square2 = [CAShapeLayer layer];
square2.fillColor = [UIColor colorWithRed:50/255.0f green:70/255.0f blue:96/255.0f alpha:1.0f].CGColor;
square2.path = aPath;
[self.view.layer addSublayer:square2];

这将绘制以下形状:

That will draw the following shape:

这篇关于合并多个CGPath组成一条路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！