SVG-Pfade

Wenn ein Lightscript aufgewertet werden soll, kann das Hinzufügen eines Hintergrunds eine auffällige Möglichkeit dazu sein. Es gibt verschiedene Ansätze, dies umzusetzen, aber bei weitem der einfachste und effizienteste ist die Verwendung von SVG-Pfaden.

SVG-Pfade können mit Adobe Illustrator relativ einfach erstellt werden. Am besten beginnt man mit einem regulären PNG-Bild, das in einen SVG-Pfad vereinfacht werden soll. Sobald ein Hintergrundbild gefunden wurde, wird ein neues Illustrator-Projekt durch Klicken auf New und Auswahl der Web Large-Voreinstellung erstellt.

Als nächstes wird das Referenzbild in das neue Artboard importiert, indem in der Werkzeugleiste auf File -> Place geklickt und das Bild im erscheinenden Popup ausgewählt wird.

Oft ist das Artboard viel größer als das importierte Bild. Um dies zu beheben, auf Object -> Artboards -> Fit to Artwork Bounds klicken.

Als nächstes einen Teil des Bildes auswählen, der in einen Pfad isoliert werden soll. SVG-Bilder bestehen aus Polygonen, die durch ihren Umrisspfad definiert sind. Diese Polygone können dann mit der JS Canvas API mit einer Farbe oder einem Verlauf gefüllt werden.

In diesem Beispiel wird der Umriss des Teichs nachgezeichnet und mit einer Volltonfarbe gefüllt. Zunächst das Stift-Werkzeug durch Drücken von P auf der Tastatur auswählen. Einen Punkt entlang des Umrisses der zu zeichnenden Form anklicken und dann weitere Punkte hinzufügen, bis ein durchgehender Pfad in der gleichen Form und Größe der gewählten Form entstanden ist. Die Farbe dieser Form spielt keine Rolle, da die Farbe separat im JavaScript-Code festgelegt wird.

Sobald der Pfad zufriedenstellend ist, wird er durch Klicken auf File -> Export -> Export As exportiert. Dabei muss der SVG-Dateityp ausgewählt werden.

Im nächsten Fenster sicherstellen, dass Image auf Link gesetzt ist, und dann auf die Option Show Code klicken.

Im Notepad-Fenster, das sich öffnet, das <polygon>-Tag suchen und den gesamten Inhalt des points-Attributs kopieren. Dies sollte eine lange Zahlenfolge sein. Dann auf Cancel klicken, da nun alle benötigten Daten vorhanden sind.

Um ein pfadbasiertes Bild auf dem Effekt-Canvas zu zeichnen, zwei neue Konstanten deklarieren. Zunächst eine Konstante deklarieren, die auf die zuvor kopierte Zeichenfolge gesetzt wird.

Tipp

Zum Beispiel würde 351 396.5 440 435.5 501.84 zu M351 396.5 440 435.5 501.84 werden.

Dann einen neuen Pfad mit new Path2D(path) erstellen, wobei path der Name der ersten Konstante ist.

Dieses Bild kann nun durch den Aufruf von ctx.fill(path2d) gezeichnet werden, wobei path2d der Name des im vorherigen Schritt deklarierten Pfades ist.

Um die Farbe einer Form festzulegen, wird ctx.fillStyle(color) vor dem Zeichnen des Bildes aufgerufen. Diese Funktion akzeptiert Hex-Farbcodes, CSS-Farbnamen, CSS-Farbfunktionen und Verläufe als Argumente.

Es können auch alle Canvas-Transformationseffekte wie Skalierung und Verschiebung verwendet werden. Um sicherzustellen, dass die Transformationen nur auf das aktuelle Bild angewendet werden, ctx.setTransform(1,0,0,1,0,0) nach dem Zeichnen jeder Ebene aufrufen.

Das folgende Beispiel zeigt, wie ein einfaches SVG-Pfadbild gezeichnet wird. Diese Technik kann beliebig oft wiederholt werden, um komplexe Hintergründe zu erstellen.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Aus Illustrator kopierte Daten. Sicherstellen, dass das erste Zeichen M ist.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Einen neuen Path2D aus den Daten erstellen.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optionale Canvas-Transformation. ctx.translate(x,y) kann auch verwendet werden, um den neuen Pfad zu verschieben.
  ctx.fillStyle = "blue"; // Farbe des Pfades festlegen. Hier können auch Verläufe verwendet werden.
  ctx.fill(pondPath); // Pfad zeichnen.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Transformation zurücksetzen, sodass sie nur diesen Pfad betrifft.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Der obige Code sollte dieses Ergebnis erzeugen: