如何创建渐变三角形图像

Question

这是我必须创建渐变三角形的代码（三角形不是纯色，而是具有颜色渐变）：

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{[=10=].color.cgColor.components}.flatMap{[=10=]}, locations: gradientPoints.map{[=10=].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
    }
}

但是，返回的图像在背景中有一个正方形渐变，在其顶部有一个黑色三角形。我可以使填充清晰，但我不知道如何 trim 路径周围的渐变层，以便只剩下一个三角形。我怎样才能trim去掉我画的路径外的渐变层？

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{[=10=].color.cgColor.components}.flatMap{[=10=]}, locations: gradientPoints.map{[=10=].location}, count: gradientPoints.count)!
        ctx.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: side), options: CGGradientDrawingOptions())


        let img = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        return img
    }
}

结果

希望对您有所帮助，此致

如何创建渐变三角形图像

How to create a gradiated triangle image

core-graphics

ios

swift

结果