https://github.com/isc30/blazor-canvas
Canvas Components for easy graphic rendering (WASM+ServerSide)
https://github.com/isc30/blazor-canvas
Last synced: 10 months ago
JSON representation
Canvas Components for easy graphic rendering (WASM+ServerSide)
- Host: GitHub
- URL: https://github.com/isc30/blazor-canvas
- Owner: isc30
- Created: 2019-05-18T18:02:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-19T16:53:31.000Z (about 7 years ago)
- Last Synced: 2024-11-17T07:27:40.107Z (over 1 year ago)
- Language: C#
- Homepage:
- Size: 24.4 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blazor.Canvas
Blazor Canvas Components for easy graphics rendering
## Supported Rendering Contexts
- [x] 2D
- [x] WebAssembly
- [x] ServerSide Blazor
- [ ] WebGL (WIP)
## Important Note about Context
Calling JS from .NET is an expensive operation, that's why every operation on the context is being batched.
It is required to call `Context.RenderAsync()` to actually perform the rendering: it pops all the pending operations and applies them in the browser.
> Please remember to call `Context.RenderAsync()` in the end to actually perform the rendering in the canvas!
## 2D Rendering Context
The lib includes some components ready to be used for 2D rendering:
- ### `Canvas2DComponent` for static rendering
This component will render a `canvas` element in the screen and create the 2D context for you.
Your custom component should inherit from `Canvas2DComponent` and override `OnAfterContextCreatedAsync()`.
Use `Context` from the base to invoke render operations.
```cs
public sealed class HelloCanvas : Canvas2DComponent
{
protected override async Task OnAfterContextCreatedAsync()
{
Context.SetFillStyle("orange");
Context.FillRect(x: 50, y: 50, width: 50, height: 50);
await Context.RenderAsync();
}
}
```
- ### `Surface2DComponent` for realtime rendering
Same as `Canvas2DComponent`, but this time you will need to override `Task RequestFrameAsync()`.
Also, add `[JSInvokable]` to `RequestFrameAsync` so it can be automatically invoked from javascript every frame by the browser (using `requestAnimationFrame` in the background).
Return `true` from `RequestFrameAsync` if you want a new frame to be requested and `false` if you want to stop the realtime rendering.
```cs
public sealed class Clock : Surface2DComponent
{
[JSInvokable(nameof(Clock) + nameof(RequestFrameAsync))]
public override async Task RequestFrameAsync()
{
Context.Clear("white");
Context.SetFillStyle("black");
Context.SetFont("24px Arial");
Context.FillText(DateTime.Now.Millisecond.ToString(), 25, 25);
await Context.RenderAsync();
return true;
}
}
```