Import SVG do Konva: wybierz obraz lub edytowalne ścieżki

Użyj Konva.Image, gdy chcesz umieścić kompletny SVG na płótnie. Użyj osobnych węzłów Konva.Path, gdy Twoja aplikacja musi zmieniać kolory poszczególnych kształtów ścieżek lub nimi manipulować. Wczytanie obrazu SVG nie tworzy automatycznie obiektu Konva dla każdego zawartego w nim elementu. Przewodnik Konva dotyczący SVG opisuje je jako różne podejścia.

W narzędziu do wybierania logo lub tworzenia kompozycji jeden obraz może wystarczyć. W przypadku dwukolorowego znaczka, którego obszary wymagają osobnych elementów sterujących, struktura obiektów ma znaczenie. Zanim wybierzesz sposób wczytywania, ustal, co użytkownik musi edytować, i zachowaj źródłowy SVG razem ze sceną na płótnie.

Wybierz reprezentację przed importem

Path tutorial Konva opisuje przekazywanie danych ścieżki SVG przez data. To wartość atrybutu d ścieżki, a nie cały dokument SVG. Skopiowanie samych wartości d nie przenosi transformacji grupy nadrzędnej, odziedziczonego koloru ani zachowania wynikającego z viewBox pliku SVG.

Jest też osobna kwestia dotycząca pliku źródłowego: czy SVG w ogóle zawiera ścieżki? Skorzystaj z przewodnika po sprawdzaniu osadzonych obrazów rastrowych, gdy grafika jest bitmapą opakowaną w SVG. Poprawny SVG oparty na ścieżkach nadal może stać się jednym węzłem obrazu w Konva; nie oznacza to, że plik źródłowy jest pozorną grafiką wektorową.

Dwukolorowy przykład z widocznym testem wypełnienia

Oryginalny znak poniżej zawiera dwie ręcznie utworzone ścieżki z jawnie określonymi wypełnieniami. Lewe płótno wczytuje obie jako jeden obraz. Prawe płótno tworzy dwa węzły Path z tej samej geometrii. W obu przypadkach ustawiamy różowe wypełnienie i skalę 1.3.

Różowy prostokąt po lewej jest przydatnym potwierdzeniem: imageNode.fill() zmienia tło kształtu obrazu, podczas gdy nieprzezroczyste zielone i żółte obszary zachowują kolory ze źródła. Po prawej paths[0].fill() zmienia tylko pierwszy obszar. Ten test wykorzystuje oryginalną geometrię, a nie wynik konwersji w PerfectVector.

Zapisz poniższy kod jako plik HTML i udostępnij go przez lokalny serwer deweloperski. Kod używa ustalonej wersji Konva 10.6.0, tworzy dwie sceny o wymiarach 320 × 240 i czeka na zdekodowanie obrazu SVG przed rysowaniem. To ten sam kod porównania, który uruchomiono na potrzeby zrzutu.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

W tym celowo niewielkim przykładzie każda ścieżka ma własne ustawienia kolorów i używa tych samych współrzędnych. Grupa nadaje dwóm edytowalnym ścieżkom wspólną pozycję i skalę. Zmiana skali grupy pozostawia data każdej ścieżki bez zmian; zmienia miejsce i rozmiar rysowania grupy.

W przypadku istniejącego, zaufanego pliku SVG, który ma być jedynie umieszczony w całości jako obraz, Image tutorial pokazuje standardowy proces wczytywania obrazu. Wczytaj obraz z adresu URL pliku SVG, poczekaj na jego załadowanie, a następnie przekaż go do Konva.Image. Komponent React renderujący znaczniki SVG jest inną wartością niż obiekt obrazu oczekiwany przez płótno.

Gdy grafika jest złożona, przenoś więcej niż dane ścieżek

Tablica parts z przykładu to jawny model dwóch znanych kształtów. Nie jest importerem SVG. Zanim zastosujesz podobne podejście do wyeksportowanej grafiki, sprawdź, co odpowiada za jej wygląd:

• Transformacja grupy może przesuwać, obracać lub skalować wszystkie jej elementy potomne. Zachowaj tę zależność albo świadomie uwzględnij transformację bezpośrednio w geometrii.
• Właściwości wypełnienia i obrysu mogą pochodzić z elementu nadrzędnego lub reguły CSS. Ustal docelowe wypełnienie i obrys, zamiast zakładać, że każda ścieżka je deklaruje.
• Gradienty, przycinanie, maski i filtry mają własne definicje i odwołania. Skopiowany ciąg d nie odtwarza tych efektów.
• Tekst i podstawowe kształty mogą wymagać osobnego podejścia. Nie zakładaj, że każdy widoczny obiekt jest już ścieżką.

Podczas testowania wyświetlaj wyrenderowany oryginał obok swojej rekonstrukcji. Zacznij od jednego rozpoznawalnego obszaru, porównaj jego pozycję i kolor, a dopiero potem dodaj pozostałe kształty. Przewodnik po edycji SVG opisuje porządkowanie źródła, gdy praca ze strukturą obiektów jest trudna.

Jeśli sterowanie poszczególnymi ścieżkami nie jest potrzebne, wczytanie całego SVG jako obrazu może pozwolić uniknąć tej rekonstrukcji. Konva dokumentuje też renderowanie SVG za pomocą zewnętrznej biblioteki, takiej jak canvg, a następnie umieszczenie wynikowego płótna w Konva.Image. Nadal jest to reprezentacja obrazu; nie daje użytkownikowi osobnych węzłów Konva dla każdej ścieżki źródłowej. Zobacz udokumentowane opcje.

W przypadku grafiki, która wymaga tylko zmiany koloru w źródle, innym podejściem jest aktualizacja samego SVG i ponowne wczytanie jego obrazu. Opiekun Konva opisuje ten proces w zgłoszeniu 530 w react-konva. Zastosuj edycję uwzględniającą strukturę znanego Ci SVG, zamiast bez rozróżnienia zastępować wszystkie wypełnienia i tracić zamierzone różnice kolorów.

Traktuj eksport z płótna jako wynik rastrowy

Przykład wywołuje pathScene.stage.toDataURL({ pixelRatio: 2 }). Scena o wymiarach 320 × 240 daje po zdekodowaniu PNG o wymiarach 640 × 480. Zwiększenie pixelRatio zmienia wymiary eksportu w pikselach; nie zamienia PNG w edytowalny SVG. Dokumentacja eksportu Konva wyjaśnia to ustawienie.

Przechowuj osobno te trzy materiały wynikowe:

1. Oryginalny SVG do edycji grafiki wektorowej i porównań.
2. Dane sceny Twojej aplikacji, w tym odwołania do ścieżek lub obrazów oraz zmiany obsługiwane przez aplikację.
3. PNG lub inny eksport rastrowy do zastosowań wymagających wyrenderowanego obrazu.

Otwórz ponownie wyeksportowany PNG i sprawdź jego wymiary oraz drobne szczegóły. Przetestuj też obraz SVG w przeglądarkach obsługiwanych przez Twoją aplikację; przewodnik Konva dotyczący SVG zwraca uwagę na różnice w zgodności renderowania. Ten przykład testuje jeden prosty plik SVG bez zależności od zasobów zewnętrznych, więc nie potwierdza obsługi każdego wyeksportowanego pliku ani efektu.

Nie oceniaj jakości grafiki wektorowej wyłącznie na podstawie podglądu na płótnie. Przewodnik dotyczący pikselizacji SVG rozróżnia geometrię źródłową, podglądy rastrowe i rozmiar wyświetlania.

Kiedy PerfectVector pomaga przygotować źródło

Jeśli materiałem wyjściowym jest wyłącznie motyw w formacie PNG lub JPG, PerfectVector może pomóc odtworzyć edytowalną geometrię SVG, zanim zbudujesz scenę Konva. Przekształć obraz w grafikę wektorową, otwórz wynik w edytorze i sprawdź sylwetkę, otwory oraz obszary kolorów, zanim przyporządkujesz jakiekolwiek ścieżki w swojej aplikacji.

Wektoryzacja nie tworzy modelu sceny Konva ani parsera dowolnych plików SVG. Nadal wybierasz reprezentację i przenosisz właściwości, których ona potrzebuje. Jeśli masz już użyteczny źródłowy plik SVG, pracuj na nim. W przypadku fotografii lub malarskiej tekstury, która powinna pozostać zbiorem pikseli, węzeł obrazu jest często odpowiednią reprezentacją bez wektoryzacji.

Sprawdź import na własnej grafice

Zanim dodasz SVG do edytora wielokrotnego użytku:

1. Wybierz jeden węzeł całego obrazu albo osobne węzły kształtów na podstawie elementów sterujących potrzebnych użytkownikowi.
2. Zmień kolor jednego obszaru i potwierdź, że zmienia się tylko zamierzony obiekt.
3. Zmień rozmiar całego projektu i sprawdź odstępy, wygląd obrysu oraz przycinanie.
4. Wyeksportuj plik w wymaganych wymiarach w pikselach i otwórz ponownie plik rastrowy.
5. Otwórz niezależnie zapisany źródłowy plik SVG, aby eksport z płótna nigdy nie stał się Twoją jedyną kopią.

Najczęściej zadawane pytania

Czy Konva.Image umożliwia edycję ścieżek wewnątrz SVG? Nie. Wyświetla SVG jako jeden węzeł obrazu. Aby sterować poszczególnymi obszarami ścieżek, utwórz osobne węzły Path z odpowiednich danych ścieżek lub zastosuj proces edycji SVG, który zachowuje strukturę dokumentu.

Dlaczego fill dodaje prostokąt, zamiast zmieniać kolory mojego SVG? W węźle Image wypełnienie maluje kształt obrazu za jego zawartością. Nie zmienia wypełnień wewnątrz SVG. Edytuj źródłowy SVG i wczytaj go ponownie albo użyj osobnych węzłów Path, gdy Twoja aplikacja wymaga niezależnego sterowania kolorami.

Czy zwiększenie pixelRatio powoduje eksport pliku wektorowego? Nie. W tym przykładzie pixelRatio 2 daje PNG o szerokości i wysokości dwukrotnie większych niż wymiary sceny. Przechowuj źródłowy SVG osobno do edycji grafiki wektorowej.

Źródła

1. Konva — SVG on canvas — Wyjaśnia opcje wykorzystujące Image, Path i zewnętrzny renderer oraz ograniczenia zgodności z przeglądarkami.
2. Konva — Path tutorial — Dokumentuje tworzenie Path z danych ścieżki SVG i jawnie określonych właściwości wypełnienia oraz obrysu.
3. Konva — Image tutorial — Pokazuje wczytywanie obrazu i umieszczanie go w scenie Konva.
4. Konva — High-quality image export — Wyjaśnia eksport rastrowy i wpływ pixelRatio na wymiary wynikowe.
5. Konva — react-konva issue 530 — Opisuje podejście opiekuna projektu do zmiany kolorów obrazu SVG przez edycję źródła i ponowne wczytanie.

Zaczynasz od ikony dostępnej tylko jako obraz rastrowy? Zamień swój obraz w ścieżki SVG, sprawdź odtworzone obszary kolorów i przetestuj jeden obszar w Konva, zanim połączysz pozostałe elementy swojego edytora.