如何使用 Swift 渐变填充自定义 UIView？

Question

我有一个自定义三角形 UIView，我想用自定义渐变颜色填充它。

override func draw(_ rect: CGRect) {

    let widerStartingPoint = CGFloat(240)

    guard let context = UIGraphicsGetCurrentContext() else { return }

    context.beginPath()
    context.move(to: CGPoint(x: rect.minX - widerStartingPoint, y: rect.maxY))
    context.addLine(to: CGPoint(x: rect.maxX + widerStartingPoint, y: rect.maxY))
    context.addLine(to: CGPoint(x: (rect.maxX / 2.0), y: rect.minY))
    context.closePath()

    let colors = [firstColor.cgColor, secondColor.cgColor ,thirdColor.cgColor] as CFArray

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let colorLocations: [CGFloat] = [0.0, 0.5 ,1.0]

    let startPoint = CGPoint.zero
    let endPoint = CGPoint(x: 0, y: bounds.height)

    let gradient = CGGradient(colorsSpace: colorSpace,
                              colors: colors as CFArray,
                              locations: colorLocations)!

    // I need to find a way to change below color with gradient color
    context.setFillColor(red: 1.0, green: 0.5, blue: 0.0, alpha: 0.60)
    context.fillPath()
}

我试图找到其他 setFillColor 方法，但它们只允许指定单一颜色。

感谢您的宝贵时间。

Answer 1

我没有使用 setFillColor，而是使用 context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: []) 还向路径添加了剪辑。所以工作代码如下！：

override func draw(_ rect: CGRect) {

    let widerStartingPoint = CGFloat(240)

    guard let context = UIGraphicsGetCurrentContext() else { return }

    context.beginPath()
    context.move(to: CGPoint(x: rect.minX - widerStartingPoint, y: rect.maxY))
    context.addLine(to: CGPoint(x: rect.maxX + widerStartingPoint, y: rect.maxY))
    context.addLine(to: CGPoint(x: (rect.maxX / 2.0), y: rect.minY))
    context.closePath()

    // This was missing!
    context.clip()

    let colors = [firstColor.cgColor, secondColor.cgColor ,thirdColor.cgColor] as CFArray

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let colorLocations: [CGFloat] = [0.0, 0.5 ,1.0]

    let startPoint = CGPoint.zero
    let endPoint = CGPoint(x: 0, y: bounds.height)

    let gradient = CGGradient(colorsSpace: colorSpace,
                              colors: colors as CFArray,
                              locations: colorLocations)!

    // Also used this method
    context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
    context.fillPath()
}

如何使用 Swift 渐变填充自定义 UIView？

How to gradient fill custom UIView using Swift?

ios

swift

custom-view