向 UIBezierPath 线添加渐变

如何解决向 UIBezierPath 线添加渐变

我正在使用 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)
}

两者都只是画了红线（描边）。

解决方法

对您的问题的简短回答很可能是您需要调用 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,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,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,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,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,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,UIColor.red.cgColor]
            gradientLayer.mask = {
                let layer = CAShapeLayer()
                layer.path = UIBezierPath(ovalIn: CGRect(x: 0.0,height: path.bounds.height)).cgPath
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
        private func drawLine4(start: CGPoint,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,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,miterLimit: 1.0)
                return layer
            }()
            
            self.layer.addSublayer(gradientLayer)
        }
        
    }
    
}

向 UIBezierPath 线添加渐变

如何解决向 UIBezierPath 线添加渐变

解决方法

相关推荐