Blazor サーバー アプリケーションでカスタム JavaScript 関数を使用して HTML5 キャンバスを変更する

Blazor での JavaScript と HTML5 Canvas の統合

Blazor Server アプリケーションは、開発者に C# および .NET テクノロジを使用して強力な Web アプリケーションを構築する柔軟性を提供します。ただし、特に HTML5 キャンバス要素の操作などのタスクでは、JavaScript の活用が必要になるシナリオがあります。そのようなシナリオの 1 つは、Blazor コンポーネントを介して渡されたデータに基づいてキャンバス上に動的に描画することを含みます。

この特定の設定では、Blazor Razor ページにデータのリストを使用して個々の HTML キャンバス要素を生成するループが存在する場合があります。キャンバスごとに、カスタム JavaScript 関数を呼び出して、画像または図形をレンダリングします。この C# と JavaScript の組み合わせには独特の課題がありますが、優れた汎用性が得られます。

スタンドアロン HTML プロジェクトで JavaScript コードを正常にテストできたとしても、それを Blazor 内に統合する場合、特に Razor HTML セクションから呼び出す場合には、別のアプローチが必要です。ここで、Blazor の JavaScript 相互運用機能が、特に「IJSRuntime」サービスの使用を通じて登場します。

このガイドでは、カスタム JavaScript 関数を呼び出して、Blazor サーバー プロジェクトの HTML セクション内からキャンバスを操作する方法を説明します。 Blazor と JavaScript をスムーズに統合できるように、プロセスを段階的に説明します。

Canvas 操作のための Blazor と JavaScript の相互運用性の説明

最初のスクリプト例は、 IJSランタイム Blazor コンポーネント内から JavaScript 関数を呼び出します。の @inject ディレクティブは、 IJSランタイム Blazor と JavaScript 間の通信を容易にするサービス。これは、次のような HTML 要素を操作する必要がある場合に不可欠です。 HTML5キャンバス C#から。この例では、ループがデータのリストを処理し、リスト内の項目ごとに Canvas 要素が動的に生成されます。ボタンをクリックすると、JavaScript 関数が使用されます。 描画イメージ が呼び出され、キャンバスの ID と対応するデータが渡されます。

このアプローチの鍵となるのは、 VoidAsync を呼び出す、C# が戻り値を期待せずに JavaScript 関数を呼び出せるようにするメソッドです。これは、キャンバス上に画像を描画するなど、単にアクションを実行したいだけで、JavaScript からの応答が必要ない場合に重要です。もう一つの注目すべき部分は、 OnAfterRender非同期 Blazor のライフサイクル メソッド。これにより、コンポーネントが完全にレンダリングされた後に JavaScript 関数が確実に呼び出されます。これは、キャンバスなどの DOM 要素を操作する場合に特に重要です。キャンバスにアクセスするのが早すぎるとエラーが発生する可能性があるためです。

2 番目のスクリプト例では、次を使用して、よりモジュール化されたアプローチが導入されています。 IJSオブジェクトリファレンス。これにより、JavaScript コードをモジュールとしてロードし、複数のコンポーネント間で再利用できるようになります。モジュールは一度ロードされると、必要に応じてモジュール内の関数が呼び出されます。この方法により、コードの保守性が向上し、大規模な JavaScript コードベースの管理が容易になります。 JavaScript モジュールを 1 回だけインポートすることで、アプリケーションのパフォーマンスが向上し、スクリプトの不必要なリロードを回避できます。

最後に、単体テスト スクリプトは モク ライブラリを使用して、JavaScript 相互運用呼び出しが正しく機能していることを確認します。の 検証可能 メソッドは、予想される呼び出しをマークするために使用されます。 InvokeAsync つまり、テスト中に、相互運用機能が正しいパラメーターで実際に呼び出されたかどうかを確認できます。この方法により、Blazor と JavaScript 間の統合が確実に堅牢になり、テスト中に相互運用呼び出しの正確性を検証することでプロジェクトの信頼性がさらに高まります。

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private async Task DrawImageOnCanvas(MyData data)
    {
        await JSRuntime.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private IJSObjectReference _jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MyJavaScript.js");
        }
    }
    private async Task DrawImageOnCanvas(MyData data)
    {
        await _jsModule.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// TestComponent.razor.cs
@page "/testpage"
@inject IJSRuntime JSRuntime
@code {
    public void TestDrawImage()
    {
        var jsInteropMock = new Mock<IJSRuntime>();
        jsInteropMock.Setup(x => x.InvokeAsync<Void>("drawImage", It.IsAny<object[]>())).Verifiable();
        jsInteropMock.Verify();
    }
}

Blazor での動的キャンバス操作のための JavaScript 相互運用性の探索

Blazor では、カスタム JavaScript 関数を呼び出す機能により、特に次のようなグラフィック要素を操作する場合に、動的なフロントエンド操作のための強力なオプションが開かれます。 HTML5キャンバス。このプロセスの重要な側面の 1 つはまだ説明されていませんが、Blazor のサーバー側アーキテクチャ内での非同期 JavaScript 呼び出しの使用です。 Blazor はサーバー上で動作するため、クライアントとサーバー間の通信は SignalR を介して処理されます。つまり、Razor ページから JavaScript 関数を呼び出すと、対話がわずかに遅れます。これらの非同期操作の処理方法を理解すると、キャンバスの操作がスムーズに行われます。

もう 1 つの重要な要素は、ページ上に複数のキャンバス要素がある場合に JavaScript と C# が対話する方法を最適化することです。リストをループしていて、各項目に独自の キャンバス要素、課題は、各キャンバスが対応する JavaScript 関数から正しい描画命令を確実に受け取るようにすることです。これは、各キャンバスに相互運用呼び出しのパラメーターとして渡される一意の識別子があることを確認することで効率的に処理できます。複数のキャンバスを処理する場合には、JavaScript 内での適切なエラー処理と検証も重要になります。

最後に、Blazor で JavaScript 相互運用を扱う場合、パフォーマンスに関する考慮事項が重要になります。小さなスクリプトはほとんどの場合うまく機能しますが、複雑な形状や画像のレンダリングなどの重いキャンバス操作は、最適化されていないとパフォーマンスのボトルネックを引き起こす可能性があります。キャンバスのサイズの制限、オフスクリーン キャンバスの使用、グラフィック変更のバッチ処理などの手法は、レンダリング速度の向上に役立ちます。これらの最適化戦略を理解すると、複雑なフロントエンド レンダリング タスクを処理しながら、Blazor アプリのパフォーマンスを維持できるようになります。