Ścieżki SVG

Jeśli chcesz upiększyć Lightscript, dodanie tła może być uderzającym sposobem na to. Istnieje kilka różnych sposobów, aby to osiągnąć, ale zdecydowanie najłatwiejszym i najwydajniejszym jest użycie ścieżek SVG.

Ścieżki SVG można tworzyć stosunkowo łatwo za pomocą Adobe Illustrator. Najlepiej zacząć od zwykłego obrazu PNG, który chcesz uprościć do ścieżki SVG. Po znalezieniu obrazu tła utwórz nowy projekt Illustrator, klikając Nowy i wybierając ustawienie wstępne Web Large.

Następnie zaimportuj swój obraz referencyjny do nowego obszaru roboczego, klikając Plik -> Umieść na pasku narzędzi, a następnie wybierając obraz w wyskakującym oknie.

Często obszar roboczy jest znacznie większy niż zaimportowany obraz. Aby to naprawić, kliknij opcję Obiekt -> Obszary robocze -> Dopasuj do granic ilustracji.

Następnie wybierz część obrazu, którą chcesz wyizolować w ścieżce. Obrazy SVG składają się z wielokątów definiowanych przez ich ścieżkę konturu. Te wielokąty można następnie wypełnić kolorem lub gradientem za pomocą JS Canvas API.

W tym przykładzie prześledzę kontur stawu i wypełnię go jednolitym kolorem. Aby rozpocząć, wybierz narzędzie pióra, naciskając P na klawiaturze. Kliknij punkt wzdłuż konturu kształtu, który chcesz prześledzić, a następnie dodaj kolejne punkty, aż utworzysz ciągłą ścieżkę o tym samym kształcie i rozmiarze co wybrany kształt. Kolor tego kształtu nie ma znaczenia, ponieważ ustawiasz kolor osobno w kodzie JavaScript.

Gdy będziesz zadowolony ze swojej ścieżki, wyeksportuj ją, klikając Plik -> Eksportuj -> Eksportuj jako. Upewnij się, że wybierasz typ pliku SVG.

W następnym oknie, które się otworzy, upewnij się, że Obraz jest ustawiony na Łącze, a następnie kliknij opcję Pokaż kod.

W oknie Notatnika, które się otworzy, znajdź tag <polygon> i skopiuj całą zawartość atrybutu points. Powinna to być długa sekwencja liczb. Następnie kliknij Anuluj, ponieważ masz teraz wszystkie potrzebne dane.

Aby narysować obraz oparty na ścieżce na canvas efektu, zadeklaruj dwie nowe stałe. Najpierw zadeklaruj stałą ustawioną na skopiowany wcześniej ciąg znaków.

Wskazówka

Na przykład 351 396.5 440 435.5 501.84 staje się M351 396.5 440 435.5 501.84.

Teraz utwórz nową ścieżkę za pomocą new Path2D(sciezka), gdzie sciezka jest nazwą twojej pierwszej stałej.

Ten obraz można teraz narysować, wywołując ctx.fill(path2d), gdzie path2d jest nazwą ścieżki zadeklarowanej w poprzednim kroku.

Aby ustawić kolor kształtu, wywołaj ctx.fillStyle(kolor) przed narysowaniem obrazu. Ta funkcja akceptuje kody kolorów szesnastkowych, nazwy kolorów CSS, funkcje kolorów CSS i gradienty jako argumenty.

Możesz również używać pełnego zestawu efektów transformacji canvas, takich jak skalowanie i przesunięcie. Aby transformacje dotyczyły tylko bieżącego obrazu, użyj ctx.setTransform(1,0,0,1,0,0) po narysowaniu każdej warstwy.

Poniższy przykładowy kod pokazuje, jak narysować prosty obraz ścieżki SVG. Tę technikę można powtarzać tyle razy, ile chcesz, aby tworzyć złożone tła.

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

Powyższy kod powinien dać taki wynik: