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 填充使用线条的方向来确定 inside/outside。

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

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

Answer 2

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

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

这也行，但了解 "non-zero winding rule" 真的很棒，太棒了，谢谢！

我现在很开心:)

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

iOS Swift: How to merge two shapes into a solid color shape using UIBezierPath?

ios

swift

uibezierpath

cashapelayer