Class

CAShape​Layer

A layer that draws a cubic Bezier spline in its coordinate space.

Overview

The shape is composited between the layer's contents and its first sublayer.

The shape will be drawn antialiased, and whenever possible it will be mapped into screen space before being rasterized to preserve resolution independence. However, certain kinds of image processing operations, such as CoreImage filters, applied to the layer or its ancestors may force rasterization in a local coordinate space.

Listing 1 shows how you can build complex, composite paths and display them using a shape layer. In this example, a series of progressively transformed ellipses form a simple flower shape. The shape layer that displays the path has its fill​Rule set to k​CAFill​Rule​Even​Odd which stops the overlapping "petals" from filling with the yellow fill​Color.

Listing 1

Creating a stylized flower with a shape layer

let width: CGFloat = 640
let height: CGFloat = 640
     
let shapeLayer = CAShapeLayer()
shapeLayer.frame = CGRect(x: 0, y: 0,
                          width: width, height: height)
     
let path = CGMutablePath()
     
stride(from: 0, to: CGFloat.pi * 2, by: CGFloat.pi / 6).forEach {
    angle in 
    var transform  = CGAffineTransform(rotationAngle: angle)
        .concatenating(CGAffineTransform(translationX: width / 2, y: height / 2))
    
    let petal = CGPath(ellipseIn: CGRect(x: -20, y: 0, width: 40, height: 100),
                       transform: &transform)
    
    path.addPath(petal)
}
    
shapeLayer.path = path
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.fillColor = UIColor.yellow.cgColor
shapeLayer.fillRule = kCAFillRuleEvenOdd

Figure 1 shows the resulting shape layer.

Figure 1

Composite path displayed in a shape layer

Composite path displayed in a shape layer

Symbols

Specifying the Shape Path

var path:​ CGPath?

The path defining the shape to be rendered. Animatable.

Accessing Shape Style Properties

var fill​Color:​ CGColor?

The color used to fill the shape’s path. Animatable.

var fill​Rule:​ String

The fill rule used when filling the shape’s path.

var line​Cap:​ String

Specifies the line cap style for the shape’s path.

var line​Dash​Pattern:​ [NSNumber]?

The dash pattern applied to the shape’s path when stroked.

var line​Dash​Phase:​ CGFloat

The dash phase applied to the shape’s path when stroked. Animatable.

var line​Join:​ String

Specifies the line join style for the shape’s path.

var line​Width:​ CGFloat

Specifies the line width of the shape’s path. Animatable.

var miter​Limit:​ CGFloat

The miter limit used when stroking the shape’s path. Animatable.

var stroke​Color:​ CGColor?

The color used to stroke the shape’s path. Animatable.

var stroke​Start:​ CGFloat

The relative location at which to begin stroking the path. Animatable.

var stroke​End:​ CGFloat

The relative location at which to stop stroking the path. Animatable.

Constants

Shape Fill Mode Values

These constants specify the possible fill modes for fill​Rule.

Line Join Values

These constants specify the shape of the joints between connected segments of a stroked path. Used by line​Join. Figure 1 shows the appearance of the line join styles.

Line Cap Values

These constants specify the shape of endpoints for an open path when stroked. Used by line​Cap. Figure 1 shows the appearance of the line cap styles.

Relationships

Inherits From