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

Question

嘿~~
我正在尝试绘制一个带有矩形 handle 的实心圆点。
(背景色:紫色，前色:黑色)

但是，形状都是正确的，但是当我给它上色时，形状重叠区域有一个间隙，无法用纯色填充。

我应该如何纠正它？谢谢!

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

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

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

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