绘制透明圆弧

Posted 2023-02-25

【中文标题】绘制透明圆弧

【英文标题】：Draw transparent Arc

【发布时间】：2017-04-06 05:37:19

【问题描述】：

我想画一条连接矩形两个角的透明弧线，这样我就可以通过弧线看到视图后面的内容。

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

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

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

请在下面找到截图，

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

【参考方案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