Heim > Web-Frontend > js-Tutorial > Hauptteil

Einfach Bézier-Kurven verstehen.

王林
Freigeben: 2024-08-16 11:04:02
Original
571 Leute haben es durchsucht

Stellen Sie sich vor, wenn Sie nur gerade Linien, Ellipsen und Kreise verwenden könnten, wäre es dann nicht schwierig, ein Auto mit glatten Linien und einem komplexen Erscheinungsbild zu entwerfen?

Im Jahr 1962 veröffentlichte der französische Ingenieur Pierre Bézier die Bézier-Kurve, die zunächst für die Karosseriekonstruktion von Autos verwendet wurde.

Simply understanding Bézier curves.

Bézier-Kurven können eine glatte Kurve durch eine Reihe von Kontrollpunkten definieren. Die Kurve verläuft immer durch den ersten und letzten Kontrollpunkt und wird durch die Form der Zwischenkontrollpunkte beeinflusst. Darüber hinaus haben Bézier-Kurven die Eigenschaft konvexer Hüllen.

Bézier-Kurven werden häufig in der Computergrafik und Bildmodellierung verwendet, beispielsweise in der Animation, beim Schriftdesign und im Industriedesign.

Formel

Simply understanding Bézier curves.

Lassen Sie uns das verstehen.

P(t) stellt einen Punkt auf der Kurve bei t dar (t ist ein Bruch mit einem Wert von 0 bis 1). Was ist ein Punkt auf der Kurve bei t? Eine übliche Kurvenbeschreibung lautet: y = f(x), und zunächst verstehen wir P(t) als f(x). Der Unterschied besteht darin, dass P(t) eine parametrische Darstellung ist (und das Berechnungsergebnis ein „Vektor“ wie [x, y] ist), was später ausführlich erläutert wird.

Als nächstes stellt Pi den i-ten Kontrollpunkt dar (i beginnt bei 0). Am Beispiel der obigen Abbildung gibt es 4 Kontrollpunkte: P0, P1, P2, P3. Das n in der Formel ist der letzte Index der Kontrollpunkte, also n = 3 (beachten Sie, dass es sich nicht um die Anzahl der Kontrollpunkte, sondern um die Anzahl minus 1 handelt).

Bi,n(t) ist die Bernstein-Basisfunktion, auch Basisfunktion genannt. Für jedes spezifische (i, n) gibt es eine andere entsprechende Basisfunktion. Wenn Sie es aus einer gewichteten Perspektive verstehen, können Sie die Basisfunktion als Gewichtsfunktion betrachten, die den „Beitrag“ des i-ten Kontrollpunkts Pi zu den Kurvenkoordinaten an der Position von t angibt.

Die Formel für die Basisfunktion lautet wie folgt:

Simply understanding Bézier curves.

(ni)binom{n}{i} (in ) Ist die Kombinationszahl (wie viele Möglichkeiten, i aus n auszuwählen?). Warum die Basisfunktion so aussieht, lässt sich im Zusammenhang mit dem De Casteljau-Algorithmus verstehen (siehe später im Text)

Zurück zur P(t)-Formel, i=0nsum_{i=0}^{n} i=0n ist das Summationssymbol und zeigt an, dass der nachfolgende Teil ( Bi,n(t)Pi B_{i,n}(t) cdot P_iBi,n(t) ⋅Pi ) ist von i=0 bis i=n zu summieren.

Nehmen Sie die obige Abbildung als Beispiel und gehen Sie davon aus, dass wir P (0,1) berechnen möchten. Wie geht das? Es wird wie folgt erweitert:

Simply understanding Bézier curves.

Simply understanding Bézier curves.

Ersetzen Sie t=0,1, um Folgendes zu erhalten:

Simply understanding Bézier curves.

Parametrische Darstellung der Kurve

Hier wird direkt ein Artikel eines Internetnutzers zitiert (Link)

Simply understanding Bézier curves.

Konzentrieren wir uns auf die obige Formel.

Wie in der Abbildung oben gezeigt, kann die uns bekannte gerade Linie aus einer anderen Perspektive verstanden werden: unter Verwendung von t (d. h. der Länge von |AP| vom Punkt P zum bekannten Punkt (x0,y0)), dann kann Punkt P durch die oben genannten trigonometrischen Funktionen bestimmt werden.

Allgemeiner kann es wie folgt geschrieben werden:

Simply understanding Bézier curves.

Hier ist P0 der Vektor [x0,y0] und v ist ebenfalls ein Vektor. Zusammengenommen ist P(t) der Vektor [x,y].

Ich schaue mir den Kreis noch einmal an:

Simply understanding Bézier curves.

Wie im Diagramm gezeigt, kann man sich den Kreis so vorstellen, dass er einen bekannten Mittelpunkt hat, wobei jeder Punkt auf dem Kreis durch den Drehwinkel und den Radius bestimmt wird. Es kann auch geschrieben werden als:

Simply understanding Bézier curves.

Die parametrischen Gleichungen behalten die geometrische Invarianz bei und können Formen wie Kreise darstellen (wobei ein x mehreren y-Werten entspricht).

De Casteljau

Der De Casteljau-Algorithmus ist eine Methode, die in praktischen Anwendungen verwendet wird, um Bézier-Kurven für Zeichen- und andere Operationen auszuwerten und anzunähern. Im Vergleich zur vorherigen definitionbasierten Bewertungsmethode ist sie schneller und stabiler und kommt den Eigenschaften von Bézier-Kurven näher.

Hier beziehen wir uns auf zwei Artikel: link1 und link2

Zuerst wird Folgendes definiert:

Simply understanding Bézier curves.

Sehen Sie sich das obige β an. Es ist etwas verwirrend mit den hochgestellten und tiefgestellten Zeichen; Sie können zum Verständnis die folgende Dreiecksrekursion verwenden:

Simply understanding Bézier curves.

Die roten Kanten des Dreiecks in der obigen Abbildung sind die Kontrollpunkte der beiden Segmente geteilt durch t0. Um t0, P(t0) besser zu verstehen (d. h. β0(n)beta_0^{(n)} β 0(n) ), die Kontrollpunkte der beiden Kurven, können Sie sich auf die folgende Abbildung beziehen:

Simply understanding Bézier curves.

Die obige Abbildung zeigt die Beziehungen zwischen verschiedenen Punkten, wenn t=0,5.

Aus der Perspektive der „Interpolation“ kann der Berechnungsprozess auch wie folgt verstanden werden:

  1. Finden der Mittelpunkte jedes Paares benachbarter Kontrollpunkte (weil t=0,5), also b01, b11, b21 (bitte entschuldigen Sie meine Notation; das Schreiben in LaTeX ist zu mühsam)
  2. Finden Sie den Mittelpunkt b02 auf b01−b11 und den Mittelpunkt b12 auf b11-b21
  3. Finden Sie den Mittelpunkt b03 auf b02−b12 ​ Tatsächlich ist die Essenz des De Casteljau-Algorithmus Interpolation und Iteration.

Kurvenzeichnung nach De Casteljau

Derzeit werden zwei Methoden beobachtet.

Eine Methode besteht darin, t in kleinen Schritten von 0 auf 1 zu durchlaufen (d. h. 0,01). Jedes Mal, wenn P(t) gesucht wird, wird zur Bestimmung eine rekursive Formel verwendet β0(n)beta_0^{(n)} β 0(n) .

Die andere Methode besteht darin, P(t=0,5) zu suchen und dann für die beiden geteilten Kurven jeweils P(t=0,5) zu suchen... Diese Unterteilung wird fortgesetzt, bis die Kurve angenähert ist.

Durchführung

Es fühlt sich immer unwirklich an, nur zuzuschauen, ohne zu üben.

Also habe ich meinen eigenen Implementierungscode für das Kurvenzeichnen geschrieben und ihn in einem Toolkit organisiert: Compilelife's Toolkit

Der entsprechende Kerncode ist hier

Das obige ist der detaillierte Inhalt vonEinfach Bézier-Kurven verstehen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage