SVG-stier

Hvis du ønsker at opgradere et LightScript, kan tilføjelse af en baggrund være en iøjnefaldende måde at gøre det på. Der er forskellige måder at gøre dette på, men den langt nemmeste og mest effektive er at bruge SVG-stier.

SVG-stier kan oprettes relativt nemt med Adobe Illustrator. Det er bedst at starte med et almindeligt PNG-billede, som du ønsker at forenkle til en SVG-sti. Når du har fundet et baggrundsbillede, oprettes et nyt Illustrator-projekt ved at klikke på New og vælge Web Large-forudindstillingen.

Dernæst importeres referencebilledet til det nye artboard ved at klikke på File -> Place i værktøjslinjen og vælge billedet i den viste popup.

Ofte er artboardet meget større end det importerede billede. For at rette dette klikkes på Object -> Artboards -> Fit to Artwork Bounds.

Vælg derefter en del af billedet som du vil isolere til en sti. SVG-billeder består af polygoner defineret af deres kontursti. Disse polygoner kan derefter fyldes med en farve eller en gradient ved hjælp af JS Canvas API.

I dette eksempel spores konturen af dammen og fyldes med en ensfarvet farve. Vælg først pennens værktøj ved at trykke P på tastaturet. Klik på et punkt langs konturen af den form du vil tegne, og tilføj derefter flere punkter indtil der er en sammenhængende sti i samme form og størrelse som den valgte form. Farven på denne form er ligegyldig, da farven sættes separat i JavaScript-koden.

Når stien er tilfredsstillende, eksporteres den ved at klikke på File -> Export -> Export As. Husk at vælge SVG-filtypen.

I det næste vindue sikres det at Image er sat til Link, og derefter klikkes på indstillingen Show Code.

I det Notepad-vindue der åbner, søges efter <polygon>-tagget og hele indholdet af points-attributtet kopieres. Det bør være en lang talrække. Klik derefter på Cancel, da alle nødvendige data nu er til rådighed.

For at tegne et stibaseret billede på effektcanvasset deklareres to nye konstanter. Deklarér først en konstant der sættes til den kopierede streng.

Tip

For eksempel ville 351 396.5 440 435.5 501.84 blive til M351 396.5 440 435.5 501.84.

Opret derefter en ny sti med new Path2D(path), hvor path er navnet på den første konstant.

Dette billede kan nu tegnes ved at kalde ctx.fill(path2d), hvor path2d er navnet på den sti der blev deklareret i forrige trin.

For at angive farven på en form kaldes ctx.fillStyle(color) inden billedet tegnes. Denne funktion accepterer hex-farvekoder, CSS-farvenavne, CSS-farve-funktioner og gradienter som argumenter.

Du kan også bruge alle canvas-transformationseffekter som skalering og forskydning. For at sikre at transformationerne kun påvirker det aktuelle billede, kaldes ctx.setTransform(1,0,0,1,0,0) efter tegning af hvert lag.

Det følgende eksempel viser, hvordan et simpelt SVG-stibillede tegnes. Denne teknik kan gentages vilkårligt mange gange for at skabe komplekse baggrunde.

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

// Kopierede data fra Illustrator. Sørg for at det første tegn er M.
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";
// Opret en ny Path2D fra dataene.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Valgfri canvas-transformation. ctx.translate(x,y) kan også bruges til at flytte den nye sti.
  ctx.fillStyle = "blue"; // Angiv stiens farve. Gradienter kan også bruges her.
  ctx.fill(pondPath); // Tegn stien.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Nulstil transformationen, så den kun påvirker denne sti.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Ovenstående kode bør producere dette resultat: