绘制透明弧

Question

我想绘制一条连接矩形两角的透明弧，这样我就能看到弧形视图后面的内容。

我可以使用以下代码绘制弧

override func draw(_ rect: CGRect) {
    // Drawing code
    let arcHeight: CGFloat = 10
    let arcColor = UIColor.blue
    let arcRect = CGRect(x: 0, y: rect.height - arcHeight, width: rect.width, height: arcHeight)
    let arcRadius = (arcHeight / 2) + (pow(arcRect.width, 2) / (8 * arcHeight))
    let arcCenter = CGPoint(x: arcRect.origin.x + (arcRect.width / 2), y: arcRect.origin.y + arcRadius)

    let angle = acos(arcRect.width / (2 * arcRadius))
    let startAngle = radians(180) + angle
    let endAngle = radians(360) - angle

    let path = UIBezierPath(arcCenter: arcCenter, radius: arcRadius / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    path.lineWidth = arcRadius
    arcColor.setStroke()
    path.stroke()
}

private func radians(_ degrees: CGFloat) -> CGFloat {
    return degrees * CGFloat(M_PI) / 180
}

所以为了使弧变得透明，我需要填充除了弧之外的矩形的剩余部分，我尝试了下面的代码，

let fullPath = UIBezierPath(rect: bounds)
fullPath.append(path)
fullPath.usesEvenOddFillRule = true
fullPath.addClip()
arcColor.setFill()
fullPath.fill()

但我无法达到我的期望。请指导我如何使用不包括弧线的颜色填充矩形。

请查看下面的截图

我希望上面图像中的白色圆弧是透明的，这样我就可以通过圆弧看到视图背后的内容。

Answer 1

看来你想要这样的东西：

为了获得这一点，我几乎完全使用了你的代码，但我先用蓝色填充整个rect，然后用你的代码绘制了弧线，但是当我们来划线弧线时它的混合模式为.clear，因此擦除弧下的区域。

class MyView : UIView {
    override init(frame:CGRect) {
        super.init(frame:frame)
        self.isOpaque = false
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        // Drawing code
        let arcHeight: CGFloat = 10
        let arcColor = UIColor.blue
        arcColor.setFill() // <--
        let con = UIGraphicsGetCurrentContext() // <--
        con?.fill(rect) // <--
        let arcRect = CGRect(x: 0, y: rect.height - arcHeight, width: rect.width, height: arcHeight)
        // ... same as your code ...
        path.stroke(with: .clear, alpha: 1)
    }

    private func radians(_ degrees: CGFloat) -> CGFloat {
        return degrees * CGFloat(M_PI) / 180
    }

}