背景蒙版切掉部分前景层

Question

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

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

可以看到，progress层的末尾有一个红点，但是在顶部和底部被切掉了... 而且不应该是这样的...

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

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

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

所以遮罩外的任何东西都不会被绘制。

背景蒙版切掉部分前景层

The background mask cuts off part of the foreground layer

calayer

uikit

cashapelayer

swift