使用带有径向渐变的 CAGradientLayer 时出现奇怪的渐变。

Posted 2023-02-23

【中文标题】使用带有径向渐变的 CAGradientLayer 时出现奇怪的渐变。

【英文标题】：Weird gradient when using CAGradientLayer with radial gradient.

【发布时间】：2018-10-25 03:17:20

【问题描述】：

使用代码：

class ViewController: UIViewController 
    override func viewDidLoad() 
        super.viewDidLoad()
        let v = View()
        view.addSubview(v)
        v.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    


class View : UIView 
    let gradientLayer = CAGradientLayer()
    override init(frame: CGRect) 
        super.init(frame: frame)
        self.backgroundColor = .blue

        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        gradientLayer.type = .radial
        gradientLayer.colors = [
            UIColor.red.cgColor,
            UIColor.green.cgColor
        ]
        self.layer.addSublayer(gradientLayer)
    
    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
    

期望（由 Sketch 生成）：

ios 12 模拟器上的代码结果：

真实 iOS 设备上的代码结果：

我的 Xcode 版本是 10.0 (10A255)，我发现问题只有在 startPoint.x == endPoint.x || startPoint.y == endPoint.y

【参考方案1】：

当startPoint和endPoint的y相等时，表示渐变椭圆的高度为0。

在你的代码sn-p中，你可以设置entPoint的y为1来实现Sketch的效果。

在QuartzCore框架中，有以下几个cmets：

/* 径向渐变。梯度被定义为一个椭圆，其 *以'startPoint'为中心，其宽度和高度由定义 * '(endPoint.x - startPoint.x) * 2' 和'(endPoint.y - startPoint.y) * * 2' 分别。 */

@available(iOS 3.2, *)

公共静态让径向：CAGradientLayerType

【讨论】：

entPoint 的 y 应该是 1.5