Operacje boolowskie na SVG w Paper.js: wycinaj i łącz importowaną grafikę

Zaimportuj SVG, znajdź odpowiednie obiekty ścieżek, a następnie wywołaj unite(), aby połączyć wypełnione obszary, lub subtract(), aby usunąć jeden obszar z drugiego. Zachowaj operandy do czasu sprawdzenia wyniku i ponownie otwórz wyeksportowany SVG, zanim użyjesz go gdzie indziej.

Najważniejszą decyzję podejmujesz przed operacją boolowską: które kształty należy połączyć? Importowana grupa może zawierać prostokąty tła, ścieżki przycinające, napisy i elementy dekoracyjne. Połączenie wszystkich elementów podrzędnych może zlikwidować podziały, które chcesz zachować. W tym przykładzie używamy trzech nazwanych, zamkniętych ścieżek, aby pokazać Ci dokładnie, co się zmienia.

Zacznij od wypełnionej geometrii, którą potrafisz zidentyfikować

Importer SVG w Paper.js przyjmuje kod SVG, element SVG lub adres URL. Każdy z tych sposobów wymaga innej obsługi wczytywania: ten przykład importuje ciąg znaków zapisany bezpośrednio w kodzie; plik zdalny należy przetworzyć po wczytaniu, w funkcji zwrotnej importu.

W tym zadaniu operandy muszą być obiektami Path lub CompoundPath. Grupa jest kontenerem, a obraz rastrowy nie dostarcza granicy potrzebnej do operacji boolowskiej na ścieżkach. Jeśli plik zachowuje się wyłącznie jak pojedynczy obraz, najpierw sprawdź, dlaczego nie można rozgrupować SVG.

Używaj identyfikatorów ID dla elementów, nad którymi masz kontrolę. Nie zakładaj, że children[0] oznacza „logo” we wszystkich eksportowanych plikach. Sprawdź nieznaną grafikę i świadomie wskaż jej elementy. Zachowaj istniejącą ścieżkę złożoną bez zmian, jeśli jej podścieżki już definiują zamierzone otwory.

Uruchom niewielki przykład importu, sumy i odejmowania

Poniższy kod przetestowaliśmy z Paper.js 0.12.18 w przeglądarce. Grafika to oryginalny SVG napisany ręcznie: kwadratowy korpus, nakładający się występ i biały kwadrat oznaczający zamierzony otwór. Nie jest to przykładowy wynik konwersji w PerfectVector.

W pustym folderze zainstaluj bibliotekę w ustalonej wersji:

npm install --save-exact paper@0.12.18

Zapisz poniższy kod jako index.html:

<!doctype html>
<meta charset="utf-8">
<title>SVG Boolean example</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<div id="result" style="background:#d8e8e0; width:300px"></div>
<pre id="svg-output"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="example.js"></script>

Zapisz poniższy kod jako example.js, a następnie otwórz plik HTML w przeglądarce:

paper.setup(document.getElementById('work'));
const source = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
  <path id="body" fill="#176b62" d="M40 40H180V180H40Z"/>
  <path id="tab" fill="#ee9852" d="M160 80H260V140H160Z"/>
  <path id="hole" fill="#ffffff" d="M80 80H130V130H80Z"/>
</svg>`;
const imported = paper.project.importSVG(source, { insert: false, expandShapes: true });
function operand(name) {
  const item = imported.getItem({ name });
  if (!(item instanceof paper.Path || item instanceof paper.CompoundPath)) {
    throw new Error(`Expected path geometry for ${name}`);
  }
  return item;
}
const joined = operand('body').unite(operand('tab'), { insert: false });
const cut = joined.subtract(operand('hole'), { insert: false });
cut.fillColor = '#176b62';
cut.strokeColor = null;
paper.project.activeLayer.addChild(cut);
const output = paper.project.exportSVG({ asString: true, bounds: new paper.Rectangle(0, 0, 300, 220) });
document.getElementById('result').innerHTML = output;
document.getElementById('svg-output').textContent = output;

Dzięki insert: false importowana grafika pozostaje poza sceną. Opcja expandShapes: true nakazuje importerowi zamienić obsługiwane kształty podstawowe na ścieżki; nasza grafika testowa już zawiera elementy ścieżek. Jawne sprawdzenie klasy nadal ma znaczenie, ponieważ importowany identyfikator ID może wskazywać kontener lub obiekt innego typu.

API operacji boolowskich zwraca nowy obiekt ścieżki. Tutaj wynik pozostaje poza sceną aż do dodania ostatecznego kształtu z wycięciem. Oryginalne elementy nadal są dostępne w imported, więc nieudana operacja nie wymaga odtwarzania źródła.

joined.subtract(hole) usuwa otwór z połączonej sylwetki. Odwrócenie kolejności operandów oznacza inną operację i może dać pusty lub nieoczekiwany wynik. Domyślny tryb odejmowania w Paper.js traktuje operandy jako obszary. Jego opcja trace dotyczy geometrii boolowskiej; nie ma związku z wektoryzacją obrazu PNG.

Sprawdź wynik jako geometrię i jako plik

W tym przykładzie suma zwróciła Path; odejmowanie zwróciło CompoundPath z dwoma konturami. Końcowy prostokąt ograniczający miał x = 40, y = 40, szerokość = 220, wysokość = 140 w jednostkach SVG. Grafika mieści się w eksportowanym obszarze widoku o wymiarach 300 × 220, więc prostokąt ograniczający i rozmiar dokumentu celowo się różnią.

Sprawdziliśmy środek otworu w punkcie (105, 105): znajdował się wewnątrz połączonej sylwetki i poza wynikiem odejmowania. Punkt w pełnej części korpusu, o współrzędnych (60, 60), pozostał wewnątrz. Ponowny import wyeksportowanego SVG zachował prostokąt ograniczający i ponownie wykluczył środek otworu. Są to wyniki dla tej prostej grafiki testowej, a nie gwarancja dla każdego importowanego pliku.

API eksportu może zwrócić ciąg znaków z kodem SVG i przyjąć jawnie określony prostokąt ograniczający. Skopiuj kod wyświetlony pod wynikiem do pliku result.svg, a następnie otwórz ten plik niezależnie. Nasz zapisany eksport zawierał jeden element ścieżki z dwiema zamkniętymi podścieżkami; wyświetlał się również poprawnie po bezpośrednim otwarciu w przeglądarce.

W przypadku własnej grafiki sprawdź:

• sylwetkę i każdy otwór w porównaniu z oryginałem;
• czy przypadkowo nie uwzględniono tła lub ukrytego kształtu pomocniczego;
• zamierzone wypełnienie, ponieważ jeden połączony kształt nie może zachować dwóch niezależnie edytowalnych jednolitych wypełnień;
• eksportowany obszar widoku, zwłaszcza gdy grafika sięga krawędzi dokumentu;
• plik w aplikacji, w której będzie faktycznie używany.

Biały obiekt nałożony na grafikę może wyglądać jak otwór na białym papierze. Umieść wynik na kontrastowym tle, aby sprawdzić przezroczystość. Poradnik dotyczący wypełniających się otworów w SVG wyjaśnia powiązane problemy ze ścieżkami złożonymi i regułami wypełnienia.

Gdy operacja daje niewłaściwy kształt

Brakuje metody. Sprawdź klasę wybranego obiektu. Znajdź odpowiednią ścieżkę wewnątrz grupy lub podczas importu zamień obsługiwane kształty podstawowe na ścieżki. Nie rozwiązuj tego przez łączenie wszystkich obiektów potomnych: ścieżki złożone też zawierają elementy podrzędne, a ich wzajemne relacje definiujące otwory mają znaczenie.

Wynik wygląda tak samo jak wcześniej. Upewnij się, że wyświetlasz zwrócony obiekt. Pozostawienie widocznych oryginałów może zasłonić poprawny wynik odejmowania. W przykładzie na aktywną warstwę trafia tylko wynik końcowy.

Obrys znika lub zmienia znaczenie. Ten przykład operuje na zamkniętych, wypełnionych obszarach. Widoczna gruba linia nie jest automatycznie tym samym kształtem co obszar zajmowany przez jej obrys. Jeśli potrzebujesz tego obrysu jako wypełnionego operandu, przygotuj w edytorze grafiki wektorowej kopię z obrysem zamienionym na ścieżkę i sprawdź ją przed importem. Zachowaj edytowalny oryginał.

Grafika z wieloma szczegółami sprawia problemy. Wyodrębnij dwa operandy i sprawdź ich kontury, zanim zastosujesz sekwencję operacji do całej ilustracji. Duplikaty, samoprzecięcia i drobne fragmenty wymagają sprawdzenia w każdym konkretnym przypadku. W tym niewielkim przykładzie nie oceniano ani wydajności, ani zakresu zgodności z SVG. Przy jednorazowej poprawce narzędzia zaznaczania i edycji węzłów w edytorze grafiki wektorowej mogą być łatwiejsze w użyciu niż pisanie ciągu operacji przetwarzających geometrię.

Gdy Twoim źródłem nadal jest PNG lub JPG

Jeśli brakuje edytowalnego oryginału, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc Ci przygotować SVG z odpowiedniej grafiki rastrowej. Obejrzyj podgląd wyniku, sprawdź kontury i puste przestrzenie, a następnie pobierz plik do przetestowania w Paper.js.

Wektoryzacja nie określa, które elementy Twój program powinien połączyć lub odjąć. Nadal musisz sprawdzić importowaną strukturę, wybrać właściwe operandy i skontrolować wyeksportowany wynik. Użyj oryginalnej grafiki wektorowej, jeśli ją masz; prosty kwadrat lub okrąg narysuj bezpośrednio, zamiast go wektoryzować. Omówienie wektoryzacji obrazów przedstawia tę decyzję dotyczącą pliku źródłowego.

Często zadawane pytania

Czy mogę wywołać unite na importowanej grupie SVG? Najpierw wybierz odpowiednie operandy Path lub CompoundPath wewnątrz grupy. Grupa określa organizację elementów, a połączenie wszystkich jej elementów podrzędnych może uwzględnić tło lub zniszczyć zamierzone podziały.

Czy subtract usuwa oryginalne ścieżki? Zwraca nowy obiekt ścieżki. Ten przykład używa insert: false dla importu i wyników operacji boolowskich, a następnie wstawia tylko wynik końcowy. Operandy źródłowe pozostają dostępne w importowanym kontenerze.

Dlaczego otwór nadal wygląda na biały? Sprawdź go na kolorowym tle. Obiekt z białym wypełnieniem zasłania to, co znajduje się za nim; otwór powstały po odejmowaniu odsłania to tło. Ponownie otwórz wyeksportowany plik, aby potwierdzić, że ta relacja została zachowana.

Czy wektoryzacja wykona za mnie porządkowanie za pomocą operacji boolowskich? Nie. Może odtworzyć grafikę złożoną ze ścieżek na podstawie odpowiedniego źródła rastrowego, ale Twoja aplikacja nadal musi wybrać geometrię do połączenia, obszar do usunięcia i sposób sprawdzenia wyniku.

Źródła

1. Paper.js — Project reference — Dokumentuje import i eksport SVG, prostokąt ograniczający oraz zawartość projektu.
2. Paper.js — Path reference — Definiuje sumę i odejmowanie, zwracane obiekty ścieżek oraz opcje operacji boolowskich.
3. Paper.js — CompoundPath reference — Opisuje geometrię złożoną i tworzące ją ścieżki.

Jeśli obraz rastrowy jest Twoim jedynym źródłem, przygotuj SVG do przetestowania, sprawdź jego elementy, a następnie przetestuj najmniejszą użyteczną operację boolowską, zanim przetworzysz resztę grafiki.