背景蒙版切断了前景层的一部分

Question

最近在我的一个任务中遇到了一个问题。我花了两天的时间来解决这个问题。最后我来到了这里。

我有一个自定义的进度视图。不要看颜色，它们太糟糕了，只是为了让调试过程看得更清楚。the look I have now the look I want to have

正如你所看到的，在进度层的末端有一个红点，但它在顶部和底部被切割了……不应该是这样的..。

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

提前感谢大家抽出时间来。

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

您正在使用遮罩views图层

layer.mask = backgroundMask

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