Structure¶

StrokeStyle¶

A structure describing how to stroke a Shape in a particular style.¶

Declaration¶

@frozen struct StrokeStyle : Equatable

Overview¶

Use this structure to stroke (add a border to) a Shape in a customized way.

Note: You cannot use a StrokeStyle when applying a border(_:width:) to a View. Instead, use ShapeStyle.

Creating a StrokeStyle¶

Create a StrokeStyle using its initilizer, init(lineWidth:lineCap:lineJoin:miterLimit:dash:dashPhase:). A simple example is below.

let style = StrokeStyle(lineWidth: 5, lineCap: .butt)

Using a StrokeStyle¶

Use the stroke(_:style:) or stroke(style:) methods to add a custom stroke to a Shape.

For example, here is a stroke style applied to a Capsule:

struct StrokedCapsuleView: View {
    let style = StrokeStyle(lineWidth: 5,
                            lineCap: .round,
                            lineJoin: .miter,
                            miterLimit: 0,
                            dash: [5, 10],
                            dashPhase: 0)
    var body: some View {
        Capsule()
            .stroke(Color.purple, style: style)
    }
}

A screenshot displaying a purple capsule shape made up of purple dashes that touches all four edges of the screen. StrokeStyle is used to specify the style of the dashes that make up the capsule shape.

In addition, two special kinds of Shapes have their own methods for adding strokes with custom styles:

InsettableShape: An insettable shape allows you to inset the shape by half the stroke width, then apply the stroke, so that the final result remains inside the original frame. To achieve this effect, use one of these methods:
- strokeBorder(_:style:antialiased:)
- strokeBorder(style:antialiased:)

struct CircleView: View {
    var body: some View {
        let style = StrokeStyle(lineWidth: 15,
                                lineCap: .butt,
                                lineJoin: .round,
                                miterLimit: 1,
                                dash: [],
                                dashPhase: 0)

        return Circle()
            .strokeBorder(style: style)
            .border(Color.primary)
    }
}

A screenshot displaying a thin black rectangular border hugging the edges of the screen with a thick black circular border inset. Here, there is no value passed to dash, so the circle appears as a consistent thick line.

Path: A path is a special kind of customizable shape. Use path's special stroking method, strokedPath(_:), to return another path, rather than a generic shape.

struct PaperCutoutView: View {
    var body: some View {
        CutHereLines()
            .stroke()
    }
}

struct CutHereLines: Shape {
    func path(in rect: CGRect) -> Path {
        let style = StrokeStyle(lineWidth: 3.0,
                                lineCap: .butt,
                                lineJoin: .bevel,
                                miterLimit: 3.0,
                                dash: [9.0, 9.0, 0.0, 9.0, 9.0, 9.0],
                                dashPhase: 0.0)
        return Path(rect)
            .strokedPath(style)
    }
}

A screenshot displaying a black rectangular border hugging the edges of the screen made up of two dashes followed by a dot. Setting the lineJoin parameter as bevel places the dot between the dashes.

Availability¶

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics¶

Initializer¶

init(lineWidth:lineCap:lineJoin:miterLimit:dash:dashPhase:) Creates a custom stroke style.

Type Alias¶

AnimatableData The type defining the data to animate.

Type Method¶

==(a:b:) Returns a Boolean value indicating whether two values are equal.

Instance Property¶

animatableData The data to animate.

dash The dash array for allowing the stroke to show discontinuities.

dashPhase The dash phase for moving the dashes forward or backward along the stroke.

lineCap The style for rendering the endpoint of the stroke line.

lineJoin The style for rendering the joining point of stroked lines.

lineWidth The width of the stroke, specified in points.

miterLimit The limit on the ratio of the miter length to stroke width.