Obrazy SVG w p5.js: wczytaj, skaluj i zachowaj źródło

Aby wczytać obraz SVG w p5.js 2.3.4, użyj await loadImage('emblem.svg') wewnątrz async function setup(), a potem narysuj zwrócony obraz przez image(). Udostępniaj stronę i SVG przez HTTP. Zachowaj plik SVG jako edytowalny wzorzec: ta metoda wczytywania maluje p5.Image na Canvas i nie daje szkicowi edytowalnych ścieżek SVG. Aktualny opis loadImage dokumentuje wzorzec wczytywania oparty na Promise.

Pomyślne wczytanie odpowiada tylko na pierwsze pytanie. Sprawdź, czy otwór pozostaje przezroczysty, czy obraz nie jest rozciągnięty i czy jego wczytane wymiary w pikselach pasują do największego rozmiaru wyświetlania. Poniższy przykład używa naszego oryginalnego zaokrąglonego rombu z otworem i rysuje go w rozmiarach 48, 120 i 240 pikseli.

Wybierz wyświetlanie obrazu albo geometrię źródłową

Poradnik przypina p5.js 2.3.4 i renderer P2D. Używa obecnego asynchronicznego API, zamiast kopiować przykład startowy z preload() z samouczka 1.x. createCanvas tworzy Canvas szkicu i pozwala jawnie wybrać renderer.

W tej wersji implementacja wczytywania obrazów rysuje obraz wczytany przez przeglądarkę na wewnętrznym Canvas obiektu p5.Image. To wyjaśnia, dlaczego zachowanie rozszerzenia .svg i powiększenie wyświetlania Canvas nie wystarczą do zachowania edycji ścieżek wewnątrz szkicu.

Zapisz oryginalny SVG z rzeczywistym otworem

Zapisz ten plik jako emblem.svg. Ma jedną ścieżkę, brak osadzonej bitmapy, zadeklarowany rozmiar 120 × 120 i pasujący viewBox. Zewnętrzny zaokrąglony romb i wewnętrzny romb są dwoma konturami w tej ścieżce. fill-rule="evenodd" pozostawia środek niepomalowany; opis fill-rule MDN wyjaśnia, jak reguła określa wypełniony obszar.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>

Otwór nie jest białym rombem umieszczonym na koralowym kształcie. Różnica ma znaczenie, gdy zmienia się tło szkicu. Jeśli istniejący plik zawiera element <image>, sprawdź go według listy kontroli osadzonego rastra, zanim uznasz całą grafikę za edytowalne ścieżki.

Wczytaj przez asynchroniczny setup

Zapisz tę kompletną stronę jako example.html obok emblem.svg, a potem udostępnij folder lokalnym serwerem HTTP. Na przykład uruchom w folderze python3 -m http.server 8000 i otwórz http://localhost:8000/example.html w przeglądarce.

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>

Blok stanu pojawia się po wczytaniu i podaje wersję p5, wymiary wczytanego obrazu i dwie próbki pikseli źródła. Próbka ze środka sprawdza przezroczystość; koralowa próbka sprawdza nieprzezroczystą część pierścienia. Wywołania rysowania współdzielą jeden wczytany obraz. Nie wczytują ponownie ani nie modyfikują SVG między rozmiarami wyświetlania.

Opis image odróżnia zawartość źródłową od docelowej szerokości i wysokości. Tutaj każda wysokość docelowa jest obliczana z art.height / art.width, więc niekwadratowy obraz zastępczy także zachowa proporcje. Zachowaj oba wymiary w obliczeniu podczas zmiany szerokości wyświetlania.

Przykład ustawia pixelDensity(1), aby jawnie określić warunki porównania Canvas. Zapisz gęstość używaną w rzeczywistym szkicu; domyślna może zależeć od wyświetlacza. Zwiększenie gęstości Canvas nie odtwarza ścieżek, które stały się już wczytanym obrazem.

Co pokazał test w przeglądarce

Uruchomiliśmy oryginalny plik i ten przykład startowy w Chrome z p5.js 2.3.4, P2D i gęstością pikseli 1. Wczytany obraz miał 120 × 120. Próbka środka wynosiła [0, 0, 0, 0], a próbka wewnątrz koralowego obszaru [235, 112, 90, 255]. Jasne tło szkicu pozostawało widoczne przez otwór we wszystkich trzech rozmiarach docelowych.

Obserwacje opisują ten przygotowany plik, przeglądarkę, wersję i renderer. Nie są wynikiem zgodności dla każdego eksportowanego SVG, filtra, fontu lub zewnętrznego środowiska wykonawczego.

Edytowalne źródło i wyświetlanie Canvas

Dane ścieżki źródła pozostały niezmienione w całym teście. Narysowanie obrazu w 2× wpłynęło na wyświetlanie, a nie atrybut d w emblem.svg. Zapisz ten wzorzec z projektem, aby móc później przygotować inny obraz do przekazania.

Napraw zaobserwowany objaw

Obraz nigdy się nie pojawia

Sprawdź, czy adres SVG jest osiągalny z udostępnianej strony oraz czy loadImage() kończy się przed uruchomieniem image(). try/catch przykładu umieszcza błąd wczytywania w bloku stanu. Obraz zdalny może też nie wczytać się z powodu ograniczeń bezpieczeństwa przeglądarki, jak zaznacza dokumentacja loadImage. Zacznij od kontrolowanego pliku z tego samego źródła, aby oddzielić problem ładowania od problemu grafiki.

Otwórz sam SVG w przeglądarce. Jeśli tam też wygląda źle, najpierw popraw źródło. PNG ze zmienioną nazwą nie staje się dokumentem SVG, a opakowanie SVG wokół bitmapy nie tworzy brakujących konturów.

Obraz wygląda na rozciągnięty

Porównaj proporcje docelowe z art.width / art.height. Na przykład narysowanie kwadratowego obrazu w obszarze 240 × 120 celowo czyni go dwukrotnie szerszym względem wysokości. Użyj obliczenia proporcji z przykładu, gdy nie chcesz rozciągania. Jeśli samo źródło ma nadmiar pustego miejsca, sprawdź obszar roboczy i viewBox, zanim powiększysz wyświetlanie w ramach kompensacji.

Powiększone krawędzie wyglądają miękko

Sprawdź wymiary wczytanego obrazu, nie tylko rozmiar Canvas. W naszym teście obraz 120 × 120 był rysowany w obszarze 240 × 240. Zmiana tych argumentów docelowych nie przetwarza krzywych SVG ponownie przez nowe wczytanie obrazu.

Przygotuj SVG do przekazania z jawnymi wymiarami odpowiednimi do użycia, wczytaj go ponownie i sprawdź wynikowe art.width i art.height przed akceptacją. Zachowaj układ współrzędnych i kontury źródłowe. Potem porównaj najmniejszy i największy rozmiar ekranowy: większa liczba wczytanych pikseli nie uczyni małego otworu czytelnym, gdy końcowy obraz jest zbyt mały.

Jeśli szkic wymaga operacji geometrycznych zamiast malowania obrazu, zaplanuj to oddzielnie. Poradnik Canvas Path2D opisuje pracę z danymi ścieżek, a poradnik SVG w PixiJS porównuje drogi geometrii i tekstury w tamtym silniku. Ich API nie są zamienne z loadImage() p5.

Środek jest biały zamiast przezroczysty

Sprawdź oryginalny SVG pod kątem pomalowanego tła lub białego kształtu wewnętrznego. W tym źródle kontur evenodd pozostawia otwór, a alfa wczytanego środka wynosiła zero. Powtórz kontrolę z własnym plikiem na kontrastowym tle szkicu; biała strona podglądu może ukrywać różnicę.

Oddziel eksport Canvas od wzorca SVG

Standardowy opis saveCanvas wymienia obrazy wyjściowe PNG, WebP i JPG. Zapisanie pomalowanego Canvas przez to API nie odzyskuje oryginalnych ścieżek SVG. Zachowaj emblem.svg oddzielnie, jeśli potrzebujesz przyszłych zmian konturu lub pliku do przekazania opartego na ścieżkach. Zrzut gładko wyglądającego Canvas nie potwierdza procesu eksportu edytowalnego SVG.

PerfectVector pasuje na wcześniejszym etapie, gdy ilustracja istnieje tylko jako płaski PNG lub JPG, a potrzebujesz edytowalnych konturów źródłowych. Przekonwertuj obraz na SVG, sprawdź kontur i przestrzeń negatywową w edytorze SVG, a potem powtórz rzeczywiste kontrole wczytywania i rozmiaru w p5. Użyj istniejącego czystego SVG bezpośrednio. Obrysowanie nie zmienia API obrazów p5 ani nie zamienia jego wyniku Canvas w dokument ścieżek SVG. Szerszy poradnik wektoryzacji wyjaśnia ten etap przygotowania źródła.

Zachowaj wzorzec, zapisz wersję p5 i wczytane wymiary oraz zaakceptuj zasób dopiero wtedy, gdy otwór i krawędzie działają w rozmiarach używanych przez szkic.

Najczęstsze pytania

Czy p5.js może wczytać SVG przez loadImage? Tak. Ten przykład p5.js 2.3.4 P2D wczytuje oryginalny SVG przez await loadImage w asynchronicznym setup. Sprawdź wygląd i wczytane wymiary własnego pliku, zamiast uznawać jedno udane wczytanie za pełną zgodność SVG.

Czy obraz SVG wczytany w p5 pozostaje edytowalny jako ścieżki? Ta droga wczytywania zwraca p5.Image i maluje ją na Canvas. Zachowaj oryginalny SVG oddzielnie do edycji ścieżek źródłowych. Wyświetlanie obrazu na Canvas nie udostępnia edytowalnego DOM SVG wczytanej grafiki.

Dlaczego mój SVG w p5 rozmywa się po powiększeniu? Porównaj wymiary wczytanego obrazu z wymiarami docelowymi. Nasz wczytany obraz 120 × 120 wyglądał bardziej miękko przy 240 × 240. Przygotuj odpowiednio duże źródło do przekazania, wczytaj je ponownie i sprawdź rzeczywisty wynik.

Czy saveCanvas eksportuje oryginalny SVG? Standardowe API saveCanvas opisuje wyjścia PNG, WebP i JPG. Zachowaj oryginalny wzorzec SVG albo zweryfikuj osobny proces renderowania i eksportowania SVG dla wyniku opartego na ścieżkach.

Źródła

1. p5.js loadImage — Opisuje wczytywanie obrazów oparte na Promise i ograniczenia przeglądarki.
2. Wydanie p5.js 2.3.4 — Identyfikuje przypiętą wersję i oficjalny skrypt CDN.
3. p5.js createCanvas — Opisuje tworzenie Canvas i wybór renderera.
4. Kod wczytywania obrazów p5.js 2.3.4 — Pokazuje rysowanie wczytanego obrazu na wewnętrznym Canvas p5.Image.
5. MDN fill-rule — Wyjaśnia wyznaczanie wypełnionego obszaru ścieżki złożonej przez evenodd.
6. p5.js image — Definiuje położenie obrazu i wymiarowanie docelowe.
7. p5.js pixelDensity — Opisuje gęstość pikseli szkicu i domyślną wartość zależną od ekranu.
8. p5.js saveCanvas — Wymienia standardowe formaty eksportu obrazów Canvas.