圆形 GAGradient 层上的锯齿状边缘

Posted 2023-02-23

【中文标题】圆形 GAGradient 层上的锯齿状边缘

【英文标题】：Jagged edges on circular GAGradient layer

【发布时间】：2017-09-11 11:17:21

【问题描述】：

我正在尝试绘制一个填充有渐变的圆形进度条。我的代码如下：

    override func draw(_ rect: CGRect) 
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0), radius: rect.size.height / 2.0, startAngle: 0.0, endAngle: CGFloat.pi * 2.0, clockwise: true)
        circleLayer.path = circlePath.cgPath
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.strokeColor = UIColor(hex: 0xCACACA).cgColor
        circleLayer.lineWidth = 2.0
        circleLayer.strokeEnd = 1.0
        layer.addSublayer(circleLayer)


        let circleCorrectPath = UIBezierPath(arcCenter: CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0), radius: rect.size.height / 2.0, startAngle: CGFloat.pi * 3/2, endAngle: CGFloat.pi * 3/2 + CGFloat.pi * 2, clockwise: true)
        progressCircleLayer.path = circleCorrectPath.cgPath
        progressCircleLayer.fillColor = UIColor.clear.cgColor
        progressCircleLayer.strokeColor = UIColor.black.cgColor
        progressCircleLayer.lineWidth = 2.0
        layer.addSublayer(progressCircleLayer)

        let gradient = CAGradientLayer()
        gradient.frame = rect
        gradient.mask = progressCircleLayer
        gradient.colors = [UIColor(red:0.52, green:0.83, blue:0.9, alpha:1).cgColor,
                              UIColor(red:0.25, green:0.67, blue:0.86, alpha:1).cgColor]
        gradient.locations = [0, 1]
        gradient.startPoint = CGPoint(x: 1, y: 0)
        gradient.endPoint = CGPoint.zero
        layer.addSublayer(gradient)

    

这可行，但渐变层似乎有锯齿状边缘：

在图像中，底部和右侧边缘呈锯齿状。我在这里做错了什么？

【问题讨论】：

progressCircleLayer.stokeEnd 的值是 1.0 吗？图片也好像蓝色层被裁剪了一样，circleLayer和progressCircleLayer的大小是不是一模一样的？

【参考方案1】：

您的问题不在于CAGradientLayer，而在于CAShapeLayer（代码中的progressCircleLayer）。

对于视网膜设备，CAShapeLayer 的光栅化属性默认为 1，会导致图像模糊。

progressCircleLayer.shouldRasterize = true
progressCircleLayer.rasterizationScale = 2 * UIScreen.main.scale 

【讨论】：

我试过这个。还是没有变化。无论如何，我在模拟器上运行它，非视网膜屏幕。

这确实对真实设备有所帮助，但不确定我需要放置的真正缩放比例是多少。似乎用“3”我摆脱了大多数锯齿状边缘。