将多个CGPath合并成一个路径

Question

我正在使用一些CGRect和椭圆形来制作一个复杂的形状。我想在创建完路径后描边它。当我描边路径时，它会描边每个形状。是否有一种方法可以将每个形状合并成一个单独的路径，这样描边就不会相交？

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

更新

我尝试将路径相加，得到了完全相同的结果。

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

- brenjt

---

CGPathAddPath(path1, NULL, path2) - CodaFi

@CodaFi 那么为每个形状创建一个新路径并使用CGPathAddPath？ - brenjt

Answer 1

如果您想要一个只描述路径组成概要的路径，您需要对参与的形状执行布尔运算。
有一些很好的教程可以参考。例如：http://losingfight.com/blog/2011/07/07/how-to-implement-boolean-operations-on-bezier-paths-part-1/ 如果您只想实现轮廓的视觉效果，您可以绘制两个形状图层：

• 一个通过CGPathCreateCopyByStrokingPath获取路径并填充的形状图层
• 一个在原始路径上填充的形状图层

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

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

以下是绘制的形状：

- Thomas Zoechling

---

您真是个天才和学者。感谢您的解释。 - brenjt

这不是真正的联合（union），而是它的仿制品，你基本上是在膨胀的形状上绘制原始形状。它在这种情况下可以工作，但无法处理透明颜色、不同的描边样式、着色器等。 - kelin

Answer 2

根据Thomas Zoechling的回答

对于Swift3

height = self.bounds.size.height
let thirds = self.height / 3

let aPath: CGMutablePath = CGMutablePath()
let rect = CGRect(x: (58 - 10) / 2, y: 46, width: 10, height: self.height - 58)
aPath.addRect(rect)

aPath.addEllipse(in: CGRect(x: (58 - 48) / 2, y: 0, width: 48, height: 48))
aPath.addEllipse(in: CGRect(x: (58 - 48) / 2, y: thirds, width: 48, height: 48))
aPath.addEllipse(in: CGRect(x: (58 - 48) / 2, y: thirds * 2, width: 48, height: 48))
aPath.addEllipse(in: CGRect(x: 0, y: self.height, width: 48, height: 48))
aPath.closeSubpath()

let other: CGPath = aPath.copy(strokingWithWidth: 12, lineCap: .round, lineJoin: .round, miterLimit: 1.0)
let square = CAShapeLayer()
square.fillColor = UIColor(red: 36/255.0, green: 56/255.0, blue: 82/255.0, alpha: 1.0).cgColor
square.path = other
self.layer.addSublayer(square)

let square2 = CAShapeLayer()
square2.fillColor = UIColor(red: 50/255.0, green: 70/255.0, blue: 96/255.0, alpha: 1.0).cgColor
square2.path = aPath
self.layer.addSublayer(square2)

- Frankie