使用UIBezierPath遮罩UIView-仅描边

Question

更新02有一个可行的解决方案...

我正在尝试使用UIBezierPath的笔触作为另一个UIView上的蒙版。有很多示例，但是它们都使用填充来剪辑视图。

我试图仅使用路径的笔触，但显示不正确。

以下是我目前在Swift 3.x中拥有的功能：

let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 0, y: 0))
bezierPath.addLine(to: CGPoint(x: 100, y: 100))
bezierPath.addLine(to: CGPoint(x: 200, y: 50))
bezierPath.addLine(to: CGPoint(x: 300, y: 100))
bezierPath.lineWidth = 5.0
bezierPath.stroke()

let gradient = Gradient(frame: self.bounds)
let mask = CAShapeLayer()

mask.path = bezierPath.cgPath
gradient.layer.mask = mask

self.addSubview(gradient)

但是，上面的代码可以做到这一点。我正在寻找仅将笔划用作蒙版...这是代码当前正在执行的操作

这是理想的结果。

（此comp快照中还有更多点）

我意识到，可能会有更好的方法，欢迎任何想法或替代方案！

---

-更新01--

我的最新作品，但掩盖了一切：

let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 0, y: 0))
bezierPath.addLine(to: CGPoint(x: 100, y: 100))
bezierPath.addLine(to: CGPoint(x: 200, y: 50))
bezierPath.addLine(to: CGPoint(x: 300, y: 100))
bezierPath.lineWidth = 5.0
bezierPath.stroke()

let gradient = Gradient(frame: self.bounds)

UIGraphicsBeginImageContext(CGSize(width: gradient.bounds.width, height: gradient.bounds.height))
let context : CGContext = UIGraphicsGetCurrentContext()!
context.addPath(bezierPath.cgPath)

let image = UIGraphicsGetImageFromCurrentImageContext()
gradient.layer.mask?.contents = image?.cgImage

和..在尝试用CAShapeLayer弄清楚之后无济于事：

let mask = CAShapeLayer()
mask.fillColor = UIColor.black.cgColor
mask.strokeColor = UIColor.black.cgColor
mask.fillRule = kCAFillModeBoth
mask.path = bezierPath.cgPath
gradient.layer.mask = mask
self.addSubview(gradient)

---

-更新02-工作解决方案-

感谢大家的帮助！

let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 0, y: 0))
bezierPath.addLine(to: CGPoint(x: 100, y: 300))
bezierPath.addLine(to: CGPoint(x: 200, y: 50))
bezierPath.addLine(to: CGPoint(x: 300, y: 200))
bezierPath.addLine(to: CGPoint(x: 400, y: 100))
bezierPath.addLine(to: CGPoint(x: 500, y: 200))

let gradient = Gradient(frame: self.bounds) // subclass of UIView

let mask = CAShapeLayer()
mask.fillColor = nil
mask.strokeColor = UIColor.black.cgColor
mask.path = bezierPath.cgPath
mask.lineWidth = 5.0
gradient.layer.mask = mask

self.addSubview(gradient)

而且，结果就是我想要的：

Answer 1

一个UIBezierPath有几个属性，只有抚摸路径时，包括事lineWidth，lineCapStyle，lineJoinStyle，和miterLimit。

A CGPath没有这些属性。

因此，当您设置时，您设置mask.path = bezierPath.cgPath的所有笔触属性都不会bezierPath保留。您仅从提取了CGPath，UIBezierPath而没有其他任何属性。

您需要在CAShapeLayer而不是任何路径对象上设置描边属性。从而：

mask.path = bezierPath.cgPath
mask.lineWidth = 5

您还需要设置笔触颜色，因为默认的笔触颜色为nil，这意味着完全不要笔触：

mask.strokeColor = UIColor.white.cgColor

而且，由于您不希望形状层填充路径，因此需要将填充颜色设置为nil：

mask.fillColor = nil