如何使CAGRadientLayer遵循CGPath

问题描述

给定一个定义路径的CAShapeLayer，如下图所示，我想添加一个遵循Shape层路径的CAGRadientLayer。

例如，给定从黑色到红色的渐变：

• 右上角圆角部分为黑色
• 如果滑块位于100，则左上角为红色
• 如果滑块为50，则滑块的一半将为黑色(如下所示)，可见的渐变将从黑色(右上角)变为底部的淡红色

我之前找到的每个帖子实际上都没有回答这个问题。例如，因为我只能添加轴向CAGRadientLayers，所以我可以这样做(如下图所示)，但您可以看到这是不正确的(左上角最终再次变为黑色)。如何使渐变真正沿着路径/遮罩

推荐答案

对于简单的圆形路径，新的二次曲线梯度很大。我能够立即得到这个(这是一个被圆形层遮盖的圆锥渐变层)：

我使用红色和绿色，以便清晰地显示渐变。这似乎与您所追求的有所不同，但我不敢相信在.conic存在的情况下，实现您的目标会非常困难。

class MyGradientView : UIView {
    override class var layerClass : AnyClass { return CAGradientLayer.self }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder:aDecoder)
        let lay = self.layer as! CAGradientLayer
        lay.type = .conic
        lay.startPoint = CGPoint(x:0.5,y:0.5)
        lay.endPoint = CGPoint(x:0.5,y:0)
        lay.colors = [UIColor.green.cgColor, UIColor.red.cgColor]
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        let shape = CAShapeLayer()
        shape.frame = self.bounds
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        let b = UIBezierPath(ovalIn: shape.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)))
        shape.path = b.cgPath
        shape.lineWidth = 10
        shape.lineCap = .round
        shape.strokeStart = 0.1
        shape.strokeEnd = 0.9
        shape.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        shape.transform = CATransform3DMakeRotation(-.pi/2, 0, 0, 1)
        self.layer.mask = shape
    }
}

这篇关于如何使CAGRadientLayer遵循CGPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！