跳转至
Protocol

Shape

A 2D shape that you can use when drawing a view.

Declaration

protocol Shape : Animatable, View

Overview

This procol inherits from the View protocol, so all shapes can be used just like any other view. However, there are many default methods that shapes have which views do not.

Using a pre-defined shape

In addition to the ability to create your own shape, there are also many pre-defined shapes for you to use:

  1. Capsule
  2. Circle
  3. ContainerRelativeShape
  4. Ellipse
  5. Path
  6. Rectangle
  7. RoundedRectangle

Example usage would look like this:

struct PillView: View {
    var body: some View {
        Capsule()
    }
}
A screenshot displaying a solid black capsule occupying most of the screen space. Here, a predefined shape is used.

Check out these shapes directly for more info on how to use them.

Creating your own shape

The only requirement of conforming to the shape protocol is implementing the path(in:) method. This method passes in the shape's bounding rectangle, and expects a Path object in return.

The most simple example of creating your own shape is a rectangle that looks like this:

struct SimplestShapeView: View {
    var body: some View {
        RectangleShape()
    }
}

struct RectangleShape: Shape {
    func path(in rect: CGRect) -> Path {
        return Path(rect)
    }
}
A screenshot displaying a solid black rectangle taking up the entirety of the screen space besides the safe areas. The rectangle is created using the path method.

For more info on how to create a path from a bounding rectangle, check out the Path structure.

  • Note: In general, while view modifiers can be applied to shapes, note that applying a view modifier will return a View rather than a shape. Whenever possible, try to use shape modifiers instead of view modifiers to accomplish the same tasks with your shapes.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Instance Property

body The content and behavior of the view.


Instance Method

fill(_:style:) Fills this shape with a color or gradient.

fill(style:) Fills this shape with the foreground color.

offset(_:) Changes the relative position of this shape using the specified size.

offset(_:) Changes the relative position of this shape using the specified point.

offset(x:y:) Changes the relative position of this shape using the specified point.

path(in:) Describes this shape as a path within a rectangular frame of reference.

rotation(_:anchor:) Rotates this shape around an anchor point at the angle you specify.

scale(_:anchor:) Scales this shape without changing its bounding frame.

scale(x:y:anchor:) Scales this shape without changing its bounding frame.

size(_:) Changes the shape's size from a CGSize.

size(width:height:) Changes the shape's size from a width and height.

stroke(_:lineWidth:) Traces the outline of this shape with a color or gradient.

stroke(_:style:) Traces the outline of this shape with a color or gradient.

stroke(lineWidth:) Traces the outline of this shape with the view's foreground color.

stroke(style:) Traces the outline of this shape with the view's foreground color.

transform(_:) Applies an affine transform to this shape.

trim(from:to:) Trims this shape by a fractional amount based on its representation as a path.