Apple Watch绘制圆形不够平滑，如何实现更优绘制效果？

问题背景 #

在Apple Watch上绘制圆形时边缘存在锯齿、不够平滑，尝试了基础绘制代码并调整flatness参数后仍未解决问题。

初始尝试代码 #

let circle = Circle.init()
let path = circle.path(in: kServiceRightFrame)
let serviceRightPath = UIBezierPath.init(cgPath: path.cgPath)
serviceRightPath.lineWidth = 2.0
serviceRightPath.fill()
serviceRightPath.stroke()

完整代码片段 #

UIGraphicsBeginImageContext(kWatchInterfaceSize)
let context = UIGraphicsGetCurrentContext()

//draw service path
kSBScoreLabelFontColor.setStroke()
kSBServiceBallColor.setFill()
// ---> 上述初始尝试代码
    
// Convert to UIImage
let cgimage = context!.makeImage()
    
//create scoreboardimage
let scoreBoardImage = UIImage(cgImage: cgimage!)
    
// End the graphics context'
UIGraphicsEndImageContext()

解决方法 #

以下几种方案可有效提升Apple Watch上圆形的绘制平滑度：

1. 使用Retina适配的图形上下文 #

替换原有的UIGraphicsBeginImageContext，使用支持Retina屏幕的初始化方法，自动匹配设备缩放因子，避免分辨率不足导致的锯齿：

// 替换原上下文初始化代码
UIGraphicsBeginImageContextWithOptions(kWatchInterfaceSize, false, 0.0)

第三个参数传0.0会自动采用当前设备的屏幕缩放比例。

2. 开启抗锯齿与高质量渲染 #

在绘制前为图形上下文开启抗锯齿，并设置高质量插值：

let context = UIGraphicsGetCurrentContext()
context?.setShouldAntialias(true)
context?.setAllowsAntialiasing(true)
context?.interpolationQuality = .high

3. 直接用UIBezierPath创建圆形 #

跳过Circle转路径的步骤，直接通过UIBezierPath的椭圆初始化方法创建圆形路径，减少路径转换带来的精度损失：

let serviceRightPath = UIBezierPath(ovalIn: kServiceRightFrame)
serviceRightPath.lineWidth = 2.0
kSBServiceBallColor.setFill()
serviceRightPath.fill()
kSBScoreLabelFontColor.setStroke()
serviceRightPath.stroke()

4. 优化线条样式 #

设置线条的端点和连接样式为圆角，同时确保线条对齐到像素边界：

serviceRightPath.lineCapStyle = .round
serviceRightPath.lineJoinStyle = .round
context?.setLineCap(.round)

内容的提问来源于stack exchange，提问作者BCI