Använda anpassade JavaScript-funktioner i en Blazor Server-applikation för att ändra HTML5 Canvas

Integrering av JavaScript med HTML5 Canvas i Blazor

Blazor Server-applikationer ger utvecklare flexibiliteten att bygga kraftfulla webbapplikationer med C#- och .NET-teknik. Det finns dock scenarier där det blir nödvändigt att använda JavaScript, särskilt för uppgifter som att manipulera HTML5-canvaselementet. Ett sådant scenario involverar att dynamiskt rita på en duk baserat på data som skickas genom en Blazor-komponent.

I den här specifika installationen kan du ha en slinga på din Blazor Razor-sida där en lista med data används för att generera individuella HTML-canvaselement. För varje duk vill du anropa en anpassad JavaScript-funktion för att rendera bilder eller former. Denna kombination av C# och JavaScript erbjuder en unik utmaning men ger stor mångsidighet.

Även om du kan ha testat din JavaScript-kod framgångsrikt i fristående HTML-projekt, kräver integrering av den i Blazor, särskilt genom att kalla den från Razor HTML-sektionen, ett annat tillvägagångssätt. Det är här Blazors JavaScript-interop kommer in i bilden, speciellt genom användningen av tjänsten `IJSRuntime`.

I den här guiden kommer vi att utforska hur du kan anropa din anpassade JavaScript-funktion för att manipulera arbetsytan från Blazor-serverprojektets HTML-sektion. Vi kommer att bryta ner processen steg för steg för att säkerställa smidig integration mellan Blazor och JavaScript.

Förklara Blazor och JavaScript Interop för Canvas Manipulation

Det första skriptexemplet visar hur man utnyttjar IJSRuntime för att anropa JavaScript-funktioner från en Blazor-komponent. De @injicera direktiv används för att injicera IJSRuntime tjänst, som underlättar kommunikationen mellan Blazor och JavaScript. Detta är viktigt när du behöver manipulera HTML-element som HTML5-duk från C#. I det här exemplet går en loop genom en lista med data, och för varje objekt i listan genereras ett canvaselement dynamiskt. Med ett knappklick, JavaScript-funktionen rita bild anropas och skickar dukens ID och motsvarande data.

Nyckeln till detta tillvägagångssätt är användningen av InvokeVoidAsync, en metod som gör att C# kan anropa JavaScript-funktioner utan att förvänta sig ett returvärde. Detta är viktigt när du bara vill utföra en åtgärd, som att rita en bild på duken, och inte behöver ett svar från JavaScript. En annan anmärkningsvärd del är OnAfterRenderAsync livscykelmetod i Blazor, som säkerställer att JavaScript-funktionen anropas efter att komponenten har renderats helt. Detta är särskilt viktigt när du manipulerar DOM-element som arbetsytan, eftersom försök att komma åt arbetsytan för tidigt kan resultera i fel.

I det andra skriptexemplet introduceras ett mer modulärt tillvägagångssätt med hjälp av IJSObjectReference. Detta gör att du kan ladda JavaScript-kod som en modul, som kan återanvändas över flera komponenter. Modulen laddas en gång och sedan anropas funktionerna i den vid behov. Denna metod förbättrar kodens underhållsbarhet och gör det lättare att hantera större JavaScript-kodbaser. Genom att endast importera JavaScript-modulen en gång förbättras prestandan för din applikation och du undviker att ladda om skript i onödan.

Slutligen använder enhetstestningsskriptet Moq bibliotek för att säkerställa att JavaScript-interop-anrop fungerar korrekt. De Verifierbar metod används för att markera förväntade anrop till InvokeAsync som verifierbar, vilket innebär att du under tester kan kontrollera om interop-funktionen verkligen anropades med rätt parametrar. Den här metoden säkerställer att integrationen mellan Blazor och JavaScript är robust, och den lägger till ett extra lager av tillförlitlighet till ditt projekt genom att validera korrektheten av interop-anrop under testning.

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

Utforska JavaScript Interop för dynamisk Canvas Manipulation i Blazor

I Blazor öppnar möjligheten att anropa anpassade JavaScript-funktioner kraftfulla alternativ för dynamisk front-end-manipulation, särskilt när man arbetar med grafiska element som HTML5-duk. En nyckelaspekt av denna process som ännu inte har täckts är användningen av asynkrona JavaScript-anrop inom Blazors serversida-arkitektur. Eftersom Blazor opererar på servern hanteras kommunikationen mellan klienten och servern via SignalR, vilket innebär att när du anropar en JavaScript-funktion från Razor-sidan fördröjs interaktionen något. Att förstå hur man hanterar dessa asynkrona operationer säkerställer att arbetsytans manipulation sker smidigt.

En annan viktig faktor är att optimera hur JavaScript och C# interagerar när det finns flera canvaselement på sidan. När du går igenom en lista och varje objekt har sin egen canvas element, utmaningen är att se till att varje duk får rätt ritningsinstruktioner från motsvarande JavaScript-funktion. Detta kan hanteras effektivt genom att se till att varje arbetsyta har en unik identifierare, som skickas som en parameter i interopsanropet. Korrekt felhantering och validering inom JavaScript blir också avgörande vid bearbetning av flera dukar.

Slutligen är prestandaöverväganden viktiga när man hanterar JavaScript-interop i Blazor. Även om små skript fungerar bra i de flesta fall, kan tunga dukoperationer som att rendera komplexa former eller bilder orsaka prestandaflaskhalsar om de inte optimeras. Tekniker som att begränsa storleken på duken, använda dukar utanför skärmen eller batchbearbetning av grafiska ändringar kan hjälpa till att förbättra renderingshastigheten. Genom att förstå dessa optimeringsstrategier säkerställer du att din Blazor-app förblir presterande samtidigt som du hanterar komplexa front-end-renderingsuppgifter.