Rive offers multiple options for controlling how graphics are laid out within the canvas, view, widget, or texture.
Fit
to Fit.Layout
- this will automatically scale and resize the artboard to match the canvas size when calling resizeDrawingSurfaceToCanvas()
.layoutScaleFactor
for manual control of the artboard size (scale factor).window.onresize
and call resizeDrawingSurfaceToCanvas()
to adjust the artboard size as the canvas and window changes.resizeDrawingSurfaceToCanvas()
to ensure the artboard updates correctly on various screen densities. For example, when dragging the window between multiple monitors with different device pixel ratios.Layout
object to configure Fit
and Alignment
. See Fit and Alignment below for all enum options.Layout
: Rive content will be resized automatically based on layout constraints of the artboard to match the underlying view size. See the above for more information on how to use this option.Cover
: Rive will cover the view, preserving the aspect ratio. If the Rive content has a different ratio to the view, then the Rive content will be clipped.Contain
: (Default) Rive content will be contained within the view, preserving the aspect ratio. If the ratios differ, then a portion of the view will be unused.Fill
: Rive content will fill the available view. If the aspect ratios differ, then the Rive content will be stretched.FitWidth
: Rive content will fill to the width of the view. This may result in clipping or unfilled view space.FitHeight
: Rive content will fill to the height of the view. This may result in clipping or unfilled view space.None
: Rive content will render to the size of its artboard, which may result in clipping or unfilled view space.ScaleDown
: Rive content is scaled down to the size of the view, preserving the aspect ratio. This is equivalent to Contain
when the content is larger than the canvas. If the canvas is larger, then ScaleDown
will not scale up.Center
(Default)TopLeft
TopCenter
TopRight
CenterLeft
CenterRight
BottomLeft
BottomCenter
BottomRight
minX
minY
maxX
maxY