Paper.js-SVG-Booleans: Grafik schneiden und verbinden

Importiere das SVG, finde die gewünschten Pfadobjekte und rufe dann unite() auf, um gefüllte Bereiche zu verbinden, oder subtract(), um einen Bereich aus einem anderen zu entfernen. Behalte die Operanden, bis du das Ergebnis geprüft hast, und öffne das exportierte SVG erneut, bevor du es anderswo verwendest.

Die wichtige Entscheidung fällt vor der booleschen Operation: Welche Formen gehören zusammen? Eine importierte Gruppe kann Hintergrundrechtecke, Beschneidungspfade, Schrift und dekorative Teile enthalten. Das Kombinieren aller untergeordneten Elemente kann die Trennungen entfernen, die du erhalten wolltest. Diese Anleitung verwendet drei benannte geschlossene Pfade, damit du genau siehst, was sich verändert.

Beginne mit identifizierbarer gefüllter Geometrie

Der SVG-Importer von Paper.js akzeptiert SVG-Markup, ein SVG-Element oder eine URL. Je nach Eingabe musst du das Laden unterschiedlich behandeln: Dieses Beispiel importiert eine Inline-Zeichenfolge; eine entfernte Datei sollte nach dem Laden im Import-Callback verarbeitet werden.

Für diese Aufgabe müssen die Operanden Path- oder CompoundPath-Objekte sein. Eine Gruppe ist ein Container, und ein Rasterbild liefert nicht die Grenze für eine boolesche Pfadoperation. Wenn sich eine Datei nur wie ein einzelnes Bild verhält, prüfe zuerst warum sich ein SVG nicht entgruppieren lässt.

Verwende IDs für Teile, die du kontrollierst. Gehe bei beliebigen Exporten nicht davon aus, dass children[0] „das Logo“ bedeutet. Prüfe unbekannte Grafiken und ordne die Teile bewusst zu. Behalte einen vorhandenen zusammengesetzten Pfad unverändert, wenn seine Unterpfade bereits die gewünschten Löcher definieren.

Teste einen kleinen Import, eine Vereinigung und eine Subtraktion

Wir testeten den folgenden Code mit Paper.js 0.12.18 im Browser. Die Grafik ist ein eigenes, von Hand erstelltes SVG: ein quadratischer Körper, eine überlappende Lasche und ein weißes Quadrat, das die gewünschte Öffnung markiert. Es ist kein PerfectVector-Konvertierungsbeispiel.

Installiere in einem leeren Ordner die Bibliothek in der festgelegten Version:

npm install --save-exact paper@0.12.18

Speichere dies als 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>

Speichere dies als example.js und öffne dann das HTML im Browser:

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;

Der Import bleibt mit insert: false außerhalb der Szene. expandShapes: true fordert den Importer auf, unterstützte Grundformen in Pfade umzuwandeln; unser Testbeispiel enthält bereits Pfadelemente. Die ausdrückliche Klassenprüfung ist trotzdem wichtig, weil eine importierte ID einen Container oder einen anderen Elementtyp identifizieren kann.

Die Boolean-API gibt ein neues Pfadobjekt zurück. Hier bleibt das Ergebnis außerhalb der Szene, bis die endgültig ausgeschnittene Form eingefügt wird. Die Originalteile bleiben unter imported verfügbar, deshalb muss die Quelle bei einer gescheiterten Operation nicht rekonstruiert werden.

joined.subtract(hole) entfernt das Loch aus der vereinigten Silhouette. Das Vertauschen der Operanden stellt eine andere Frage und kann ein leeres oder unerwartetes Ergebnis liefern. Der standardmäßige Subtraktionsmodus von Paper.js behandelt die Operanden als Flächen. Seine Option trace betrifft boolesche Geometrie; sie hat nichts mit dem Nachzeichnen eines PNGs zu Vektoren zu tun.

Prüfe das Ergebnis als Geometrie und als Datei

In diesem Beispiel gab die Vereinigung einen Path zurück; die Subtraktion einen CompoundPath mit zwei Konturen. Die endgültigen Grenzen waren x = 40, y = 40, Breite = 220 und Höhe = 140 in SVG-Einheiten. Die Grafik liegt in einem Export-Viewport von 300 × 220; Grenzen und Dokumentgröße sind deshalb bewusst unterschiedlich.

Wir prüften die Mitte der Öffnung bei (105, 105): Sie lag innerhalb der vereinigten Silhouette und außerhalb des subtrahierten Ergebnisses. Ein Punkt im massiven Körper bei (60, 60) blieb innen. Das erneute Importieren des exportierten SVGs erhielt die Grenzen und schloss die Lochmitte erneut aus. Das sind Ergebnisse für dieses einfache Testbeispiel, keine Garantie für jede importierte Datei.

Die Export-API kann eine SVG-Zeichenfolge zurückgeben und ausdrückliche Grenzen annehmen. Kopiere das unter dem Ergebnis angezeigte Markup in result.svg und öffne diese Datei separat. Unser gespeicherter Export enthielt ein Pfadelement mit zwei geschlossenen Unterpfaden; auch beim direkten Öffnen im Browser wurde er korrekt gerendert.

Prüfe bei deiner eigenen Grafik:

• Silhouette und jede Öffnung gegen das Original;
• ob versehentlich ein Hintergrund oder eine ausgeblendete Hilfsform aufgenommen wurde;
• die gewünschte Füllung, weil eine vereinigte Form keine zwei unabhängig bearbeitbaren einfarbigen Füllungen erhalten kann;
• den exportierten Viewport, besonders wenn die Grafik den Dokumentrand erreicht;
• die Datei in der Anwendung, die sie tatsächlich verwenden wird.

Eine weiße Überlagerung kann auf weißem Papier wie eine Öffnung aussehen. Platziere das Ergebnis über einem kontrastierenden Hintergrund, um die Transparenz zu prüfen. Der Leitfaden zu gefüllten SVG-Löchern erklärt die verwandten Probleme mit zusammengesetzten Pfaden und Füllregeln.

Wenn die Operation die falsche Form liefert

Eine Methode fehlt. Prüfe die Klasse des ausgewählten Elements. Finde den gewünschten Pfad innerhalb einer Gruppe oder konvertiere unterstützte Grundformen beim Import. Löse dies nicht durch das Kombinieren aller direkt und indirekt untergeordneten Elemente: Auch zusammengesetzte Pfade enthalten untergeordnete Elemente, und deren Lochbeziehungen sind wichtig.

Das Ergebnis sieht unverändert aus. Stelle sicher, dass du das zurückgegebene Element anzeigst. Sichtbar gebliebene Originale können eine erfolgreiche Subtraktion verdecken. Im Beispiel kommt nur das Endergebnis in die aktive Ebene.

Eine Kontur verschwindet oder verändert ihre Bedeutung. Dieses Beispiel arbeitet mit geschlossenen gefüllten Bereichen. Eine sichtbare dicke Linie ist nicht automatisch dieselbe Form wie die Fläche, die ihre Kontur überstreicht. Wenn du diesen Umriss als gefüllten Operanden benötigst, bereite im Vektoreditor eine in Fläche umgewandelte Kopie vor und prüfe sie vor dem Import. Behalte das bearbeitbare Original.

Detailreiche Grafik verhält sich schlecht. Isoliere zwei Operanden und prüfe ihre Konturen, bevor du eine Operationsfolge auf eine ganze Illustration anwendest. Duplikate, Selbstüberschneidungen und winzige Fragmente benötigen fallbezogene Prüfungen. Dieses kleine Beispiel misst weder Leistung noch umfassende SVG-Kompatibilität. Für eine einmalige Reparatur sind Auswahl- und Knotenwerkzeuge eines Vektoreditors möglicherweise einfacher als eine selbst geschriebene Geometriepipeline.

Wenn deine Quelle noch ein PNG oder JPG ist

Wenn das bearbeitbare Original fehlt, kann PerfectVectors Bild-zu-Vektor-Workflow aus geeigneter Rastergrafik ein SVG vorbereiten. Sieh dir die Vorschau an, prüfe Konturen und Negativräume und lade einen Kandidaten zum Testen in Paper.js herunter.

Vektorisierung identifiziert nicht, welche Teile dein Programm vereinigen oder subtrahieren soll. Du musst weiterhin die importierte Struktur prüfen, die richtigen Operanden auswählen und das Exportergebnis kontrollieren. Verwende den ursprünglichen Vektor, wenn du ihn hast; zeichne ein einfaches Quadrat oder einen Kreis direkt, statt die Form nachzuzeichnen. Der Überblick zur Bildvektorisierung behandelt diese Quelldateientscheidung.

FAQ

Kann ich unite auf einer importierten SVG-Gruppe aufrufen? Wähle zuerst die gewünschten Path- oder CompoundPath-Operanden innerhalb der Gruppe aus. Eine Gruppe beschreibt Organisation; das Kombinieren aller untergeordneten Elemente kann Hintergründe einschließen oder gewünschte Trennungen zerstören.

Entfernt subtract die ursprünglichen Pfade? Es gibt ein neues Pfadobjekt zurück. Dieses Beispiel verwendet insert: false für Import und Boolean-Ergebnisse und fügt dann nur das Endergebnis ein. Die Quelloperanden bleiben unter dem importierten Container verfügbar.

Warum sieht ein Loch weiterhin weiß aus? Prüfe es gegen einen farbigen Hintergrund. Ein weißes gefülltes Objekt verdeckt, was dahinter liegt; eine subtrahierte Öffnung zeigt diesen Hintergrund. Öffne die exportierte Datei erneut, um zu bestätigen, dass die Beziehung erhalten bleibt.

Übernimmt Vektorisierung die boolesche Bereinigung für mich? Nein. Sie kann Pfadgrafiken aus einer geeigneten Rasterquelle rekonstruieren, aber deine Anwendung muss weiterhin wählen, welche Geometrie verbunden und welcher Bereich entfernt wird und wie das Ergebnis validiert wird.

Quellen

1. Paper.js — Project-Referenz — Dokumentiert SVG-Import, Export, Grenzen und Projektinhalte.
2. Paper.js — Path-Referenz — Definiert Vereinigung und Subtraktion, zurückgegebene Pfadobjekte und Boolean-Optionen.
3. Paper.js — CompoundPath-Referenz — Beschreibt zusammengesetzte Geometrie und deren Teilpfade.

Wenn ein Rasterbild deine einzige Quelle ist, bereite einen SVG-Kandidaten vor, prüfe seine Teile und teste dann die kleinste nützliche boolesche Operation, bevor du den Rest der Grafik verarbeitest.