在CALayers上屏蔽CAGradientLayer

Question

在我的场景中，我有2个视图：第一个保存CALayer实例（条形图），另一个保存CAGradientLayer并放置在第一个上。下图描述了当前状态。

但是我需要将此渐变仅应用于第一个视图的条形图（CALayer）。

我没有找到与我的问题有关的任何信息。任何帮助表示赞赏。

Answer 1

您必须对渐变应用蒙版。有多种方法可以解决此问题。

您可以创建一个CAShapeLayer，将形状层的path形状设置为条形，然后将渐变层的mask形状设置为该形状层。

或者，您可以摆脱钢筋层，而使用两个渐变层，一个用于橙色条，另一个用于灰色条。将两个渐变层并排放置在子视图中，并将超级视图的图层蒙版设置为形状图层。这是这样做的方法。

您将需要两个渐变层和一个形状层：

@IBDesignable
class BarGraphView : UIView {

    private let orangeGradientLayer = CAGradientLayer()
    private let grayGradientLayer = CAGradientLayer()
    private let maskLayer = CAShapeLayer()

您还需要条形宽度：

    private let barWidth = CGFloat(9)

在初始化时，设置渐变并添加所有子层：

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

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

    private func commonInit() {
        backgroundColor = .black

        initGradientLayer(orangeGradientLayer, with: .orange)
        initGradientLayer(grayGradientLayer, with: .gray)

        maskLayer.strokeColor = nil
        maskLayer.fillColor = UIColor.white.cgColor
        layer.mask = maskLayer
    }

    private func initGradientLayer(_ gradientLayer: CAGradientLayer, with color: UIColor) {
        gradientLayer.colors = [ color, color, color.withAlphaComponent(0.6), color ].map({ $0.cgColor })
        gradientLayer.locations = [ 0.0, 0.5, 0.5, 1.0 ]
        layer.addSublayer(gradientLayer)
    }

在布局时，设置渐变层的框架并设置遮罩层的路径。这需要一些工作，因为您不希望条形为半橙色和半灰色。

    override func layoutSubviews() {
        super.layoutSubviews()

        let barCount = ceil(bounds.size.width / barWidth)
        let orangeBarCount = floor(barCount / 2)
        let grayBarCount = barCount - orangeBarCount

        var grayFrame = bounds
        grayFrame.size.width = grayBarCount * barWidth
        grayFrame.origin.x = frame.maxX - grayFrame.size.width
        grayGradientLayer.frame = grayFrame

        var orangeFrame = bounds
        orangeFrame.size.width -= grayFrame.size.width
        orangeGradientLayer.frame = orangeFrame

        maskLayer.frame = bounds
        maskLayer.path = barPath()
    }

    private func barPath() -> CGPath {
        var columnBounds = self.bounds
        columnBounds.origin.x = columnBounds.maxX
        columnBounds.size.width = barWidth
        let path = CGMutablePath()
        for datum in barData.reversed() {
            columnBounds.origin.x -= barWidth
            let barHeight = CGFloat(datum) * columnBounds.size.height
            let barRect = columnBounds.insetBy(dx: 1, dy: (columnBounds.size.height - barHeight) / 2)
            path.addRoundedRect(in: barRect, cornerWidth: 2, cornerHeight: 2)
        }
        return path
    }

    let barData: [Double] = {
        let count = 100
        return (0 ..< count).map({ 0.5 + (1 + sin(8.0 * .pi * Double($0) / Double(count))) / 4 })
    }()

}

结果：

BarGraphView只要没有酒吧，它都是透明的。如果要将其放在深色背景上，请在其后面放置深色视图，或使其成为深色视图的子视图：