将渐变添加到 UIBezierPath 行答案

【问题标题】：Add gradient to UIBezierPath line将渐变添加到 UIBezierPath 行
【发布时间】：2021-09-27 00:58:27
【问题描述】：

我正在使用UIBezierPath 和CAShapeLayer 画一条线。我需要将渐变添加到线条中，将顶部颜色添加到白色，将底部颜色添加到红色。我遵循了StackOverlow 的几个解决方案，但运气不好。下面是我的代码。

private func drawLine(start: CGPoint, toPoint end: CGPoint) {

    //design the path
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)

    //design path in layer
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 2.0
    self.layer.addSublayer(shapeLayer)
    
    let gradient = CAGradientLayer()
    gradient.frame = path.bounds
    gradient.colors = [UIColor.white.cgColor, UIColor.red.cgColor]

    let shapeMask = CAShapeLayer()
    shapeMask.path = path.cgPath
    gradient.mask = shapeMask
    
    self.layer.addSublayer(gradient)
    
}

引用StackOverflow 的另一个尝试是

private func drawLine(start: CGPoint, toPoint end: CGPoint) {

    //design the path
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)

    //design path in layer
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 2.0
    self.layer.addSublayer(shapeLayer)
    
    addGradientLayer(to: shapeLayer, path: path)
}

private func addGradientLayer(to layer: CALayer, path: UIBezierPath) {

    let gradientMask = CAShapeLayer()
    gradientMask.contentsScale = UIScreen.main.scale
    gradientMask.strokeColor = UIColor.white.cgColor
    gradientMask.path = path.cgPath

    let gradientLayer = CAGradientLayer()
    gradientLayer.mask = gradientMask
    gradientLayer.frame = layer.frame
    gradientLayer.contentsScale = UIScreen.main.scale
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]

    layer.addSublayer(gradientLayer)
}

两者都只是画了红线（笔划）。

【问题讨论】：

@jatinfl 是的。我试过gradient.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]。我只看到红色的笔触
请改strokeColor清除检查
@jatinfl 我看不到颜色

标签： ios swift uibezierpath cagradientlayer

【解决方案1】：

您的问题的简短答案很可能是您需要致电cgPath.copy(strokingWithWidth: 3.0, lineCap: .butt, lineJoin: .bevel, miterLimit: 1.0) 将您在蒙版上的描边路径转换为填充路径。

但是要逐步分解...

首先，您正在绘制一个渐变，它被一条线遮住。不绘制已应用渐变的线。所以只需要添加一层，它需要是一个渐变层。所以第一步应该画一个渐变的矩形：

func drawLine(start: CGPoint, toPoint end: CGPoint) {
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = path.bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
    
    self.layer.addSublayer(gradientLayer)
}

现在渐变是可见的，让我们对其应用一些蒙版。圈子应该是一件容易的事：

func drawLine(start: CGPoint, toPoint end: CGPoint) {
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = path.bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
    gradientLayer.mask = {
        let layer = CAShapeLayer()
        layer.path = UIBezierPath(ovalIn: path.bounds).cgPath
        return layer
    }()
    
    self.layer.addSublayer(gradientLayer)
}

如果你这样做并且你使用了路径的一些非零起始坐标，那么你会看到圆被切断了。被遮罩的路径必须在渐变层坐标中，因此需要将path.bounds 更正为

    gradientLayer.mask = {
        let layer = CAShapeLayer()
        layer.path = UIBezierPath(ovalIn: CGRect(x: 0.0, y: 0.0, width: path.bounds.width, height: path.bounds.height)).cgPath
        return layer
    }()

现在坐标没问题了，让我们把它转换成一条线。它变得有点复杂，因为我们需要减去原始路径的原点：

func drawLine(start: CGPoint, toPoint end: CGPoint) {
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = path.bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
    gradientLayer.mask = {
        let layer = CAShapeLayer()
        let lineStart = CGPoint(x: start.x - path.bounds.minX,
                               y: start.y - path.bounds.minY)
        let lineEnd = CGPoint(x: end.x - path.bounds.minX,
                               y: end.y - path.bounds.minY)
        let path = UIBezierPath()
        path.move(to: lineStart)
        path.addLine(to: lineEnd)
        layer.path = path.cgPath
        return layer
    }()
    
    self.layer.addSublayer(gradientLayer)
}

还有其他方法可以移动路径。也可以使用变换。因此，如果这种方法对您来说不够好，请选择您想要的任何一种。

但是，这现在根本没有绘制任何内容。原因是当使用mask 时，总是使用fill 方法。填充一条线没有任何作用，因为它没有面积。例如，您可以使用多条线来绘制自定义形状。在您的情况下，您可以使用 4 条线来表示一个矩形，这是您希望绘制的线。

然而，画线是一件很痛苦的事情，所以幸运的是，有一个设计不太直观的 API 可以将您的描边路径转换为填充路径。因此，在您的情况下，它将一条线转换为具有定义宽度的矩形（以及仅用于更复杂笔划的其他属性）。你可以使用

public func copy(strokingWithWidth lineWidth: CGFloat, lineCap: CGLineCap, lineJoin: CGLineJoin, miterLimit: CGFloat, transform: CGAffineTransform = .identity) -> CGPath

代码没有记录，但您可以在online documentation 中找到

讨论创建新路径以便填充新路径绘制与使用指定线抚摸原始路径的像素相同风格。

现在最终结果应该是这样的：

func drawLine(start: CGPoint, toPoint end: CGPoint) {
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = path.bounds
    gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
    gradientLayer.mask = {
        let layer = CAShapeLayer()
        let lineStart = CGPoint(x: start.x - path.bounds.minX,
                               y: start.y - path.bounds.minY)
        let lineEnd = CGPoint(x: end.x - path.bounds.minX,
                               y: end.y - path.bounds.minY)
        let path = UIBezierPath()
        path.move(to: lineStart)
        path.addLine(to: lineEnd)
        layer.path = path.cgPath.copy(strokingWithWidth: 3.0, lineCap: .butt, lineJoin: .bevel, miterLimit: 1.0)
        return layer
    }()
    
    self.layer.addSublayer(gradientLayer)
}

我将线宽硬编码为3.0，但您最好将其添加为方法参数或视图属性。

要使用不同的设置并快速查看此答案的结果，您可以创建一个新项目并将您的视图控制器代码替换为以下内容：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onTap)))
        view.addSubview({
            let label = UILabel(frame: CGRect(x: 20.0, y: 70.0, width: 300.0, height: 20.0))
            label.text = "Tap to toggle through drawing types"
            return label
        }())
    }
    
    private var instance: Int = 0
    private var currentView: UIView?
    
    @objc private func onTap() {
        currentView?.removeFromSuperview()
        let view = MyView(frame: CGRect(x: 30.0, y: 100.0, width: 100.0, height: 200.0))
        currentView = view
        view.backgroundColor = .lightGray
        self.view.addSubview(view)
        view.drawLine(type: instance, start: CGPoint(x: 90.0, y: 10.0), toPoint: .init(x: 10.0, y: 150.0))
        instance += 1
    }
    
}

private extension ViewController {

    class MyView: UIView {
        
        func drawLine(type: Int, start: CGPoint, toPoint end: CGPoint) {
            let methods = [drawLine1, drawLine2, drawLine3, drawLine4, drawLine5]
            methods[type%methods.count](start, end)
        }
        
        private func drawLine1(start: CGPoint, toPoint end: CGPoint) {
            let path = UIBezierPath()
            path.move(to: start)
            path.addLine(to: end)
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = path.bounds
            gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
            
            self.layer.addSublayer(gradientLayer)
        }
        
        private func drawLine2(start: CGPoint, toPoint end: CGPoint) {
            let path = UIBezierPath()
            path.move(to: start)
            path.addLine(to: end)
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = path.bounds
            gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
            gradientLayer.mask = {
                let layer = CAShapeLayer()
                layer.path = UIBezierPath(ovalIn: path.bounds).cgPath
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
        private func drawLine3(start: CGPoint, toPoint end: CGPoint) {
            let path = UIBezierPath()
            path.move(to: start)
            path.addLine(to: end)
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = path.bounds
            gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
            gradientLayer.mask = {
                let layer = CAShapeLayer()
                layer.path = UIBezierPath(ovalIn: CGRect(x: 0.0, y: 0.0, width: path.bounds.width, height: path.bounds.height)).cgPath
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
        private func drawLine4(start: CGPoint, toPoint end: CGPoint) {
            let path = UIBezierPath()
            path.move(to: start)
            path.addLine(to: end)
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = path.bounds
            gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
            gradientLayer.mask = {
                let layer = CAShapeLayer()
                let lineStart = CGPoint(x: start.x - path.bounds.minX,
                                        y: start.y - path.bounds.minY)
                let lineEnd = CGPoint(x: end.x - path.bounds.minX,
                                      y: end.y - path.bounds.minY)
                let path = UIBezierPath()
                path.move(to: lineStart)
                path.addLine(to: lineEnd)
                layer.path = path.cgPath
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
        private func drawLine5(start: CGPoint, toPoint end: CGPoint) {
            let path = UIBezierPath()
            path.move(to: start)
            path.addLine(to: end)
            
            let gradientLayer = CAGradientLayer()
            gradientLayer.frame = path.bounds
            gradientLayer.colors = [UIColor.white.cgColor, UIColor.red.cgColor]
            gradientLayer.mask = {
                let layer = CAShapeLayer()
                let lineStart = CGPoint(x: start.x - path.bounds.minX,
                                        y: start.y - path.bounds.minY)
                let lineEnd = CGPoint(x: end.x - path.bounds.minX,
                                      y: end.y - path.bounds.minY)
                let path = UIBezierPath()
                path.move(to: lineStart)
                path.addLine(to: lineEnd)
                layer.path = path.cgPath.copy(strokingWithWidth: 3.0, lineCap: .butt, lineJoin: .bevel, miterLimit: 1.0)
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
    }
    
}

【讨论】：

天哪！你是个天才。这是正确的概念！