问题描述
我正在使用 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)
}
}
}