CAShapeLayer带有边框、填充颜色和圆角。

Question

我该如何使用CAShapeLayer绘制既有边框颜色、边框宽度又有填充颜色的线条？

这是我尝试过的方法，但它只能呈现蓝色...

self.lineShape.strokeColor = [UIColor blueColor].CGColor;
self.lineShape.fillColor = [UIColor greenColor].CGColor;
self.lineShape.lineWidth = 100;
self.lineShape.lineCap = kCALineCapRound;
self.lineShape.lineJoin = kCALineJoinRound;
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:self.lineStart];
[path addLineToPoint:self.lineEnd];
self.lineShape.path = path.CGPath;

- jjxtra

---

对于那些寻找“为什么边框不显示”的人： 将 borderWidth 更改为 lineWidth，将 borderColor 更改为 strokeColor。 - Farras Doko

Answer 1

以下是从AechoLiu答案中合并的Swift 3+扩展方法：

// Usage:
self.btnGroup.roundCorner([.topRight, .bottomRight], radius: 4.0, borderColor: UIColor.red, borderWidth: 1.0)

// Apply round corner and border. An extension method of UIView.
public func roundCorner(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {

let path = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))

let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask

let borderPath = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let borderLayer = CAShapeLayer()
borderLayer.path = borderPath.cgPath
borderLayer.lineWidth = borderWidth
borderLayer.strokeColor = borderColor.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.frame = self.bounds
self.layer.addSublayer(borderLayer)

}

Objective-C：

self.lineShapeBorder = [[CAShapeLayer alloc] init];
self.lineShapeBorder.zPosition = 0.0f;
self.lineShapeBorder.strokeColor = [UIColor blueColor].CGColor;
self.lineShapeBorder.lineWidth = 25;
self.lineShapeBorder.lineCap = kCALineCapRound;
self.lineShapeBorder.lineJoin = kCALineJoinRound;
     
self.lineShapeFill = [[CAShapeLayer alloc] init];
[self.lineShapeBorder addSublayer:self.lineShapeFill];
self.lineShapeFill.zPosition = 0.0f;
self.lineShapeFill.strokeColor = [UIColor greenColor].CGColor;
self.lineShapeFill.lineWidth = 20.0f;
self.lineShapeFill.lineCap = kCALineCapRound;
self.lineShapeFill.lineJoin = kCALineJoinRound;
  
// ...
    
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:self.lineStart];
[path addLineToPoint:self.lineEnd];
// call addLineToPoint over and over to create the outline for the shape
self.lineShapeBorder.path = self.lineShapeFill.path = path.CGPath;

还要提醒 @FarrasDoko 尝试将 borderWidth 更改为 lineWidth，将borderColor 更改为 strokeColor。

- jjxtra

---

我在使用单一路径和形状图层时运气不佳，因此仍然坚持使用这个答案 :) - jjxtra

结合Swift和Obj的答案，更易于程序员消化。 - jjxtra

请问您在编辑后能否指明 Swift 版本的来源？谢谢。 - AechoLiu

Answer 2

如果您将图层的fillColor属性设置为除nil或透明之外的其他颜色，则该图层将填充其路径。

如果您将图层的lineWidth设置为大于零的数字，并将其strokeColor设置为除nil或透明之外的其他颜色，则该图层将描绘其路径。

如果您设置了所有这些属性，则该图层将填充并描绘其路径。它在填充后绘制描边。

图层的路径必须实际包围某些区域，才能填充任何内容。在您的帖子中，您像这样设置了路径：

UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:self.lineStart];
[path addLineToPoint:self.lineEnd];
self.lineShape.path = path.CGPath;

该路径只包含一条线段。它不围绕任何区域，因此该层没有需要填充的部分。

- rob mayoff

---

那么我的路径需要是一个多边形吗？ - jjxtra

@PsychoDad，你的路径可以是一个多边形，也可以有曲线边缘。它必须具有非零面积。单个线段的面积为零。 - rob mayoff

Answer 3

在Swift 3中，UIView有一个扩展方法。

// Usage:
self.btnGroup.roundCorner([.topRight, .bottomRight], radius: 4.0, borderColor: UIColor.red, borderWidth: 1.0)

// Apply round corner and border. An extension method of UIView.
public func roundCorner(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
    let path = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))

    let mask = CAShapeLayer()
    mask.path = path.cgPath
    self.layer.mask = mask

    let borderPath = UIBezierPath.init(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let borderLayer = CAShapeLayer()
    borderLayer.path = borderPath.cgPath
    borderLayer.lineWidth = borderWidth
    borderLayer.strokeColor = borderColor.cgColor
    borderLayer.fillColor = UIColor.clear.cgColor
    borderLayer.frame = self.bounds
    self.layer.addSublayer(borderLayer)
}

- AechoLiu