Canvas implementiert eine Bezier-Kurve höherer Ordnung (Bezier-Kurvengenerator N-Ordnung)

Was soll ich tun, wenn ich mehrere Kontrollpunkte hinzufügen möchte, da der native Canvas nur Bezier-Kurven bis zur dritten Ordnung unterstützt? (Selbst die komplexesten Kurven können mit Bezier dritter Ordnung simuliert werden.) Gleichzeitig ist es für uns schwierig, die Position der Bezier-Kontrollpunkte sehr intuitiv zu verstehen. Wie stark können wir die Kontrollpunkte festlegen, um die Kurve zu bilden? wir wollen? Um die beiden oben genannten Probleme zu lösen, scheint es in der Community keine N-Level-Lösung (js-Version) zu geben. Daher nimmt der Autor dieses Mal Open Source bezierMaker.js sehr ernst!

bezierMaker.js unterstützt theoretisch die Generierung von Bezier-Kurven der Ordnung N und bietet Entwicklern auch ein Testgelände zum Hinzufügen und Ziehen von Kontrollpunkten, um letztendlich eine Reihe von Zeichenanimationen zu generieren. Für Entwickler ist es sehr intuitiv, die verschiedenen Erzeugungskurven zu kennen, die Kontrollpunkten an verschiedenen Positionen entsprechen.

Wenn Ihnen diese Arbeit gefällt, sind Sie herzlich willkommen. Sterne sind schließlich hart verdient. .

Projektadresse: hier✨✨✨

Beim Zeichnen komplexer Bezier-Kurven höherer Ordnung können Sie die genaue Position der Kontrollpunkte der benötigten Kurve nicht kennen. Bei der Simulation im Testfeld können die Koordinatenwerte der Kontrollpunkte in Echtzeit ermittelt werden. Die erhaltenen Punktkoordinaten können in ein Objektarray umgewandelt und an die BezierMaker-Klasse übergeben werden, um die Zielkurve zu generieren.

Darstellungen

1. [x] Der Teststelle können beliebig viele Kontrollpunkte hinzugefügt werden
2. [x] Die Testseite unterstützt die Formationsanimation der Kurvenzeichnung.
3. [x] Kontrollpunkte können frei verschoben werden
4. [x] Unterstützt die Anzeige von Tangentenlinien während der Bildung von Bezier-Kurven
5. [x] Das Zeichnen von Bezier-Kurven der Ordnung 3 und darunter verwendet eine native API

 <script src=./bezierMaker.js></script>

Das obige Rendering zeigt die Verwendung der Teststelle. Nachdem Sie die genauen Koordinaten der Kontrollpunkte über die Teststelle erhalten haben, können Sie bezierMaker.js aufrufen, um die Kurve direkt zu zeichnen.

 /** * DOM-Objekt von Canvas Canvas * bezierCtrlNodesArr-Kontrollpunktarray, einschließlich X- und Y-Koordinaten * Farbkurvenfarbe */var canvas = document.getElementById('canvas')//Nutze die native Methode zur Implementierung vor Level 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = new BezierMaker(canvas, arr0, 'black')var bezier1 = new BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, 'grün')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

Zeichnen Sie die Ergebnisse grafisch auf

Wenn weniger als 3 Kontrollpunkte vorhanden sind, wird die native API-Schnittstelle verwendet. Wenn mehr als zwei Kontrollpunkte vorhanden sind, wird die von uns implementierte Funktion zum Zeichnen der Punkte verwendet.

Zeichnen Sie eine Bezier-Kurve

Der Kernpunkt beim Zeichnen einer Bezier-Kurve liegt in der Anwendung der Bezier-Formel:

P0-Pn in dieser Formel stellt verschiedene Leistungsoperationen jedes Punkts und das Verhältnis t vom Startpunkt zu jedem Kontrollpunkt und dann zum Endpunkt dar.

 BezierMaker.prototype.bezier = function(t) { //Bezier-Formelaufrufe var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Kontrollpunktarray n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (function(item, index) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - Index) * Math.pow(t, Index) y += item.y * Math.pow(( 1 - t ), n - Index) * Math.pow(t, index) } else { //factorial ist die Fakultätsfunktion x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math . pow(( 1 - t ), n - Index) * Math.pow(t, Index) y += self.factorial(n) / self.factorial(index) / self.factorial(n - Index) * item.y * Math. pow(( 1 - t ), n - index) * Math.pow(t, index) } }) return { x: x, y: y }}

Durchlaufen Sie alle Punkte und berechnen Sie die aktuellen Punktkoordinaten x, y auf der Bezier-Kurve basierend auf dem Wert des aktuellen Anteils t (0 <= t <= 1). Der Autor teilt den Wert von t in 1000 Teile, d. h. t+=0,01 für jede Operation. Die zu diesem Zeitpunkt berechneten x- und y-Werte sind die Punkte, nachdem die Bezier-Kurve in 1000 Teile geteilt wurde. Wenn der t-Wert 1000 Mal von 0 auf 1 wechselt, werden 1000 x- und y-entsprechende Koordinaten generiert, und eine Bezier-Kurve höherer Ordnung kann durch aufeinanderfolgendes Zeichnen von Punkten und Linien simuliert werden.

Der Autor wird die Ableitung der Bezier-Formel in einem späteren Artikel speziell erläutern. Jetzt müssen Sie nur noch wissen, dass wir die Bezier-Formel verwenden, um zu berechnen, dass die tatsächliche Bezier-Kurve in 1000 Punkte unterteilt ist, und die Punkte dann durch gerade Linien verbinden Die Klassenkurve kann simuliert werden.

Implementierung einer durch die Bezier-Kurve erzeugten Animation im Simulationsfeld

Den entsprechenden Code für diesen Teil finden Sie hier

Die Gesamtidee besteht darin, eine rekursive Methode zu verwenden, um jede Ebene von Kontrollpunkten als Bessel-Funktion erster Ordnung zu behandeln, um die nächste Ebene von Kontrollpunkten zu berechnen und sie entsprechend zu verbinden. Der Autor wird die spezifische Logik bis zur ausführlichen Erläuterung der Prinzipien der Bezier-Kurvenformel belassen, um die Animationserzeugungsprinzipien der Testseite zu klären

Der Autor wollte schon immer etwas als Open Source veröffentlichen (aber es gibt nichts, worüber er schreiben kann). Allerdings wurde alles, was normalerweise verwendet wird, von anderen geschrieben, und das Rad neu erfinden kann nicht gut von anderen geschrieben werden. Dieses Mal fand ich einen scheinbar leeren Bereich. Deshalb habe ich eine sehr feierliche Entscheidung getroffen, es als Open Source zu veröffentlichen. Die meisten fortgeschrittenen Anwendungen von Bezier in Gayhub sind Android-Implementierungen. Es gibt noch viele Stellen im Frontend-Bereich, die erweitert werden können ~ Viel Kritik!

Projektadresse: hier✨✨

Adresse der Testseite: Kommen Sie unbedingt vorbei und spielen Sie✨✨✨

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.