SVG-paden

Als u een Lightscript wat wilt opfleuren, kan het toevoegen van een achtergrond een opvallende manier zijn om dit te doen. Er zijn een paar verschillende manieren om dit te bereiken, maar verreweg de gemakkelijkste en meest efficiënte is het gebruik van SVG-paden.

SVG-paden kunnen relatief eenvoudig worden gemaakt met Adobe Illustrator. Het is het beste om te beginnen met een gewone PNG-afbeelding die u wilt vereenvoudigen tot een SVG-pad. Zodra u een achtergrondafbeelding heeft gevonden, maak dan een nieuw Illustrator-project aan door op Nieuw te klikken en de voorinstelling Web Large te kiezen.

Importeer vervolgens uw referentieafbeelding in het nieuwe tekengebied door op Bestand -> Plaatsen in de werkbalk te klikken en vervolgens uw afbeelding te kiezen in het pop-upvenster dat verschijnt.

Vaak is het tekengebied veel groter dan de afbeelding die u heeft geïmporteerd. Om dit op te lossen, klikt u op de optie Object -> Tekengebieden -> Passend maken aan illustratiegrens.

Kies vervolgens een deel van de afbeelding dat u wilt isoleren in een pad. SVG-afbeeldingen bestaan uit polygonen die worden gedefinieerd door hun omtrekpad. Deze polygonen kunnen vervolgens worden gevuld met een kleur of kleurverloop met behulp van de JS Canvas API.

In dit voorbeeld zal ik de omtrek van de vijver natekenen en deze vullen met een effen kleur. Om te beginnen, selecteert u het pengereedschap door op P op uw toetsenbord te drukken. Klik op een punt langs de omtrek van de vorm die u wilt natekenen en voeg vervolgens meer punten toe totdat u een doorlopend pad heeft gemaakt met dezelfde vorm en grootte als uw gekozen vorm. De kleur van deze vorm maakt niet uit, omdat u de kleur afzonderlijk instelt in de JavaScript-code.

Zodra u tevreden bent met uw pad, exporteert u het door op Bestand -> Exporteren -> Exporteren als te klikken. Zorg ervoor dat u het SVG-bestandstype kiest.

Zorg er in het volgende venster dat opent voor dat Afbeelding is ingesteld op Koppeling en klik vervolgens op de optie Code weergeven.

Zoek in het Kladblok-venster dat opent de <polygon>-tag op en kopieer de volledige inhoud van het points-attribuut. Dit zou een lange reeks getallen moeten zijn. Klik vervolgens op Annuleren, want u heeft nu alle gegevens die u nodig heeft.

Om een padgebaseerde afbeelding op het effectcanvas te tekenen, declareert u twee nieuwe constanten. Declareer eerst een constante ingesteld op de tekenreeks die u eerder heeft gekopieerd.

Tip

Zo wordt 351 396.5 440 435.5 501.84 bijvoorbeeld M351 396.5 440 435.5 501.84.

Maak nu een nieuw pad met new Path2D(pad) waarbij pad de naam is van uw eerste constante.

Deze afbeelding kan nu worden getekend door ctx.fill(path2d) aan te roepen waarbij path2d de naam is van het pad dat u in de vorige stap heeft gedeclareerd.

Om de kleur van een vorm in te stellen, roept u ctx.fillStyle(kleur) aan voordat u de afbeelding tekent. Deze functie accepteert hexadecimale kleurcodes, CSS-kleurnamen, CSS-kleurfuncties en kleurverlopen als argumenten.

U kunt ook de volledige reeks canvas-transformatie-effecten gebruiken zoals schalen en vertalen. Om ervoor te zorgen dat de transformaties alleen van toepassing zijn op de huidige afbeelding, gebruikt u ctx.setTransform(1,0,0,1,0,0) nadat elke laag is getekend.

De volgende voorbeeldcode laat zien hoe u een eenvoudige SVG-padafbeelding tekent. Deze techniek kan zo vaak als u wilt worden herhaald om complexe achtergronden te tekenen.

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

// Data copied from Illustrator. Make sure the first character is 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";
// Create a new Path2D from the data.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // Optional canvas transformation. You can also use ctx.translate(x,y) to move the location of the new path.
  ctx.fillStyle = "blue"; // Set color of path. You can also use gradients here.
  ctx.fill(pondPath); // Draw the path.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation so it only affects this path.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

De bovenstaande code zou dit resultaat moeten produceren: