当视图长于宽度时，iOS drawLinearGradient 对角线无法正常工作

Question

我可以用这个简单的例子来演示这个问题。

我有一个需要对角渐变的视图，它应该从左上角的一种颜色开始，并在右下角更改为另一种颜色。以下代码显示了我的尝试：

import UIKit

class GradientView: UIView {

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()!
        context.saveGState()
        context.clip(to: rect)
        
        let topColor = UIColor.red
        let bottomColor = UIColor.green
        
        var tr = CGFloat(0), tg = CGFloat(0), tb = CGFloat(0), ta = CGFloat(0), br = CGFloat(0), bg = CGFloat(0), bb = CGFloat(0), ba = CGFloat(0)//top and bottom component variables
        topColor.getRed(&tr, green: &tg, blue: &tb, alpha: &ta)
        bottomColor.getRed(&br, green: &bg, blue: &bb, alpha: &ba)
        
        let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: [tr,tg,tb,ta,br,bg,bb,ba], locations: [0.0, 1.0], count: 2)

        context.drawLinearGradient(gradient!, start: CGPoint(x: 0, y: 0), end: CGPoint(x: rect.size.width, y: rect.size.height), options: CGGradientDrawingOptions.drawsAfterEndLocation)

        context.restoreGState()
    }

}

它的外观如下：

正如你所看到的，在底部的正方形中，当高度与宽度相同时，效果很好。但是，在顶部矩形中，当宽度大于高度时，它无法正常工作，因为右上角没有任何红色，左下角没有任何绿色。

我该如何解决这个问题？

Answer 1

假设图层遮盖了边界，您可以在创建渐变时使用宽度和高度之间的最大值作为参考值。

意思是，always创建一个方形渐变，其大小是这些值之间的最大值。

这将使渐变渲染始终为 45 度，与您所经历的相反。问题不是渐变绘制不正确，而是斜率因大小而不同。