背景蒙版切掉部分前景层

Question

最近在我的一项任务中遇到了问题。我试图解决这个问题两天。我终于来了。

我有一个自定义进度视图。不要看颜色，它们太糟糕了，只是为了让调试过程看得更清楚。 【我现在的样子】1 【我想要的样子】2

如您所见，进度层的末尾有一个红点，但在顶部和底部被切割... 而且不应该是这样的......

另外我会把我所有的代码都留在这里，也许有人 可以帮助我。

提前感谢大家的宝贵时间。

import UIKit

class PlainProgressBar: UIView {
    //MARK: - Private
    //colour of progress layer : default -> white
    private var color: UIColor = .white {
        didSet { setNeedsDisplay() }
    }

    // progress numerical value
    private var progress: CGFloat = 0.0 {
        didSet { setNeedsDisplay() }
    }
    
    private var height : CGFloat = 0.0 {
        didSet{ setNeedsDisplay() }
    }
    
    
    private let progressLayer = CALayer()
    private let dotLayer = CALayer()
    private let backgroundMask = CAShapeLayer()
    
    private func setupLayers() {
        layer.addSublayer(progressLayer)
        layer.addSublayer(dotLayer)
    }
    
    //MARK:- Public
    // set color for progress layer
    func setColor(progressLayer color: UIColor){
        self.color = color
    }
    
    func set(progress: CGFloat){
        if progress > 1.0{
            self.progress = 1.0
        }
        if progress < 0.0{
            self.progress = 0.0
        }
        if progress >= 0.0 && progress <= 1.0{
            self.progress = progress
        }
    }
    
    func set(height: CGFloat){
        self.height = height
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    //Main draw function for view
    override func draw(_ rect: CGRect) {
        backgroundMask.path = UIBezierPath(roundedRect: CGRect(origin: .zero, size: CGSize(width: rect.width, height: height)), cornerRadius: rect.height * 0.25).cgPath
        layer.mask = backgroundMask
        
        let dotOnProgressLayer = CGRect(origin: .zero, size: CGSize(width: 10.0, height: 10.0))
        let progressRect = CGRect(origin: .zero, size: CGSize(width: rect.width * progress, height: height))
        
        progressLayer.frame = progressRect
        progressLayer.backgroundColor = color.cgColor
        dotLayer.frame = dotOnProgressLayer
        dotLayer.cornerRadius = dotLayer.bounds.width * 0.5
        dotLayer.backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1).cgColor
        dotLayer.position = CGPoint(x: progressLayer.frame.width ,y: progressLayer.frame.height / 2)
    }

}

  progressView.set(height: 4.5)
        progressView.setColor(progressLayer: UIColor(ciColor: .green))

Answer 1

你正在用

掩盖视图层

layer.mask = backgroundMask

所以面具之外的任何东西都不会被绘制。