Class SKAnimatedCanvasView

Namespace

SkiaSharp.Extended.UI.Blazor.Controls

Assembly

SkiaSharp.Extended.UI.Blazor.dll

A Blazor component that wraps SKCanvasView and drives a frame-update loop using a PeriodicTimer, mirroring the MAUI SKAnimatedSurfaceView pattern for Blazor applications.

public class SKAnimatedCanvasView : ComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IAsyncDisposable

Inheritance

object

ComponentBase

SKAnimatedCanvasView

Implements

IComponent

IHandleEvent

IHandleAfterRender

IAsyncDisposable

Inherited Members

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.SetParametersAsync(ParameterView)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

Subclass this component and override UpdateAsync(TimeSpan) to update your animation state on each frame, and subscribe to OnPaintSurface to render your content.

The animation loop runs at approximately 60 fps while IsAnimationEnabled is true. Setting it to false stops the loop; setting it back to true restarts it.

Constructors

SKAnimatedCanvasView()

Properties

AdditionalAttributes

Additional HTML attributes to be applied to the underlying SKCanvasView element (e.g., style, class).

IsAnimationEnabled

Gets or sets whether the animation loop is running. Defaults to true.

OnPaintSurface

Callback invoked each time the canvas needs to be redrawn. Subscribe here to render your content onto the SKCanvas.

OnUpdate

Callback invoked on each frame tick with the elapsed time since the previous frame. Use this to update animation state from a parent component.

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

DisposeAsync()

Invalidate()

Forces the canvas to repaint on the next frame.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

UpdateAsync(TimeSpan)

Called once per frame before the canvas is invalidated. Override this method in a subclass to update animation state.