iOS Swift：如何使用UIBezierPath将两个形状合并为纯色形状？

Question

嘿~~我正在尝试在其顶部绘制带有矩形手柄的实心圆点。（背景色：紫色，原色：黑色）

但是，所有形状都是正确的，但是当我着色时，在形状重叠区域会出现间隙，无法用纯色填充。

我应该如何纠正？谢谢！

var shapeLayer: CAShapeLayer!

func draw() {
    let path = UIBezierPath()

    // draw a rectangle
    path.move(to: CGPoint(x: 90, y: 0))
    path.addLine(to: CGPoint(x: 90, y: 100))
    path.addLine(to: CGPoint(x: 110, y: 100))
    path.addLine(to: CGPoint(x: 110, y: 0))
    path.addLine(to: CGPoint(x: 90, y: 0))

    // draw a circle
    path.move(to: CGPoint(x: 100, y: 100))
    path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)

    // fill colors with purple and black
    self.shapeLayer.path = path.cgPath
    self.shapeLayer?.fillColor = foreColor.cgColor
    self.backgroundColor = backColor
}

Answer 1

以相反的方向绘制矩形：

// draw a rectangle
path.move(to: CGPoint(x: 90, y: 0))
path.addLine(to: CGPoint(x: 110, y: 0))
path.addLine(to: CGPoint(x: 110, y: 100))
path.addLine(to: CGPoint(x: 90, y: 100))
path.addLine(to: CGPoint(x: 90, y: 0))

[CoreGraphics使用的non-zero winding填充使用线条的方向来确定内部/外部。

---

或者，您可以反转圆的方向：

path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 50,
    startAngle: 2 * CGFloat.pi, endAngle: 0, clockwise: false)

Answer 2

除了@vacawama的答案，我发现的另一种方法是，我可以使用非封闭矩形而不是封闭矩形，在与圆连接的一侧打开rect：

    let path = UIBezierPath()

    // an open rectangle
    path.move(to: CGPoint(x: 90, y: 52))
    path.addLine(to: CGPoint(x: 90, y: 0))
    path.addLine(to: CGPoint(x: 110, y: 0))
    path.addLine(to: CGPoint(x: 110, y: 52))

    // the same circle
    path.append(UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 100, height: 100)))

这也可行，但是了解“非零缠绕规则”真的很好，非常棒，谢谢！

我现在很高兴：）