SVG putanje

Ako želite da unapredite Lightscript, dodavanje pozadine može biti upečatljiv način da to postignete. Postoji različite pristupe tome, ali daleko najjednostavniji i najefikasniji je korišćenje SVG putanja.

SVG putanje mogu se relativno lako kreirati pomoću Adobe Illustratora. Najbolje je početi sa regularnom PNG slikom koju treba uprosititi u SVG putanju. Kada pronađete pozadinsku sliku, kreirajte novi Illustrator projekat klikom na New i odabirom predefinisanog podešavanja Web Large.

Zatim uvezite referentnu sliku na novo platno klikom na File -> Place u traci sa alatkama i odabirom slike u iskačućem prozoru.

Često je platno mnogo veće od uvezene slike. Da biste ovo popravili, kliknite na Object -> Artboards -> Fit to Artwork Bounds.

Zatim odaberite deo slike koji treba izolovati u putanju. SVG slike se sastoje od poligona definisanih njihovom konturnom putanjom. Ovi poligoni se zatim mogu popuniti bojom ili gradijentom koristeći JS Canvas API.

U ovom primeru, ocrtava se kontura ribnjaka i puni jednobojnom bojom. Najpre odaberite alatku za pero pritiskom na P na tastaturi. Kliknite na tačku duž konture oblika koji crtate, a zatim dodavajte još tačaka dok ne dobijete kontinuiranu putanju u istom obliku i veličini izabranog oblika. Boja ovog oblika nije bitna, jer se boja zasebno postavlja u JavaScript kodu.

Kada ste zadovoljni putanjom, izvezite je klikom na File -> Export -> Export As. Obavezno odaberite SVG tip datoteke.

U sledećem prozoru uverite se da je Image postavljeno na Link, a zatim kliknite na opciju Show Code.

U Notepad prozoru koji se otvori, pronađite tag <polygon> i kopirajte ceo sadržaj atributa points. Ovo bi trebalo da bude dugačak niz brojeva. Zatim kliknite na Cancel, jer sada imate sve potrebne podatke.

Da biste nacrtali sliku zasnovanu na putanji na canvas-u efekta, deklarišite dve nove konstante. Najpre deklarišite konstantu postavljenu na prethodno kopiran niz.

Tip

Na primer, 351 396.5 440 435.5 501.84 bi postalo M351 396.5 440 435.5 501.84.

Zatim kreirajte novu putanju sa new Path2D(path), gde je path naziv prve konstante.

Ova slika se sada može nacrtati pozivom ctx.fill(path2d), gde je path2d naziv putanje deklarisane u prethodnom koraku.

Da biste postavili boju oblika, pozovite ctx.fillStyle(color) pre crtanja slike. Ova funkcija prihvata hex kodove boja, CSS nazive boja, CSS funkcije boja i gradijente kao argumente.

Možete koristiti i sve efekte transformacije canvas-a kao što su skaliranje i pomeranje. Da biste osigurali da se transformacije primenjuju samo na trenutnu sliku, pozovite ctx.setTransform(1,0,0,1,0,0) nakon crtanja svakog sloja.

Sledeći primer pokazuje kako da nacrtate jednostavnu SVG sliku zasnovanu na putanji. Ova tehnika se može ponavljati koliko god puta želite za kreiranje složenih pozadina.

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);

Gornji kod bi trebalo da proizvede ovaj rezultat: