如何创建gradiated三角形图像

Question

这是我必须创建一个gradiated三角形的代码（三角形的，而不是平坦的颜色，有一种颜色渐变）：

extension UIImage { 

    struct GradientPoint { 
     var location: CGFloat 
     var color: UIColor 
    } 

    static func gradiatedTriangle(side: CGFloat)->UIImage { 

     UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 
     let ctx = UIGraphicsGetCurrentContext()! 
     ctx.saveGState() 

     //create gradient and draw it 
     let gradientPoints = [UIImage.GradientPoint(location: 0, color: UIColor.from(rgb: 0xff0000)), UIImage.GradientPoint(location: 1, color: UIColor.from(rgb: 0xd0d0d0))] 
     let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: gradientPoints.flatMap{$0.color.cgColor.components}.flatMap{$0}, locations: gradientPoints.map{$0.location}, count: gradientPoints.count)! 
     ctx.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: side), options: CGGradientDrawingOptions()) 

     //draw triangle 
     ctx.beginPath() 
     ctx.move(to: CGPoint(x: side/2, y: side)) 
     ctx.addLine(to: CGPoint(x: 0, y: 0)) 
     ctx.addLine(to: CGPoint(x: side, y: 0)) 
     ctx.closePath() 
     ctx.drawPath(using: .fill) 

     ctx.restoreGState() 
     let img = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 

     return img 
    } 
} 

然而，返回的图像在背景中有一个方形渐变，顶部有一个黑色三角形。我可以使填充清晰，但我不知道如何修剪路径周围的渐变层，以便只保留三角形。如何修剪掉我绘制的路径之外的渐变图层？

Answer 1

与此一替换你的代码，首先你需要添加的路径，然后ctx.clip()剪辑的背景，然后绘制你的梯度

import UIKit 

extension UIImage { 

    struct GradientPoint { 
     var location: CGFloat 
     var color: UIColor 
    } 

    static func gradiatedTriangle(side: CGFloat)->UIImage { 

     UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 
     let ctx = UIGraphicsGetCurrentContext()! 

     //draw triangle 
     ctx.beginPath() 
     ctx.move(to: CGPoint(x: side/2, y: side)) 
     ctx.addLine(to: CGPoint(x: 0, y: 0)) 
     ctx.addLine(to: CGPoint(x: side, y: 0)) 
     ctx.closePath() 
     ctx.clip() 

     //create gradient and draw it 
     let gradientPoints = [UIImage.GradientPoint(location: 0, color: UIColor.red), UIImage.GradientPoint(location: 1, color: UIColor.blue)] 
     let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: gradientPoints.flatMap{$0.color.cgColor.components}.flatMap{$0}, locations: gradientPoints.map{$0.location}, count: gradientPoints.count)! 
     ctx.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: side), options: CGGradientDrawingOptions()) 


     let img = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 

     return img 
    } 
} 

结果

希望这有助于你，最好的问候