CAShapeLayer con borde y relleno de color y redondeo

Question

¿Cómo uso CAShapeLayer para dibujar una línea que tiene tanto un color de borde, ancho de borde y color de relleno?

Aquí es lo que he intentado, pero es solamente siempre azul ...

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

Si establece la propiedad de la capa fillColor a algo distinto de nil o transparente, la capa llenará su paso.

Si configura el lineWidth de la capa en un número mayor que cero y configura su strokeColor en un valor distinto de nil o transparente, la capa recorrerá su ruta.

Si configura todas esas propiedades, la capa llenará y siguiendo su ruta. Dibuja el trazo después del relleno.

La ruta de la capa debe en realidad encerrar un área para que pueda rellenar cualquier cosa. En su publicación, configure la ruta de la siguiente manera:

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

Esa ruta contiene un solo segmento de línea. No encierra ningún área, por lo que la capa no tiene nada que llenar.

Answer 3

En Swift 3. un método de extensión de 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) 
}