为何draw(in: CGRect)绘制时椭圆意外出现边框？iOS编译异常

云原生阿岚

2026-8-22

iOS应用中UIGraphicsImageRenderer绘制椭圆出现异常边框的解决办法

问题根源

这个差异是因为iOS应用的正式运行环境和Playground的渲染上下文默认配置不同：

应用环境中UIGraphicsImageRenderer默认格式可能包含透明通道，导致椭圆边缘出现半透明虚影（看起来像边框）；
上下文可能残留默认的描边线宽设置，即便用了fill绘制，也会在边缘产生意外渲染结果；
330pt的尺寸如果没和屏幕缩放倍数（2x/3x）对齐，抗锯齿会导致边缘出现模糊边框。

修复方案

1. 指定不透明的渲染格式

因为你的背景是纯白色不透明，开启不透明格式可以消除透明通道带来的边缘异常：

let format = UIGraphicsImageRendererFormat()
format.opaque = true
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 330, height: 330), format: format)

2. 重置上下文的描边状态

明确设置描边颜色为透明、线宽为0，避免上下文残留的默认设置干扰：

let img = renderer.image { ctx in
    let circle = CGRect(x: 0, y: 0, width: 330, height: 330)
    ctx.cgContext.setFillColor(UIColor.white.cgColor)
    // 重置描边相关状态
    ctx.cgContext.setStrokeColor(UIColor.clear.cgColor)
    ctx.cgContext.setLineWidth(0)
    
    ctx.cgContext.addEllipse(in: circle)
    ctx.cgContext.drawPath(using: .fill)
                
    guard let image = UIImage(named: "1") else { return }
    image.draw(in: CGRect(x: 80, y: 80, width: 100, height: 100))
}