Share
In meinem vorherigen Tutorial habe ich den Installationsprozess und die Projekthierarchie in Paper.js behandelt. Dieses Mal werde ich Sie über Pfade, Segmente und deren Manipulation unterrichten. Auf diese Weise können Sie komplexe Formen mithilfe der Bibliothek erstellen. Danach möchte ich auf einige grundlegende geometrische Prinzipien eingehen, auf denen Paper.js basiert.
Pfade in Paper.js werden durch eine Folge von Segmenten dargestellt, die durch Kurven verbunden sind. Ein Segment ist im Grunde ein Punkt und seine zwei Ziehpunkte, die den Ort und die Richtung der Kurven definieren. Wenn Sie keine Segment-Handles definieren, werden anstelle von Kurven gerade Linien angezeigt.
Wenn Sie einen neuen Pfad definieren, verwenden Sie die neuer Weg() Konstruktor können Sie mit Hilfe des Moduls Segmente hinzufügen path.add (Segment) Funktion. Da diese Funktion mehrere Argumente unterstützt, können Sie auch mehrere Segmente gleichzeitig hinzufügen. Angenommen, Sie möchten ein neues Segment an einem bestimmten Index innerhalb eines vorhandenen Pfads einfügen. Sie können dies tun, indem Sie die path.insert (Index, Segment) Funktion. Um ein Segment an einem bestimmten Index zu entfernen, können Sie auch das verwenden path.removeSegment (Index) Funktion. Beide Funktionen verwenden eine auf Null basierende Indizierung. Dies impliziert die Verwendung von path.removeSegment (3) wird das vierte Segment entfernen. Sie können alle Pfade schließen, die Sie mit dem zeichnen path.closed Eigentum. Der erste und der letzte Abschnitt des Pfads werden zusammengefügt.
Bis jetzt hatten alle unsere Pfade gerade Linien. Zum Erstellen von gekrümmten Pfaden ohne Angabe von Ziehpunkten für jedes Segment können Sie das verwenden path.smooth () Funktion. Diese Funktion berechnet die optimalen Werte für die Handles aller Segmente eines Pfades so, dass die durchlaufende Kurve glatt ist. Die Segmente selbst ändern ihre Position nicht, und wenn Sie Handle-Werte für eines der Segmente angegeben haben, werden diese Werte ignoriert. Im folgenden Code werden alle Funktionen und Eigenschaften verwendet, um vier Pfade zu erstellen, von denen zwei gekrümmt sind.
var aPath = neuer Pfad (); aPath.add (neuer Punkt (30, 60)); aPath.add (neuer Punkt (100, 200)); aPath.add (neuer Punkt (300, 280), neuer Punkt (280, 40)); aPath.insert (3, neuer Punkt (180, 110)); aPath.fullySelected = 'true'; aPath.closed = true; var bPath = aPath.clone (); bPath.smooth (); bPath.position.x + = 400; var cPath = aPath.clone (); cPath.position.y + = 350; cPath.removeSegment (3); var dPath = bPath.clone (); dPath.strokeColor = 'grün'; dPath.position.y + = 350; dPath.removeSegment (3);
Zuerst erstellen wir einen neuen Pfad und fügen dann Segmente hinzu. Verwenden path.insert (3, neuer Punkt (180, 110)) fügt ein neues Segment anstelle des vierten ein und bewegt das vierte Segment an die fünfte Position. Ich habe gesetzt vollausgewählt zu wahr um alle Punkte und Griffe für jede Kurve anzuzeigen. Für den zweiten Pfad habe ich die verwendet path.smooth () Funktion, um die Kurve glatt zu machen. Entfernen Sie das vierte Segment mit cPath.removeSegment (3) gibt uns unsere ursprüngliche Form ohne indexbasierte Einfügungen. Sie können dies durch Auskommentieren überprüfen aPath.insert (3, neuer Punkt (180, 110)); in dieser CodePen-Demo. Dies ist das Endergebnis aller unserer Manipulationen bis zu diesem Punkt:
Paper.js unterstützt einige grundlegende Formen direkt aus der Box. Um beispielsweise einen Kreis zu erstellen, können Sie einfach die Neuer Pfad.Kreis (Mitte, Radius) Konstrukteur. Ebenso können Sie das verwenden Neuer Pfad. Rechteck (rect) Konstruktor, um ein Rechteck zu erstellen. Sie können entweder die linke obere und die rechte untere Ecke oder die linke obere Ecke und die Größe des Rechtecks angeben. Um ein Rechteck mit abgerundeten Ecken zu zeichnen, können Sie das verwenden new Path.RoundedRectangle (rect, size) Konstruktor, bei dem der Größenparameter die Größe der abgerundeten Ecken bestimmt.
Wenn Sie ein n-seitiges reguläres Polygon erstellen möchten, können Sie dies mit dem new Path.RegularPolygon (center, numSides, radius) Konstrukteur. Der Parameter Center bestimmt den Mittelpunkt unseres Polygons und der Radius bestimmt den Radius unseres Polygons.
Der folgende Code generiert alle Formen, die wir gerade besprochen haben.
var aCircle = new Path.Circle (neuer Punkt (75, 75), 60); aCircle.strokeColor = 'black'; var aRectangle = new Path.Rectangle (neuer Punkt (200, 15), neuer Punkt (400, 135)); aRectangle.strokeColor = 'orange'; var bRectangle = new Path.Rectangle (neuer Punkt (80, 215), neue Größe (400, 135)); bRectangle.strokeColor = 'blau'; var myRectangle = neues Rechteck (neuer Punkt (450, 30), neuer Punkt (720, 170)); var cornerSize = neue Größe (10, 60); var cRectangle = new Path.RoundRectangle (myRectangle, cornerSize); cRectangle.fillColor = 'hellgrün'; var aTriangle = new Path.RegularPolygon (neuer Punkt (120, 500), 3, 110); aTriangle.fillColor = '#FFDDBB'; aTriangle.selected = true; var aDodecagon = new Path.RegularPolygon (neuer Punkt (460, 490), 12, 100); aDodecagon.fillColor = '#CCAAFC'; aDodecagon.selected = true;
Das erste Rechteck, das wir erstellen, basiert auf Koordinatenpunkten. Der nächste Punkt verwendet den ersten Punkt, um die linke obere Ecke unseres Rechtecks zu bestimmen, und verwendet dann den Größenwert, um die restlichen Punkte zu zeichnen. Im dritten Rechteck haben wir zusätzlich einen Radius für unser Rechteck angegeben. Der erste Radiusparameter bestimmt die horizontale Krümmung und der zweite Parameter bestimmt die vertikale Krümmung.
Die letzten beiden Formen verwenden einfach die Regelmäßiges Vieleck Konstruktor, um ein Dreieck und ein Zwölfeck zu erstellen. Die eingebettete Demo zeigt das Ergebnis unseres Codes.
Es gibt zwei Möglichkeiten, einen Kreis zu erstellen. Die erste besteht darin, viele Segmente ohne Ziehpunkte zu erstellen und diese eng aneinander zu platzieren. Auf diese Weise befindet sich die Gesamtform, obwohl sie durch eine gerade Linie verbunden ist, immer näher an einem Kreis. Die zweite Möglichkeit besteht darin, nur vier Segmente mit entsprechenden Werten für ihre Ziehpunkte zu verwenden. Dies kann viel Speicher sparen und trotzdem die gewünschten Ergebnisse liefern.
In der Regel können wir einige Segmente aus einem Pfad entfernen, ohne dass sich die Form wesentlich ändert. Die Bibliothek bietet eine einfache path.simplify ([Toleranz]) Funktion, um dieses Ergebnis zu erreichen. Der Toleranzparameter ist optional. Es wird verwendet, um die maximale Entfernung anzugeben, bis zu der der pfadvereinfachende Algorithmus von seinem ursprünglichen Pfad abweichen kann. Sie ist standardmäßig auf 2,5 eingestellt. Wenn Sie den Parameter auf einen höheren Wert einstellen, ist die Endkurve etwas glatter, mit weniger Segmentpunkten, die Abweichung kann jedoch erheblich sein. In ähnlicher Weise führt ein niedrigerer Wert zu sehr geringen Abweichungen, enthält jedoch viel mehr Segmente.
Sie können die Kurven in einem Pfad auch mit Hilfe von in gerade Linien konvertieren path.flatten (maxDistance) Funktion. Beim Abflachen eines Pfads versucht die Bibliothek, den Abstand zwischen den Segmenten so nahe wie möglich zu halten maximale Entfernung wie möglich.
var aPolygon = new Path.RegularPolygon (neuer Punkt (140, 140), 800, 120); aPolygon.fillColor = '#CCAAFC'; aPolygon.selected = true; var bPolygon = aPolygon.clone (); bPolygon.fillColor = '#CCFCAA'; bPolygon.simplify (); var cPolygon = aPolygon.clone (); cPolygon.fillColor = '#FCAACC'; cPolygon.implify (4); var dPolygon = bPolygon.clone (); dPolygon.fillColor = '#FCCCAA'; dPolygon.flatten (80);
Im obigen Code habe ich zuerst ein Polygon mit der Zeichenfolge erstellt Regelmäßiges Vieleck Funktion oben diskutiert. Ich habe das absichtlich eingestellt ausgewählt Eigentum an wahr Damit sind alle Segmente dieser Pfade sichtbar. Dann habe ich das zweite Polygon vom ersten geklont und das vereinfachen Funktion darauf. Dies reduziert die Anzahl der Segmente auf nur fünf.
Im dritten Polygon habe ich den Toleranzparameter auf einen höheren Wert gesetzt. Dies reduziert die Anzahl der Segmente weiter. Sie können sehen, dass alle Pfade immer noch dieselbe Grundform haben. Im letzten Pfad habe ich die verwendet abflachen (maxDistance) Funktion, um unsere Kurve abzuflachen. Der Algorithmus versucht, die Form so nah wie möglich an der Originalform zu halten, wobei die Form weiterhin berücksichtigt wird maximale Entfernung Zwang. Hier ist das Endergebnis:
Paper.js hat einige grundlegende Datentypen wie Punkt, Größe, und Rechteck um geometrische Attribute von grafischen Elementen zu beschreiben. Sie sind abstrakte Darstellungen von geometrischen Werten wie Lage oder Dimension. Ein Punkt beschreibt nur einen zweidimensionalen Ort und die Größe beschreibt abstrakte Dimensionen im zweidimensionalen Raum. Das Rechteck hier bezeichnet einen Bereich, der vom oberen linken Punkt, seiner Breite und seiner Höhe eingeschlossen ist. Es unterscheidet sich von dem rechteckigen Pfad, den wir zuvor besprochen haben. Im Gegensatz zum Pfad ist es kein Element. Weitere Informationen dazu finden Sie in diesem Paper.js-Tutorial.
Sie können grundlegende mathematische Operationen durchführen: Addieren, Subtrahieren, Multiplizieren und Aufteilen und Größen. Alle folgenden Vorgänge sind gültig:
Var-Punkt A = neuer Punkt (20, 10); var pointB = pointA * 3; // x: 60, y: 30 var pointC = pointB - pointA; // x: 40, y: 20 var pointD = pointC + 30; // x: 70, y: 50 var pointE = pointD / 5; // x: 14, y: 10 var pointF = pointE * neuer Punkt (3, 2); // x: 42, y: 20 // Sie können die Ausgabe in der Konsole auf Verifizierung überprüfen. console.log (pointF);
Neben diesen Grundoperationen können Sie auch einige Rundungsoperationen ausführen oder Zufallswerte für Punkte und Größen generieren. Betrachten Sie die folgenden Beispiele:
Var-Punkt = neuer Punkt (3.2, 4.7); var gerundet = point.round (); // x: 3, y: 5 var ceilinged = point.ceil (); // x: 4, y: 5 var floored = point.floor (); // x: 3, y: 4 // Generiere einen zufälligen Punkt mit x zwischen 0 und 50 // und y zwischen 0 und 40 var pointR = neuer Punkt (50, 40) * Point.random (); // Erzeuge eine zufällige Größe mit einer Breite zwischen 0 und 50 // und einer Höhe zwischen 0 und 40 var sizeR = new Size (50, 40) * Size.random ();
Das zufällig() Funktion erzeugt zufällige Werte zwischen 0 und 1. Sie können sie mit a multiplizieren Punkt oder Größe Objekt von angemessenem Wert, um die gewünschten Ergebnisse zu erhalten.
Damit ist die grundlegende Mathematik abgeschlossen, mit der Sie vertraut sein müssen, um mit Paper.js etwas Nützliches zu erstellen.
Nachdem Sie diesem Lernprogramm gefolgt sind, sollten Sie verschiedene Pfade und Formen erstellen, Kurven glätten oder komplexe Pfade vereinfachen können. Nun haben Sie auch ein grundlegendes Verständnis für verschiedene mathematische Operationen, die Sie mit Paper.js ausführen können. Wenn Sie alles, was Sie in diesem und im vorherigen Lernprogramm der Serie gelernt haben, kombinieren, sollten Sie in der Lage sein, komplexe Polygone auf verschiedenen Ebenen zu erstellen und diese zu mischen. Sie sollten auch Segmente einfügen und aus einem Pfad entfernen können, um die gewünschte Form zu erhalten.
Wenn Sie nach zusätzlichen JavaScript-Ressourcen suchen, die Sie studieren oder in Ihrer Arbeit verwenden möchten, lesen Sie, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua