Erste Schritte mit Paper.js Projekte und Elemente

Möglicherweise haben Sie von Paper.js noch nichts gehört. Beginnen wir mit der Frage: Was ist Paper.js? Mit dieser Bibliothek können Sie Vektorgrafiken erstellen und mit ihnen arbeiten. Die offizielle Website beschreibt es als das Schweizer Armeemesser für Vektorgrafiken. 

Trotz der Tatsache, dass die Bibliothek viel zu bieten hat, ist sie leicht zu erlernen, auch wenn Sie noch nie davon gehört haben. In diesem Tutorial beginne ich mit den Grundlagen der Bibliothek und gehe später auf komplexe Themen ein.

PaperScript verwenden

Es gibt zwei Möglichkeiten, die Bibliothek zu verwenden. Sie können PaperScript, eine Erweiterung von JavaScript, verwenden und dabei helfen, Dinge schneller zu erledigen, oder Sie verwenden einfach altes JavaScript.

PaperScript ist genau dasselbe alte JavaScript, das Sie schon immer verwendet haben. Es unterstützt jedoch mathematische Operatoren für Punkt und Größe Objekte. Es vereinfacht auch die Installation von Ereignishandlern für Projekt, Aussicht, und maus Werkzeug Objekte. 

Beim Laden von PaperScript müssen Sie das übliche Skript-Tag verwenden, wobei der Typ auf "text / paperscript" gesetzt ist. Wenn Sie den Code extern laden, müssen Sie auch eine hinzufügen 

Verwendung von JavaScript

Wenn Sie mit PaperScript nicht vertraut sind, können Sie in Ihren Projekten auch JavaScript verwenden. Wenn Sie sich dazu entscheiden, müssen Sie noch ein paar Zeilen Code hinzufügen. Als Erstes müssen Sie prüfen, ob das DOM bereit ist, da Sie vorher nicht mit der Leinwand arbeiten können. Danach können Sie mit dem Projekt ein Projekt und eine Ansicht einrichten Papier- Objekt. Auf alle Paper.js-Klassen und -Objekte kann jetzt nur über die Papier- Objekt. 

Wie bereits erwähnt, müssen Sie bei der Arbeit mit Punkt und Größe anstelle von Operatoren Math-Funktionen verwenden. Der folgende Code veranschaulicht alle diese Unterschiede:

window.onload = function () var canvas = document.getElementById ('quad'); paper.setup (Leinwand); var path = new paper.Path (); path.strokeColor = 'schwarz'; var pointOne = new paper.Point (100, 20); var pointTwo = new paper.Point (-100, 100); var pointThree = new paper.Point (300, 30); path.moveTo (pointOne); path.lineTo (pointOne.add (pointTwo)); path.lineTo (pointTwo.add (pointThree)); path.lineTo (pointOne.add (pointThree)); path.closed = true; paper.view.draw (); 

Wie aus den obigen Codeausschnitten hervorgeht, ist es bei der Arbeit mit Paper.js relativ einfach, PaperScript zu verwenden. Daher werden alle Beispiele ab sofort auf PaperScript basieren.

Projekthierarchie

Wenn Sie schon einmal ein Grafikdesign-Programm wie Adobe Photoshop oder Illustrator verwendet haben, müssen Sie mit dem Konzept der Ebenen vertraut sein. Jede Ebene in diesen Programmen hat einen eigenen Inhalt, der in Kombination mit anderen Ebenen das Endergebnis ergibt. Ähnliche Ebenen sind auch in Paper.js vorhanden und können mit aufgerufen werden Projektschichten. 

Anfangs hat jedes Projekt eine einzige Ebene, auf die zugegriffen werden kann project.activeLayer. Alle neuen Elemente, die Sie erstellen, werden der aktuell aktiven Ebene als untergeordnetes Element hinzugefügt. Auf alle untergeordneten Elemente einer bestimmten Ebene kann mit der Schaltfläche zugegriffen werden Schichtkinder Eigenschaft der aktiven Schicht.

Es gibt mehrere Möglichkeiten, auf alle diese Kinder zuzugreifen. Wenn Sie nur Zugriff auf das erste und letzte untergeordnete Element eines Elements benötigen, können Sie verwenden item.firstChild und item.lastChild beziehungsweise. Sie können auch jedem Kind einen bestimmten Namen zuweisen und diesen dann verwenden, um später darauf zuzugreifen. Nehmen wir an, eine Schicht, an der Sie arbeiten, hat etwa 30 Kinder. Es ist nicht praktikabel, alle nacheinander durchzugehen. Aus diesem Grund verfügt die Bibliothek über eine schicht.kinder.länge Eigenschaft, die Sie verwenden können, um die Gesamtzahl der untergeordneten Elemente abzurufen, und dann die Liste mit a durchlaufen zum Schleife. 

Dieses Code-Snippet greift auf alle untergeordneten Elemente mit allen Eigenschaften zu, die wir gerade besprochen haben:

var circleA = new Path.Circle (neuer Punkt (45, 150), 45); var circleB = new Path.Circle (neuer Punkt (110, 150), 20); var circleC = new Path.Circle (neuer Punkt (165, 150), 35); var circleD = new Path.Circle (neuer Punkt (255, 150), 55); var circleE = new Path.Circle (neuer Punkt (375, 150), 65); var circleF = new Path.Circle (neuer Punkt (475, 150), 35); circleC.name = 'GreenCircle'; project.activeLayer.firstChild.fillColor = 'orange'; project.activeLayer.lastChild.fillColor = 'pink'; project.activeLayer.children [1] .fillColor = 'purple'; project.activeLayer.children ['GreenCircle']. fillColor = 'hellgrün'; für (var i = 3; i < 5; i++)  project.activeLayer.children[i].fillColor = 'tomato'; 

Die eingebettete Demo zeigt das Skript in Aktion. Sie können überprüfen, ob die Farbe aller Kreise der Farbe entspricht, die wir ihnen im obigen Code zugewiesen haben.

Sie können auch die item.parent Zugriff auf das übergeordnete Element eines Elements, wie z item.children Methode, mit der Sie auf alle untergeordneten Elemente zugegriffen haben. Wenn Sie ein neues Element erstellen, ist das übergeordnete Element immer die aktuell aktive Ebene des Projekts. Es kann jedoch geändert werden, indem das Element als untergeordnetes Element eines anderen hinzugefügt wird Schicht oder Gruppe. 

Bevor ich weiter gehe, lass mich erklären was ein Gruppe ist eigentlich. Um ehrlich zu sein, beides Schicht und Gruppe sind sehr ähnlich. Ein Hauptunterschied zwischen diesen beiden Elementen besteht darin, dass alle neuen Elemente, die Sie erstellen, automatisch der aktiven Ebene hinzugefügt werden. Im Falle einer Gruppe müssen Sie die Elemente jedoch selbst hinzufügen. 

Sie haben mehrere Möglichkeiten, einer Gruppe Elemente hinzuzufügen. Sie können ein Array von Elementen an den Gruppenkonstruktor übergeben, und alle werden der Gruppe hinzugefügt item.children Array. Um einer Gruppe Elemente hinzuzufügen, nachdem diese erstellt wurde, können Sie das verwenden item.addChild (item) Funktion. Sie können auch ein untergeordnetes Element an einem bestimmten Index einfügen item.insertChild (Index, Element) Funktion. 

Das Entfernen von Objekten ist ebenso einfach wie das Hinzufügen. Um ein Element aus einem Projekt zu entfernen, können Sie das verwenden item.remove () Funktion. Denken Sie daran, dass das Objekt dadurch nicht zerstört wird und es jederzeit wieder dem Projekt hinzugefügt werden kann. Wenn der von Ihnen entfernte Gegenstand Kinder hatte, werden auch alle Kinder entfernt. Was ist, wenn Sie alle Kinder entfernen möchten, aber den Artikel intakt halten möchten? Dies kann durch die Verwendung von erreicht werden item.removeChildren () Funktion.

Elemente verstehen

Der Begriff Artikel ist im Tutorial mehr als ein paar Mal erschienen. Also, was ist es? Alles, was in einem Paper.js-Projekt erscheint, ist ein Artikel. Das beinhaltet Schichten, Pfade, Gruppen, usw. Während verschiedene Elemente über spezifische Eigenschaften verfügen, gelten andere Eigenschaften für alle.

Wenn Sie ein Element vor dem Benutzer ausblenden möchten, können Sie dies durch Festlegen des Werts tun item.visible zu falsch. Sie können jedes Element auch mit dem Klonen klonen item.clone () Funktion. Diese Funktion gibt das geklonte Element zurück, das Sie in einer Variablen speichern und später bearbeiten können. Sie können die Deckkraft jedes Elements auch mit ändern item.opacity Eigentum. Jeder Wert zwischen 0 und 1 macht das Element transparent.

Sie können auch einen Mischmodus für jedes Element festlegen item.blendMode Eigentum. Der Mischmodus muss als übergeben werden Schnur. Die Bibliothek bietet auch eine item.selected Eigenschaft welche, wenn gesetzt wahr, Erzeugt eine visuelle Kontur über diesem Element. Dies kann beim Debuggen sehr nützlich sein, da Sie die Konstruktion von Pfaden, einzelnen Segmentpunkten und Begrenzungsrahmen von Elementen anzeigen können.

Artikelumwandlungen

Elemente können in einem Paper.js-Projekt problemlos skaliert, gedreht oder verschoben werden. In diesem Abschnitt werde ich alle diese Transformationen kurz behandeln. 

Um die Position eines zu ändern Artikel, Sie können es verwenden Position.Position Eigenschaft und setzen Sie die Position auf einen neuen Punkt. Wenn Sie ein Element verschieben möchten, können Sie dies mit Hilfe der += Operator.

Sie können jedes Element auch mit der Taste skalieren item.scale (Skala) Funktion. Dadurch wird das Objekt um seinen Mittelpunkt herum skaliert. Sie können ein Element um einen anderen Punkt skalieren, indem Sie es als zweiten Parameter angeben, z item.scale (Skala, Punkt). Darüber hinaus können Sie in der Bibliothek Elemente in vertikaler und horizontaler Richtung unterschiedlich skalieren, indem Sie zwei Zahlen als Parameter übergeben item.scale (scaleX, scaleY).

Das Drehen von Objekten ähnelt dem Skalieren. Du kannst den ... benutzen item.rotate (Winkel) Funktion zum Drehen von Elementen um ihre Mitte. Der Winkel wird in Grad angegeben und die Drehung erfolgt im Uhrzeigersinn. Um ein Objekt um einen bestimmten Punkt zu drehen, können Sie auch einen Punkt als zweiten Parameter übergeben, z item.rotate (Winkel, Punkt). 

Das folgende Codefragment wendet alle Transformationen und Manipulationen an, die wir gerade für drei verschiedene Rechtecke beschrieben haben.

var rectA = new Path.Rectangle (neuer Punkt (250, 70), neue Größe (120, 120)); rectA.fillColor = 'pink'; var rectB = rectA.clone (); rectB.fillColor = 'purple'; rectB.position + = neuer Punkt (80, 80); RectB.Pacity = 0,6; rectB.blendMode = 'color-burn'; rectB.scale (1.5); rectB.rotate (45); var rectC = rectB.clone (); rectC.fillColor = 'hellgrün'; rectC.position + = neuer Punkt (-180, 0); rectC.blendMode = 'color-dodge'; rectC.scale (1.5);

Der Code ist ziemlich selbsterklärend. Ich kloniere Rechteck B aus Rechteck A, und Rechteck B erfasst alle Eigenschaften von Rechteck A. Dasselbe gilt für Rechteck B und C. 

Beachten Sie, dass ich die verwendet habe += Operator, den ich oben besprochen habe, um die Elemente zu verschieben. Dieser Operator verschiebt Elemente relativ zu ihren alten Positionen, anstatt absolute Werte zu verwenden.

Die folgende Demo zeigt Ihnen das Endergebnis nach all diesen Transformationen. Sie können verschiedene Mischmodi ausprobieren oder andere Eigenschaften in der Demo ändern, um zu sehen, wie sie das Endergebnis beeinflussen.

Abschließende Gedanken

Wie ich bereits erwähnt habe, ist Paper.js leicht zu erlernen und ermöglicht Ihnen das einfache Erstellen von Vektorgrafiken. Dieses Tutorial befasste sich mit den Grundlagen, die Sie für die Arbeit mit der Bibliothek benötigen. In Kürze werden wir das nächste Tutorial der Serie veröffentlichen, in dem Pfade und Geometrie detailliert besprochen werden. 

In der Zwischenzeit ist es wichtig zu wissen, dass JavaScript zu einer der De-facto-Sprachen der Web-Arbeit geworden ist. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.


Bis dahin schlage ich vor, dass Sie einige grundlegende Demos erstellen und das bisher Gelernte anwenden. Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.