如何让CAGradientLayer完全填充CAShapeLayer？边缘裁切问题求助

问题描述 #

尝试在CAShapeLayer上方添加CAGradientLayer，但无法在不打乱渐变层位置的前提下让其完全覆盖形状层范围，导致边缘出现裁切情况。

对比效果：

• 添加CAGradientLayer后的效果：
  
• 未添加CAGradientLayer的效果：
  

问题原因 #

1. 路径超出视图边界：原代码中圆形路径半径设为frame.size.width/2，但progressLayer的lineWidth为8，线条的一半会延伸到视图边界之外。当用progressLayer作为gradientLayer的mask时，超出渐变层范围（视图bounds）的部分会被裁切，导致圆角丢失。
2. 重复添加子层：layoutSubviews每次调用都会重新创建并添加progressLayer和gradientLayer，导致图层堆叠混乱。

修复方案 #

以下是修改后的代码，关键调整点已标注：

class CircularProgressBarView: UIView {

    // MARK: - Properties
    var progressLayer = CAShapeLayer()
    private var startPoint = CGFloat(-Double.pi / 2)
    private var endPoint = CGFloat(3 * Double.pi / 2)
    private var currentValue: Float = 0
    var gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseLayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseLayers()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateCircularPath()
        updateGradientFrame()
    }

    // 初始化图层，仅执行一次
    private func setupBaseLayers() {
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.lineCap = .round
        progressLayer.lineWidth = 8
        progressLayer.strokeEnd = 0
        progressLayer.strokeColor = UIColor.white.cgColor
        layer.addSublayer(progressLayer)

        gradientLayer.type = .conic
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 0)
        gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.red.cgColor]
        gradientLayer.mask = progressLayer
        layer.addSublayer(gradientLayer)
    }

    // 更新圆形路径，避免超出边界
    private func updateCircularPath() {
        // 半径减去线条宽度的一半，确保线条完全在视图范围内
        let radius = (frame.size.width / 2.0) - (progressLayer.lineWidth / 2.0)
        let circularPath = UIBezierPath(arcCenter: CGPoint(x: frame.midX, y: frame.midY),
                                        radius: radius,
                                        startAngle: startPoint,
                                        endAngle: endPoint,
                                        clockwise: true)
        progressLayer.path = circularPath.cgPath
    }

    // 更新渐变层的frame
    private func updateGradientFrame() {
        gradientLayer.frame = bounds
    }
}

关键修改说明 #

• 拆分初始化与更新逻辑：将图层的基础配置移到setupBaseLayers，仅在视图初始化时执行一次，避免重复添加子层。
• 调整路径半径：计算半径时减去lineWidth/2，保证线条外边缘不超出视图边界，解决mask裁切圆角的问题。
• 布局时仅更新动态属性：layoutSubviews中只更新路径和渐变层的frame，避免重复创建图层。

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