blazorとPIXIJSをつかって、数個の座標を結ぶ線を引いてみます。

準備

.NET Core 3.0 Preview SDK を使っています。こんな感じでコマンド打ちます。


dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01
dotnet new blazor -o randomrect
cd randomrect

実装

今回は、3つのファイルを変更します。

wwwroot/index.html

scriptを読み込んでるだけです。

wwwroot/helper.js

BlazorとPIXIJSを繋ぐためのヘルパーです。「CreatePIXI」と「DrawLine」

Pages/Index.razor

ライフサイクルイベントOnAfterRenderAsyncの中で、

「CreatePIXI」の呼び出し、

xy座標として使う、数字の配列を引数に「DrawLine」を呼び出し、

とやっています。

動作確認

dotnet run

こんな感じなります。