跳转至
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.

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:

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.