[JAVA] Ich habe versucht, Animationen mit der Blazor + Canvas-API zu zeichnen

Einführung

Ich habe eine einfache Webanwendung zum Zeichnen erstellt, mit der Animationen zum Lernen wie Blazor gezeichnet werden können. Ich spreche nur von der Verwendung von Blazor und schreibe TypeScript häufiger als C #.

Demo(Firebase) Source(GitHub)

Ich wünschte, ich könnte einen Anime wie einen mysteriösen Ani-Dan zeichnen, aber für mich ist das Blinken die Grenze.

Derzeit sind es nur 8 fps (sogenanntes Drei-Frame-Striking), aber irgendwann können wir die Framerate ändern. Es ist einfach, die Rate zu ändern, aber da 24 Bilder (24 fps: allgemeine Bildrate japanischer Animationen) normalerweise nicht für 1 Sekunde der Animationswiedergabe gezeichnet werden, ist es erforderlich, mit dem leeren Bild umzugehen.

Umgebung

Blazor WebAssembly 3.2.1 + .NET Standard 2.1 Microsoft.TypeScript.MSBuild 4.0.3 Firebase

Andere, wie z. B. Bootstrap, sind in der Blazor-Vorlage enthalten.

Über die Implementierung

Während Blazor Blazor sagt, steuert er nur die Benutzeroberfläche.

Wie zeichnet man eine Linie?

Als ich nach einer Implementierungsmethode zum Zeichnen einer Linie auf Canvas suchte, gab es viele Beispiele für die Verwendung der Methode "lineTo ()", aber wenn ich den Stift schnell bewegte, wurde es manchmal zu einer seltsamen Zeichenmethode, also der Stift Der Kreis wird entsprechend der Umlaufbahn platziert. Wenn Sie jedoch versuchen, so schnell wie es ist zu zeichnen, wird die Linie geschnitten, daher versuche ich, die Lücke mit einer kleinen Änderung zu füllen, wie unten gezeigt. Da es sich jedoch um eine lineare Ergänzung handelt, möchte ich eine etwas stärker gekrümmte Form in Betracht ziehen. Ich denke, ich muss Mathe überprüfen.

    private prevX :number;
    private prevY :number;
    public drawLineWithPen(x:number, y:number, isDrawing:boolean){
        let scaledX = x/this.scaleRate;
        let scaledY = y/this.scaleRate;
        if(!isDrawing) {
            this.context.beginPath();
            this.context.moveTo(scaledX,scaledY);
        } else {
            //Abteilungsnummer
            let div = 200;
            let dx = (scaledX - this.prevX) / div;
            let dy = (scaledY - this.prevY) / div;
            let r = this.context.lineWidth/2;
            for(let i = 0; i<=div; i++){
                let x = this.prevX + dx*i;
                let y = this.prevY + dy*i;
                this.context.beginPath();
                this.context.moveTo(x,y);
                this.context.arc(x,y, r, 0, 2 * Math.PI, false);
                this.context.stroke();
                this.context.fill();
                this.context.closePath();
            } 
        }
        this.prevX = scaledX;
        this.prevY = scaledY;
    }

Beim Einsetzen und Entfernen des Stifts denke ich an eine Form, die die Größe und Transparenz des Kreises mit dem Zeitunterschied als Parameter ändert.

So zeigen Sie Zwiebelschalen an

Zwiebelschale ist eine Funktion, die die Frames vor und nach dem Frame, den Sie bearbeiten, in einer bestimmten Farbe anzeigt. Dieses Mal wird der hintere Rahmen in Pink und der vordere Rahmen in Hellblau angezeigt.

Wir erstellen eine Kopie des zuvor gespeicherten ImageData-Arrays, ersetzen die Farben und legen die Transparenz fest. Nachdem die Bitmap-Daten erstellt wurden, werden sie nach der Methode von drawImage () in die Zeichenfläche geschrieben, um Zwiebelschalen anzuzeigen. Es wäre schön gewesen, mit ImageData direkt auf die Leinwand schreiben zu können, aber putImageData () ersetzt alles auf der Leinwand, also sieht es so aus.

private setOnionSkinsInternal(start:number, end:number, color:Color, frames: ImageData[], isPrev:boolean){
    let startNum = Math.max(start, 0);
    let endNum = Math.min(end,frames.length);
    for(let i= startNum; i< endNum; i++) {
        let imageData = new ImageData(frames[i].data.slice(),frames[i].width,frames[i].height);
        for(let j=0;j<imageData.data.length; j+=4) {
            imageData.data[j] = color.r;
            imageData.data[j+1] = color.g;
            imageData.data[j+2] = color.b;
            //Bilder, die weit vom aktuellen Bild entfernt sind, haben eine stärkere Transparenz und eine hellere Anzeige
            if(isPrev)
                imageData.data[j+3] = imageData.data[j+3] * (i+1) / (endNum+1);
            else
                imageData.data[j+3] = imageData.data[j+3] * (startNum+1) / (i+1);          
        }
        window.createImageBitmap(imageData).then(
            (img) => {
                // scale()Da das Bild durch die eingestellte Vergrößerung weiter verkleinert wird, dividieren Sie durch die Vergrößerung?
                this.context.drawImage(img,0,0,this.width/this.scaleRate,this.height/this.scaleRate);
            }
        ).catch(() => {
            console.log(`${i} Error`)});
    }
}

Es gibt 921.600 oder mehr Schleifen pro Blatt. Wenn Sie also versuchen, die Größe zu erhöhen und etwa 10 Blätter anzuzeigen, ist dies ziemlich schwer. Ich möchte mir einen besseren Weg vorstellen. Ich habe darüber nachgedacht, Leinwand für die Anzahl der Zwiebelschalen hinzuzufügen, aber ich habe es nicht ausprobiert.

Radiergummi und Schichtzusammensetzung

https://hai3.net/blog/html5-canvas-eraser/ Ich bezog mich auf diese Methode. Vielen Dank.

CanvasRenderingContext2D.globalCompositeOperation = "destination-out"; Beim Zeichnen mit dem Radiergummi war es in Ordnung, wenn dies eingestellt war.

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation Wenn ich MDN lese, habe ich das Gefühl, dass damit die Schichtzusammensetzung und die Aquarellähnlichkeit der Stiftspitze erreicht werden können.

Derzeit besteht die einzige Möglichkeit, von einem Radiergummi zu einem Stift zu wechseln, darin, die Farbe oder die Größe der Stiftspitze zu ändern. Daher möchte ich eine geeignete Optionsfeld-ähnliche Schaltmethode erstellen.

undo/redo Haben Sie einfach ein ImageData [], um den Verlauf zu speichern und jedes Mal zu öffnen oder zu drücken, wenn die Undo / Redo-Methode aufgerufen wird. Ich habe darüber nachgedacht, den Verlauf auf der TypeScript-Seite zu speichern, aber ich möchte ihn auf der UI-Seite steuern, also überlasse ich das Timing, um ihn auf der Blazor-Seite aufzurufen. Derzeit ist ~~ einfach zu implementieren ~~ Es gibt einen Verlauf für jeden Frame, aber es scheint, dass sich die Art und Weise, den Verlauf zu halten, zum Zeitpunkt der Implementierung des Löschens des Frames ändert.

public undo(){
    if(this.currentFrame.prevHistory.length > 0) {
        let prev = this.currentFrame.prevHistory.pop() ?? new ImageData(this.width,this.height) ;
        this.currentFrame.nextHistory.push(this.getImageData());
        this.putImageData(prev);      
    }
}

public redo(){
    if(this.currentFrame.nextHistory.length > 0){
        let next = this.currentFrame.nextHistory.pop() ?? new ImageData(this.width,this.height);
        this.currentFrame.prevHistory.push(this.getImageData());
        this.putImageData(next);
    }
}

public saveHistory(){
    this.currentFrame.prevHistory.push(this.getImageData());
    //Wenn ein neuer Verlauf hinzugefügt wird, wird der Weiterleitungsverlauf gelöscht.
    this.currentFrame.nextHistory = [];
}

Leinwandelement Priorität

<canvas id="1"></canvas>
<canvas id="2"></canvas>
<canvas id="3"></canvas>

Wenn das Ereignis von id =" 1 " aufgenommen wird, müssen Sie es nach unten bringen, um das Ereignis aufzunehmen.

TypeScript + dotnet CLI Es war sehr einfach, da die .ts-Datei auch mit dem C # -Code kompiliert wurde, als "dotnet run" mit dem Befehl "dotnet add package Microsoft.TypeScript.MSBuild" und den Einstellungen der json-Datei ausgeführt wurde. Ich habe darüber nachgedacht, mit Fable in F # zu schreiben, aber ich habe aufgegeben, weil es aufgrund der Spezifikation der JavaScript-Interoperabilität, bei der der Methodenname aus der Methode zur Generierung des Methodennamens angegeben werden muss, streng zu sein scheint.

Funktionen, die in Zukunft hinzugefügt werden sollen

Ich habe in READ ME von GitHub geschrieben, dass es ein Chaos war, aber da das Problem des Zeichenkomforts groß ist, möchte ich das Problem lösen, dass die Linien steif sind und der Ein- und Ausgang vollständig sind. Wenn Sie die Web Storage-API verwenden, können Sie anscheinend die Einstellungswerte für Farbe und Stiftgröße speichern. Daher möchte ich dies auch unterstützen.

Die Unterstützung von Tablets und Smartphones wird noch lange dauern.

über mich

Ordentlich scheint an der Systemerstellung mit der Windows Form-Anwendung beteiligt gewesen zu sein. Ich habe nur wenig Verständnis für C # und C und keine Erfahrung mit TypeScript.

Absicht zu machen

Ich kann mit einer bestimmten Zeichensoftware keine einfachen Animationen zeichnen und verschieben. Die Verwendung ist schwierig, selbst wenn ich Animationen erstelle. Es gibt keinen Bildschirmeffekt. Ich denke, dass es anscheinend keine Zeichenanwendung (Webanwendung) gibt, die sich unerwartet in diese Richtung gedreht hat. Von. Es gibt auch keine Datenbankoperation oder Anmeldefunktion, aber abgesehen von Problemen wie Gelegenheit und Qualität dient sie dazu, jemandem irgendwo etwas zu zeigen.

Ursprünglich habe ich die Canvas-API ausprobiert und nicht über die Animationsfunktion nachgedacht, aber als ich sie erstellte, wollte ich die Funktion hinzufügen, und jetzt bin ich es.

abschließend

Es gibt noch viele Funktionen, die ich implementieren möchte, und Punkte, die ich verbessern möchte. Daher möchte ich so lange fortfahren, wie meine Motivation anhält. TypeScript wurde von Microsoft entwickelt und war viel einfacher, da ich beim Kompilieren einige Fehler auf der TypeScript-Seite feststellen konnte, da es einen ähnlichen Teil wie C # und eine Kombination mit Dotnet CLI gab. Blazor kann auch die API des Browsers selbst berühren. Da dies jedoch nur über IJS Runtime möglich ist, scheint es streng zu sein, nur Blazor (C #) zu verwenden.