SVG-sökvägar

Om du vill lägga till färg i ett Lightscript kan bakgrunder vara ett effektfullt sätt att göra det. Det finns ett par olika sätt att åstadkomma detta, men det i särklass enklaste och mest effektiva sättet är att använda SVG-sökvägar.

SVG-sökvägar kan skapas relativt enkelt med Adobe Illustrator. Det är bäst att börja med en vanlig PNG-bild som du vill förenkla till en SVG-sökväg. När du har hittat en bakgrundsbild skapar du ett nytt Illustrator-projekt genom att klicka på New och välja förinställningen Web Large.

Importera sedan din referensbild till den nya arbetsytan genom att klicka på File -> Place i verktygsfältet och välja din bild i den dialog som öppnas.

För det mesta är arbetsytan mycket större än bilden du importerar. För att åtgärda detta klickar du på Object -> Artboards -> Fit to Artwork Bounds.

Välj sedan den del av bilden du vill isolera till en sökväg. SVG-bilder består av polygoner som definieras av en konturlinje. Dessa polygoner kan sedan fyllas med en färg eller gradient med hjälp av JS Canvas API.

I det här exemplet ska jag följa konturlinjen runt sjön och fylla den med en enfärgad färg. Börja med att trycka på P på tangentbordet för att välja pennverktyget. Klicka på en punkt längs konturlinjen på den form du vill spåra och fortsätt lägga till fler punkter tills du har skapat en sammanhängande sökväg med samma form och storlek som den valda formen. Färgen på den här formen spelar ingen roll eftersom du ställer in färgen separat i JavaScript-koden.

När du är nöjd med din sökväg exporterar du den genom att klicka på File -> Export -> Export As. Se till att du väljer SVG-filtypen.

I nästa fönster som öppnas ser du till att Image är inställt på Link och klickar sedan på Show Code.

I Anteckningar-fönstret som öppnas letar du upp taggen <polygon> och kopierar hela attributet points. Det ska vara en lång sträng med siffror. Klicka sedan på Cancel eftersom du nu har all data du behöver.

För att rita en sökvägsbaserad bild på effektens canvas deklarerar du två nya konstanter. Börja med att deklarera en konstant inställd på den sträng du kopierade tidigare.

Skapa nu en ny sökväg med new Path2D(path) där path är namnet på din första konstant.

Den här bilden kan nu ritas med anropet ctx.fill(path2d) där path2d är namnet på den sökväg du deklarerade i föregående steg.

För att ange färgen på en form, anropa ctx.fillStyle(color) innan du ritar bilden. Den här funktionen tar hex-färgkoder, CSS-färgnamn, CSS-färgfunktioner och gradienter som argument.

Du kan också använda hela canvas-transformationseffektsekvensen såsom skalning och förflyttning. Använd ctx.setTransform(1,0,0,1,0,0) efter att varje lager har ritats för att säkerställa att transformationer bara tillämpas på den aktuella bilden.

Följande exempelkod visar hur man ritar en enkel SVG-sökvägsbild. Den här tekniken kan upprepas hur många gånger som helst för att rita komplexa bakgrunder.

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

// Data kopierad från Illustrator. Se till att det första tecknet är 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";
// Skapa en ny Path2D från data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Valfri canvas-transformation. Du kan också använda ctx.translate(x,y) för att flytta den nya sökvägens position.
  ctx.fillStyle = "blue"; // Ange sökvägsfärgen. Du kan också använda en gradient här.
  ctx.fill(pondPath); // Rita sökvägen.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Återställ transformationen så att den bara påverkar den här sökvägen.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Koden ovan bör ge följande resultat: