Blazor.Extensions.Canvasを使ったお絵かきソフト

Blazor WASMで簡単なお絵かきするソフトです。

CanvasをラッピングしたBlazozrのライブラリを利用しています。

動作するソースはこちら
大きくないのでするっと理解できると思います。

実装

絵を描画する領域はBECanvasをrazorに置きます。

    <BECanvas Width="@CanvasWidth" Height="@CanvasHeight" @ref="_canvasReference"></BECanvas>

インスタンスを取得するため

    protected BECanvas _canvasReference = default!;
    int CanvasWidth { get; } = 400;
    int CanvasHeight { get; } = 400;

インスタンスからCanvas2DContextを取得します

   var context = await _canvasReference.CreateCanvas2DAsync();

Canvas2DContextに対して描画メソッドを呼びます

   await context.FillRectAsync(x1, y1, 10, 10);

サンプルソース

サンプルでは四角を使った点の描画と線の描画を行っています

<div class="drawArea" @onmousedown="MouseDown" @onmouseup="MouseUp" @onmousemove="MouseMove" style="@($"width: {CanvasWidth}px;height:{CanvasHeight}px")">
    <BECanvas Width="@CanvasWidth" Height="@CanvasHeight" @ref="_canvasReference"></BECanvas>
</div>

MouseのDown,Move,Upのイベントを取得し描画を行っています。

参考ページ

図形の書き方が乗っています(https://super-string37.com/entry/2023/01/02/130012)