如何使用Swift为自定义三角形UIView填充自定义渐变色？

没问题，我来帮你搞定这个渐变填充的需求！你已经完成了路径创建和渐变对象的准备工作，只需要替换掉单一颜色填充的逻辑，改用渐变填充路径区域即可。

修改后的完整代码 #

override func draw(_ rect: CGRect) { 
    let widerStartingPoint = CGFloat(240) 
    guard let context = UIGraphicsGetCurrentContext() else { return } 

    // 1. 创建三角形路径（你的原有代码不变）
    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() 

    // 2. 将上下文裁剪到三角形路径内，确保渐变只填充这个区域
    context.clip()

    // 3. 创建渐变对象（你的原有代码基本不变，调整了渐变起点终点的准确性）
    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(x: bounds.midX, y: bounds.minY) 
    let endPoint = CGPoint(x: bounds.midX, y: bounds.maxY + widerStartingPoint) 
    guard let gradient = CGGradient(colorsSpace: colorSpace, colors: colors, locations: colorLocations) else { return } 

    // 4. 绘制渐变
    context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
}

关键改动说明 #

• 替换填充逻辑：移除了原来的setFillColor和fillPath，改用context.clip()将绘制范围限制在三角形路径内，再通过drawLinearGradient填充渐变。
• 优化渐变起止点：因为你的三角形路径超出了view的默认rect范围，所以把渐变起点设为三角形顶部中点，终点设为底部延伸的位置，保证渐变完整覆盖整个三角形区域。
• 安全校验：给CGGradient的创建加上了guard let，避免可选值解包崩溃。

额外提示 #

如果需要调整渐变方向（比如水平渐变），只需要修改startPoint和endPoint的坐标即可：

• 水平渐变：startPoint = CGPoint(x: bounds.minX - widerStartingPoint, y: bounds.midY)，endPoint = CGPoint(x: bounds.maxX + widerStartingPoint, y: bounds.midY)

内容的提问来源于stack exchange，提问作者Vetuka