Použití vlastních funkcí JavaScriptu v serverové aplikaci Blazor k úpravě HTML5 Canvas

Integrace JavaScriptu s HTML5 Canvas v Blazoru

Aplikace Blazor Server poskytují vývojářům flexibilitu při vytváření výkonných webových aplikací pomocí technologií C# a .NET. Existují však scénáře, kdy je nutné využít JavaScript, zejména pro úkoly, jako je manipulace s prvkem plátna HTML5. Jeden takový scénář zahrnuje dynamické kreslení na plátno na základě dat procházejících komponentou Blazor.

V tomto konkrétním nastavení můžete mít na stránce Blazor Razor smyčku, kde se seznam dat používá ke generování jednotlivých prvků HTML canvas. Pro každé plátno chcete zavolat vlastní funkci JavaScriptu k vykreslení obrázků nebo tvarů. Tato kombinace C# a JavaScriptu nabízí jedinečnou výzvu, ale poskytuje velkou všestrannost.

I když jste svůj kód JavaScript mohli úspěšně otestovat v samostatných projektech HTML, jeho integrace do Blazor, zejména jeho volání ze sekce Razor HTML, vyžaduje jiný přístup. Zde vstupuje do hry Blazorova spolupráce JavaScript, konkrétně prostřednictvím služby `IJSRuntime`.

V této příručce prozkoumáme, jak můžete zavolat svou vlastní funkci JavaScriptu pro manipulaci s plátnem z části HTML projektu serveru Blazor. Proces rozebereme krok za krokem, abychom zajistili hladkou integraci mezi Blazorem a JavaScriptem.

Vysvětlení spolupráce Blazor a JavaScriptu pro manipulaci s plátnem

První příklad skriptu ukazuje, jak využít IJSRuntime k vyvolání funkcí JavaScriptu z komponenty Blazor. The @injekce direktiva se používá k injekci IJSRuntime služba, která usnadňuje komunikaci mezi Blazorem a JavaScriptem. To je nezbytné, když potřebujete manipulovat s prvky HTML, jako je např HTML5 plátno z C#. V tomto příkladu smyčka prochází seznamem dat a pro každou položku v seznamu je dynamicky generován prvek plátna. Pomocí kliknutí na tlačítko funkce JavaScript kreslitObraz se zavolá, předá ID plátna a odpovídající data.

Klíčem k tomuto přístupu je použití InvokeVoidAsync, metoda, která umožňuje C# volat funkce JavaScriptu bez očekávání návratové hodnoty. To je důležité, když chcete jednoduše provést akci, například nakreslit obrázek na plátno, a nepotřebujete odpověď z JavaScriptu. Další pozoruhodnou částí je OnAfterRenderAsync metoda životního cyklu v Blazoru, která zajišťuje volání funkce JavaScriptu po úplném vykreslení komponenty. To je zvláště důležité při manipulaci s prvky DOM, jako je plátno, protože příliš brzký pokus o přístup k plátnu může vést k chybám.

Ve druhém příkladu skriptu je představen modulárnější přístup pomocí IJSObjectReference. To vám umožní načíst kód JavaScript jako modul, který lze znovu použít ve více komponentách. Modul se načte jednou a v případě potřeby se v něm zavolají funkce. Tato metoda zlepšuje udržovatelnost kódu a usnadňuje správu větších kódových bází JavaScriptu. Pokud modul JavaScript importujete pouze jednou, zvýší se výkon vaší aplikace a vyhnete se zbytečnému opětovnému načítání skriptů.

Nakonec skript pro testování jednotek používá Moq knihovny, abyste zajistili, že interop volání JavaScriptu fungují správně. The Ověřitelný metoda se používá k označení očekávaných volání do InvokeAsync jako ověřitelné, což znamená, že během testů můžete zkontrolovat, zda byla interop funkce skutečně volána se správnými parametry. Tato metoda zajišťuje, že integrace mezi Blazor a JavaScript je robustní, a přidává do vašeho projektu další vrstvu spolehlivosti ověřováním správnosti interop volání během testování.

// 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();
    }
}

Zkoumání JavaScript Interop pro dynamickou manipulaci s plátnem v Blazoru

Schopnost volat vlastní funkce JavaScriptu v Blazoru otevírá výkonné možnosti pro dynamickou front-end manipulaci, zejména při práci s grafickými prvky, jako je HTML5 plátno. Jedním z klíčových aspektů tohoto procesu, který ještě nebyl pokryt, je použití asynchronních volání JavaScriptu v architektuře Blazor na straně serveru. Jelikož Blazor funguje na serveru, komunikace mezi klientem a serverem je řešena pomocí SignalR, což znamená, že když zavoláte funkci JavaScript ze stránky Razor, interakce se mírně zpozdí. Pochopení toho, jak zacházet s těmito asynchronními operacemi, zajišťuje, že manipulace s plátnem proběhne hladce.

Dalším důležitým faktorem je optimalizace způsobu interakce JavaScriptu a C#, když je na stránce více prvků plátna. Když procházíte seznamem a každá položka má svůj vlastní prvek plátna, úkolem je zajistit, aby každé plátno obdrželo správné pokyny pro kreslení z odpovídající funkce JavaScriptu. To lze efektivně zvládnout tím, že zajistíte, aby každé plátno mělo jedinečný identifikátor, předaný jako parametr v interopovém volání. Správné zpracování chyb a ověření v JavaScriptu se také stávají zásadními při zpracování více pláten.

A konečně, úvahy o výkonu jsou důležité při řešení interoperace JavaScriptu v Blazoru. Zatímco malé skripty ve většině případů fungují dobře, náročné operace plátna, jako je vykreslování složitých tvarů nebo obrázků, mohou způsobit omezení výkonu, pokud nejsou optimalizovány. Techniky, jako je omezení velikosti plátna, použití pláten mimo obrazovku nebo hromadné zpracování grafických změn, mohou pomoci zlepšit rychlost vykreslování. Pochopení těchto optimalizačních strategií zajistí, že vaše aplikace Blazor zůstane výkonná při zpracování složitých úloh front-end vykreslování.