Drawing and graphics
Enhance your views with graphical effects and customized drawings.
Overview
You create rich, dynamic user interfaces with the built-in views and Shapes that SwiftUI provides. To enhance any view, you can apply many of the graphical effects typically associated with a graphics context, like setting colors, adding masks, and creating composites.
[Image]
When you need the flexibility of immediate mode drawing in a graphics context, use a Canvas view. This can be particularly helpful when you want to draw an extremely large number of dynamic shapes — for example, to create particle effects.
For design guidance, see Materials and Color in the Human Interface Guidelines.
Topics
Immediate mode drawing
Setting a color
Styling content
border(_:width:)foregroundStyle(_:)foregroundStyle(_:_:)foregroundStyle(_:_:_:)backgroundStyle(_:)backgroundStyleShapeStyleAnyShapeStyleGradientMeshGradientAnyGradientShadowStyleGlass
Transforming colors
brightness(_:)contrast(_:)colorInvert()colorMultiply(_:)saturation(_:)grayscale(_:)hueRotation(_:)luminanceToAlpha()materialActiveAppearance(_:)materialActiveAppearanceMaterialActiveAppearance
Scaling, rotating, or transforming a view
scaledToFill()scaledToFit()scaleEffect(_:anchor:)scaleEffect(_:anchor:)scaleEffect(x:y:anchor:)scaleEffect(x:y:z:anchor:)aspectRatio(_:contentMode:)rotationEffect(_:anchor:)rotation3DEffect(_:axis:anchor:anchorZ:perspective:)perspectiveRotationEffect(_:axis:anchor:anchorZ:perspective:)rotation3DEffect(_:anchor:)rotation3DEffect(_:axis:anchor:)transformEffect(_:)transform3DEffect(_:)projectionEffect(_:)ProjectionTransformContentMode
Masking and clipping
Applying blur and shadows
Applying effects based on geometry
Compositing views
blendMode(_:)compositingGroup()drawingGroup(opaque:colorMode:)BlendModeColorRenderingModeCompositorContentCompositorContentBuilderAnyCompositorContent
Measuring a view
GeometryReaderGeometryReader3DGeometryProxyGeometryProxy3DcoordinateSpace(_:)CoordinateSpaceCoordinateSpaceProtocolPhysicalMetricPhysicalMetricsConverter
Responding to a geometry change
Accessing Metal shaders
colorEffect(_:isEnabled:)distortionEffect(_:maxSampleOffset:isEnabled:)layerEffect(_:maxSampleOffset:isEnabled:)ShaderShaderFunctionShaderLibrary