从 Swift 中的图形化 UIBezierPath 获取框架答案

【问题标题】：Getting frame from graphed UIBezierPath in Swift从 Swift 中的图形化 UIBezierPath 获取框架
【发布时间】：2021-12-29 14:55:35
【问题描述】：

我已经创建了一个图形绘制点并在这些点之间创建了一个 UIBezierPath，但现在我想为绘制的线添加一个渐变（类似于图片）。问题是我需要一个用于 CAGradientLayer 的框架，我不知道如何在 UIView 上绘制线来创建它。我有一个存储的 CGPoint 数组，其中包含所有绘制的点，有没有办法用该数组为渐变创建框架？有人知道在这里做什么吗？

包含所有绘制的点

var graphedInvestedPoints = [CGPoint]()

func addGradient(){
        let colorTop = UIColor(hexString: blueHexString)
        let colorBottom = UIColor.white
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop, colorBottom]
        gradientLayer.locations = [0.0, 1.0]
        //gradientLayer.frame = ?
        self.layer.insertSublayer(gradientLayer, at: 0)
    }

当前设计

想要的渐变设计

【问题讨论】：

您是否覆盖draw() 来绘制您的线条？还是您使用CAShapeLayer？您是否尝试过搜索swift fill bezier path with gradient？很多结果...您应该能够找到与您的方法相匹配的结果。

标签： ios swift uibezierpath cgpoint cagradientlayer

【解决方案1】：

这是一个简单的示例，使用蒙版渐变层。

使用您的graphedInvestedPoints 创建图形的形状，将其应用为CAShapeLayer 的.path 属性，然后将该层应用为CAGradientLayer 的.mask 属性：

class GradientPathView: UIView {
    
    let gradientLayer = CAGradientLayer()
    let shapeLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    func commonInit() -> Void {
        
        layer.addSublayer(gradientLayer)

        // can be any opaque color
        shapeLayer.fillColor = UIColor.white.cgColor
        
        self.backgroundColor = .clear
        
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let path = UIBezierPath()
        
        var pt: CGPoint = .zero
        
        pt.x = 0
        pt.y = bounds.maxY

        // move to bottom-left corner           
        path.move(to: pt)
        
        pt.y = bounds.maxY * 0.75
        
        // add line up left side to first point on the graph line
        path.addLine(to: pt)
        
        // let's add 20 points across the X-axis
        //  decrementing Y to make an upward curve
        
        let xInc: CGFloat = bounds.maxX / 20.0
        var yInc: CGFloat = 1.0
        
        for _ in 1...20 {
            pt.x += xInc
            pt.y -= yInc
            path.addLine(to: pt)
            yInc += 0.75
        }
        
        pt.x = bounds.maxX
        pt.y = bounds.maxY
        
        // add line to bottom-right corner
        path.addLine(to: pt)
        
        // close the path (bottom-right to bottom-left corners)
        path.close()
        
        shapeLayer.path = path.cgPath
        
        gradientLayer.frame = bounds
        
        let topColor: UIColor = .systemBlue
        let botColor: UIColor = .white
        
        gradientLayer.colors = [topColor.cgColor, botColor.cgColor]
        
        // adjust startPoint / endPoint (or .locations) as desired
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

        // apply mask to gradient layer
        gradientLayer.mask = shapeLayer

    }
    
}

在 240 x 240 视图上的输出（红色虚线只是用来显示视图的框架）：

【讨论】：