UIButton 边框中的生涩渐变

Posted 2023-03-10

【中文标题】UIButton 边框中的生涩渐变

【英文标题】：Jerky gradient in UIButton border

【发布时间】：2019-04-16 10:45:15

【问题描述】：

我需要在边框中创建带有渐变的圆形 UIButton。我在 Core Graphics 代码中遗漏了什么？

我用蒙版创建了 CAGradientLayer。

        layer.cornerRadius = 43
        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = [UIColor(red: 0.99, green: 0.89, blue: 0.54, alpha: 1).cgColor, UIColor(red: 0.95, green: 0.51, blue: 0.51, alpha: 1).cgColor]
        gradient.locations = [0, 1]
        gradient.startPoint = CGPoint(x: 1.83, y: -0.68)
        gradient.endPoint = CGPoint(x: 0.13, y: 0.82)
        gradient.cornerRadius = 43

        let shape = CAShapeLayer()
        shape.lineWidth = 6
        shape.path = UIBezierPath(roundedRect: gradient.frame, cornerRadius: 43).cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradient.mask = shape

        layer.addSublayer(gradient)
        setTitleColor(.red, for: .normal)
        titleLabel?.font = Theme.shared.font.bold(ofSize: 25.0)
        clipsToBounds = true

我希望没有生涩的渐变，被蒙版均匀修剪。

【问题讨论】：

渐变渐变是什么意思？你想要什么2种颜色？黄色和橙色？

【参考方案1】：

第一个问题是路径的边框以框架边缘为中心，因此您需要将路径插入线宽的 1/2。

第二个问题是，设置图层的.cornerRadius 确实不会为您提供与圆角矩形贝塞尔路径相同的曲线（奇怪，但确实如此）。因此，您需要创建另一个蒙版以应用于按钮的图层。它可能导致边缘出现伪影，因此将其插入 0.5 pts。

试试这个修改后的代码：

    // create gradient layer
    let gradient = CAGradientLayer()
    gradient.frame = bounds
    gradient.colors = [UIColor(red: 0.99, green: 0.89, blue: 0.54, alpha: 1).cgColor, UIColor(red: 0.95, green: 0.51, blue: 0.51, alpha: 1).cgColor]
    gradient.locations = [0, 1]
    gradient.startPoint = CGPoint(x: 1.83, y: -0.68)
    gradient.endPoint = CGPoint(x: 0.13, y: 0.82)

    // create shape for gradient layer mask
    let gradientShape = CAShapeLayer()

    // edge / line width of 6
    gradientShape.lineWidth = 6

    // border is centered on the edge, so we want to inset the rect by 1/2 of the border width
    var r = bounds.insetBy(dx: 3, dy: 3)

    // create rounded rect path
    gradientShape.path = UIBezierPath(roundedRect: r, cornerRadius: 43).cgPath

    // black stroke, clear fill
    gradientShape.strokeColor = UIColor.black.cgColor
    gradientShape.fillColor = UIColor.clear.cgColor

    // assign the shape as the gradient layer's mask
    gradient.mask = gradientShape

    // create a new shape for the button's layer
    let layerShape = CAShapeLayer()

    // inset by 0.5, to avoid artifacts on the edges
    r = bounds.insetBy(dx: 0.5, dy: 0.5)

    // create rounded rect path
    layerShape.path = UIBezierPath(roundedRect: r, cornerRadius: 43).cgPath

    // black fill (no stroke)
    layerShape.fillColor = UIColor.black.cgColor

    // assign the shape as the layer's mask
    layer.mask = layerShape

    // add gradient layer as a sublayer
    layer.addSublayer(gradient)

    setTitleColor(.red, for: .normal)
    titleLabel?.font = Theme.shared.font.bold(ofSize: 25.0)
    clipsToBounds = true