Erste Schritte mit Paper.js: Projekte und Elemente

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Sie haben vielleicht von Paper.js gehört oder auch nicht. Beginnen wir also mit der Frage: Was ist Paper.js? Es ist eine Bibliothek, mit der Sie Vektorgrafiken erstellen und arbeiten können. Die offizielle Website beschreibt es als das Schweizer Taschenmesser des Vector Graphics Scripting.

Trotz der Tatsache, dass die Bibliothek viel zu bieten hat, ist sie leicht zu lernen, auch wenn Sie noch nie davon gehört haben. In diesem Tutorial beginne ich mit den Grundlagen der Bibliothek und gehe dann später zu komplexen Themen über.

Verwenden von PaperScript

Es gibt zwei Möglichkeiten, die Bibliothek zu verwenden. Sie können PaperScript verwenden, eine Erweiterung von JavaScript, mit der Sie die Dinge etwas schneller erledigen können, oder Sie können einfach nur das gute alte JavaScript verwenden.

PaperScript ist genau das gleiche alte JavaScript, das Sie schon immer verwendet haben. Es fügt jedoch Unterstützung für mathematische Operatoren für point- und size-Objekte hinzu. Außerdem wird die Installation von Eventhandlern für Project-, View- und Maus-Tool-Objekte vereinfacht.

Beim Laden von PaperScript müssen Sie das übliche Skript-Tag verwenden, wobei der Typ auf "text/paperscript" festgelegt ist. Wenn Sie den Code extern laden, müssen Sie auch einen <script>-Tag mit der entsprechenden URL hinzufügen, um Ihren Code zu laden. Ein letztes Attribut, das Sie angeben müssen, ist data-paper-canvas="canvasId", oder die Kurzschriftversion canvas="canvasId", die der Bibliothek die Leinwand mitteilt, auf der sie arbeiten soll. Der folgende Code erstellt ein Viereck in PaperScript.

<script type="text/paperscript" canvas="quad">
  var path = new Path();
  path.strokeColor = 'black';
  var pointOne     = new Point(100, 20);
  var pointTwo     = new Point(-100, 100);
  var pointThree   = new Point(300, 30);
  path.moveTo(pointOne);
  path.lineTo(pointOne + pointTwo);
  path.lineTo(pointTwo + pointThree);
  path.lineTo(pointOne + pointThree);
  path.closed = true;
</script>

Verwenden von JavaScript

Wenn Sie mit PaperScript nicht vertraut sind, können Sie auch JavaScript in Ihren Projekten verwenden. Sie müssen ein paar weitere Codezeilen hinzufügen, wenn Sie sich dazu entschließen. Als Erstes müssen Sie überprüfen, ob das DOM bereit ist, da Sie vorher nicht mit der Leinwand arbeiten können. Danach können Sie ein Projekt und eine Ansicht mit dem paper-Objekt einrichten. Auf alle Paper.js-Klassen und -Objekte kann jetzt nur noch über das paper-Objekt zugegriffen werden.

Wie ich bereits erwähnt habe, müssen Sie Math-Funktionen anstelle von Operatoren verwenden, wenn Sie mit Point and Size arbeiten. Der folgende Code veranschaulicht all diese Unterschiede:

window.onload = function() {
  var canvas = document.getElementById('quad');
  paper.setup(canvas);
  var path = new paper.Path();
  path.strokeColor = 'black';
  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 Codeausschnitten oben ersichtlich, ist es relativ einfach, PaperScript zu verwenden, wenn Sie mit Paper.js arbeiten. Daher werden alle Beispiele von nun an auf PaperScript basieren.

Projekthierarchie

Wenn Sie jemals eine Grafikdesignanwendung wie Adobe Photoshop oder Illustrator verwendet haben, werden Sie mit dem Konzept der Ebenen vertraut sein. Jede Ebene in diesen Programmen hat ihren eigenen Inhalt, der in Kombination mit anderen Ebenen das Endergebnis erstellt. Ähnliche Layer gibt es auch in Paper.js und können über project.layers aufgerufen werden.

Zunächst verfügt jedes Projekt über eine einzelne Ebene, auf die über project.activeLayer zugegriffen werden kann. Alle neuen Elemente, die Sie erstellen, werden der aktuell aktiven Ebene als untergeordneter Ebene hinzugefügt. Auf alle untergeordneten Elemente in einer bestimmten Ebene kann mithilfe der layer.children-Eigenschaft des aktiven Layers zugegriffen werden.

Es gibt mehrere Möglichkeiten, auf all diese Kinder zuzugreifen. Wenn Sie nur Zugriff auf das erste und letzte untergeordnete Element eines Elements benötigen, können Sie item.firstChild bzw. item.lastChild verwenden. Sie können auch jedem Kind-Element einen bestimmten Namen zuweisen und diesen Namen dann verwenden, um später darauf zuzugreifen. Nehmen wir an, eine Schicht, an der Sie arbeiten, hat etwa 30 untergeordnete Ebenen. Es ist nicht praktikabel, sie alle nacheinander zu behandeln. Aus diesem Grund verfügt die Bibliothek über eine layer.children.length-Eigenschaft, mit der Sie die Gesamtzahl der untergeordneten Elemente abrufen und dann mithilfe einer for-Schleife über die Liste iterieren können.

Dieser Codeausschnitt greift auf verschiedene untergeordnete Elemente zu, indem er alle Eigenschaften verwendet, die wir gerade besprochen haben:

var circleA = new Path.Circle(new Point(45, 150), 45);
var circleB = new Path.Circle(new Point(110, 150), 20);
var circleC = new Path.Circle(new Point(165, 150), 35);
var circleD = new Path.Circle(new Point(255, 150), 55);
var circleE = new Path.Circle(new Point(375, 150), 65);
var circleF = new Path.Circle(new Point(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 = 'lightgreen';
for (var i = 3; i < 5; i++) {
  project.activeLayer.children[i].fillColor = 'tomato';
}

Die eingebettete Demo unten zeigt das Skript in Aktion. Sie können überprüfen, dass die Farbe aller Kreise mit der Farbe übereinstimmt, die wir ihnen im obigen Code zugewiesen haben.

Please accept marketing cookies to load this content.

Sie können auch die item.parent-Methode verwenden, um auf das übergeordnete Element eines Elements zuzugreifen, z. B. auf die item.children-Methode, mit der Sie auf alle untergeordneten Elemente zugreifen. Wenn Sie ein neues Element erstellen, ist dessen übergeordnetes Element immer die aktuell aktive Ebene des Projekts. Dieses kann jedoch geändert werden, indem Sie das Element als untergeordnetes Element einer anderen Ebene (layer) oder Gruppe (group) hinzufügen.

Bevor ich weitergehe, möchte ich erklären, was eine Gruppe (group) eigentlich ist. Um ehrlich zu sein, sind sich Ebene (layer) und Gruppe (group) sehr ähnlich. Ein wesentlicher Unterschied zwischen diesen beiden ist, dass alle neuen Elemente, die Sie erstellen, automatisch dem aktiven Layer hinzugefügt werden, aber im Fall einer Gruppe müssen Sie die Elemente selbst hinzufügen.

Es gibt mehrere Möglichkeiten, wie Sie einer Gruppe Elemente hinzufügen können. Sie können ein Element von Arrays an den Gruppenkonstruktor übergeben, und sie werden alle dem item.children-Array der Gruppe hinzugefügt. Um einer Gruppe nach der Erstellung Elemente hinzuzufügen, können Sie die Funktion item.addChild(item) verwenden. Sie können ein untergeordnetes Element auch in einem bestimmten Index einfügen, indem Sie die Funktion item.insertChild(index, item) verwenden.

Das Entfernen von Elementen ist genauso einfach wie das Hinzufügen. Um ein Element aus einem Projekt zu entfernen, können Sie die Funktion item.remove() verwenden. Beachten Sie, dass dadurch das Element nicht zerstört wird und es jederzeit wieder dem Projekt hinzugefügt werden kann. Wenn das Element, das Sie entfernt haben, Kinder hatte, werden auch alle Kinder entfernt. Was ist, wenn Sie alle Kind-Elemente entfernen, aber das Element intakt halten möchten? Dies kann durch die Verwendung der Funktion item.removeChildren() erreicht werden.

Grundlegendes zu Elementen

Der Begriff Element oder item ist bis jetzt mehr als ein paar Mal im Tutorial erschienen. Also, was ist das? Alles, was in einem Paper.js-Projekt angezeigt wird, ist ein item. Dazu gehören layers, paths, groups usw. Während verschiedene Elemente Eigenschaften haben, die für sie spezifisch sind, sind andere Eigenschaften auf alle von ihnen anwendbar.

Wenn Sie beabsichtigen, ein Element vor dem Benutzer auszublenden, können Sie dies tun, indem Sie den Wert item.visible auf false setzen. Sie können auch jedes Element mit der Funktion item.clone() klonen. Diese Funktion gibt das geklonte Element zurück, das Sie in einer Variablen speichern und später bearbeiten können. Sie können auch die Deckkraft jedes Elements mithilfe der item.opacity-Eigenschaft ändern. Jeder Wert zwischen 0 und 1 macht das Element durchscheinend.

Sie können auch für jedes Element mithilfe der item.blendMode-Eigenschaft einen Mischmodus festlegen. Der Mischmodus muss als Zeichenfolge oder string übergeben werden. Die Bibliothek stellt auch eine item.selected-Eigenschaft bereit, die, wenn sie auf true festgelegt ist, eine visuelle Umrisslinie um dieses Element erstellt. Dies kann während des Debuggens nützlich sein, da Sie so die Konstruktion von Pfaden, einzelnen Segmentpunkten und Begrenzungsfeldern von Elementen anzeigen können.

Element-Transformationen

Elemente können in einem Paper.js-Projekt mit Leichtigkeit skaliert, gedreht oder verschoben werden. In diesem Abschnitt werde ich alle diese Transformationen kurz behandeln.

Um die Position eines items zu ändern, können Sie dessen item.position-Eigenschaft verwenden und die Position auf einen neuen Punkt festlegen. Wenn Sie ein Element verschieben möchten, können Sie dies mit Hilfe des +=-Operators tun.

Sie können auch ein beliebiges Element skalieren, indem Sie die Funktion item.scale(scale) verwenden. Dadurch wird das Element um seinen Mittelpunkt skaliert. Sie können ein Element um einen anderen Punkt skalieren, indem Sie es als zweiten Parameter angeben, z. B. item.scale(scale, point). Darüber hinaus können Sie mit der Bibliothek Elemente in vertikalen und horizontalen Richtungen unterschiedlich skalieren, indem Sie zwei Zahlen als Parameter übergeben, z. B. item.scale (scaleX, scaleY).

Das Drehen von Elementen ähnelt der Skalierung. Sie können die Funktion item.rotate(angle) verwenden, um Elemente um ihre Mitte zu drehen. Der Winkel wird in Grad angegeben, und die Drehung erfolgt im Uhrzeigersinn. Um ein Element um einen bestimmten Punkt zu drehen, können Sie auch einen Punkt als zweiten Parameter übergeben, z. B. item.rotate(angle, point).

Der folgende Codeausschnitt wendet alle Transformationen und Manipulationen, die wir gerade besprochen haben, auf drei verschiedenen Rechtecken an.

var rectA = new Path.Rectangle(new Point(250, 70), new Size(120, 120));
rectA.fillColor = 'pink';

var rectB = rectA.clone();
rectB.fillColor = 'purple';
rectB.position += new Point(80, 80);
rectB.opacity = 0.6;
rectB.blendMode = 'color-burn';
rectB.scale(1.5);
rectB.rotate(45);

var rectC = rectB.clone();
rectC.fillColor = 'lightgreen';
rectC.position += new Point(-180, 0);
rectC.blendMode = 'color-dodge';
rectC.scale(1.5);

Der Code ist ziemlich selbsterklärend. Ich klone Rechteck B aus Rechteck A, und Rechteck B erhält alle Eigenschaften von Rechteck A. Dasselbe gilt für Rechteck B und C.

Beachten Sie, dass ich den +=-Operator verwendet habe, 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 Demo unten zeigt Ihnen das Endergebnis nach all diesen Transformationen. Sie können verschiedene Mischmodi ausprobieren oder andere Eigenschaften in der Demo ändern, um zu sehen, wie sie sich auf das Endergebnis auswirken.

Please accept marketing cookies to load this content.

Letzte Gedanken

Wie ich bereits erwähnt habe, ist Paper.js leicht zu erlernen und ermöglicht es Ihnen, mit Leichtigkeit Vektorgrafiken zu erstellen. Dieses Tutorial behandelte die Grundlagen, die Sie wissen müssen, um mit der Bibliothek zu arbeiten. In Kürze werden wir das nächste Tutorial der Serie veröffentlichen, in dem Pfade und Geometrie ausführlich diskutiert werden.

In der Zwischenzeit ist es wichtig zu beachten, dass JavaScript zu einer der De-facto-Sprachen der Arbeit im Web geworden ist. Es ist nicht ohne seine Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie beschäftigt zu halten. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, sehen Sie sich an, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Bis dahin schlage ich vor, dass Sie ein paar grundlegende Demos erstellen und das, was Sie bisher gelernt haben, üben. Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.