CAShapeLayer with border and fill color and rounding

Question

How to use CAShapeLayer to draw a line that has both border color, border width and fill color?

Here is what I tried, but it has only ever been blue ...

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; 

Answer 1

  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]; self.lineShapeBorder.path = self.lineShapeFill.path = path.CGPath; 

Answer 2

If you set the layer fillColor value other than nil or transparent, the layer will fill its path.

If you set the lineWidth layer lineWidth number greater than zero, and you set its strokeColor to something other than nil or transparent, the layer will stroke its path.

If you set all these properties, the layer will fill and stroke its path. It draws a stroke after filling.

The layer path must actually enclose some area so that it can fill something. In your message, you set the path as follows:

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

This path contains one line segment. It does not cover any area, so nothing is filled on the layer.

Answer 3

In Swift 3., the extension method is 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) }