Boolean SVG Paper.js: Potong dan Gabungkan Artwork Impor

Impor SVG, temukan objek path yang dimaksudkan, lalu panggil unite() untuk menggabungkan wilayah berisian atau subtract() untuk menghapus satu wilayah dari wilayah lain. Pertahankan operand sampai Anda memeriksa hasilnya, dan buka kembali SVG hasil ekspor sebelum menggunakannya di tempat lain.

Keputusan penting terjadi sebelum operasi Boolean: bentuk mana yang termasuk bersama? Grup impor dapat berisi persegi panjang latar belakang, clipping path, tulisan, dan bagian dekoratif. Menggabungkan setiap anak dapat menghapus pemisahan yang ingin Anda pertahankan. Panduan ini menggunakan tiga path tertutup bernama agar Anda dapat melihat tepatnya apa yang berubah.

Mulai dengan geometri berisian yang dapat Anda identifikasi

Importer SVG Paper.js menerima markup SVG, elemen SVG, atau URL. Jalur tersebut membutuhkan perlakuan pemuatan berbeda: contoh ini mengimpor string inline; file jarak jauh sebaiknya diproses dalam callback impor setelah dimuat.

Untuk tugas ini, operand harus berupa objek Path atau CompoundPath. Grup merupakan kontainer, dan gambar raster tidak menyediakan batas yang diperlukan untuk Boolean path. Jika file hanya berperilaku sebagai satu gambar, periksa dahulu mengapa SVG tidak dapat di-ungroup.

Gunakan ID untuk bagian yang Anda kendalikan. Jangan menganggap children[0] berarti “logo” pada ekspor sembarang. Periksa artwork yang tidak diketahui dan tetapkan bagian-bagiannya secara sengaja. Pertahankan compound path yang sudah ada tetap utuh ketika subpath-nya sudah mendefinisikan lubang yang dimaksudkan.

Jalankan impor, penggabungan, dan pengurangan kecil

Kami menguji kode berikut dengan Paper.js 0.12.18 di browser. Artwork adalah SVG orisinal buatan tangan: badan persegi, tab yang tumpang tindih, dan persegi putih yang menandai bukaan yang dimaksudkan. Ini bukan sampel konversi PerfectVector.

Dalam folder kosong, instal pustaka dengan versi yang dikunci:

npm install --save-exact paper@0.12.18

Simpan ini sebagai 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>

Simpan ini sebagai example.js, lalu buka HTML di 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;

Impor tetap di luar scene dengan insert: false. expandShapes: true meminta importer mengubah bentuk primitif yang didukung menjadi path; fixture kami sudah berisi elemen path. Pemeriksaan class eksplisit tetap penting karena ID impor dapat mengidentifikasi kontainer atau jenis item lain.

API Boolean mengembalikan item path baru. Di sini, hasil dijaga di luar scene sampai bentuk potongan akhir ditambahkan. Bagian asli tetap tersedia di bawah imported, sehingga operasi yang gagal tidak mengharuskan rekonstruksi sumber.

joined.subtract(hole) menghapus area lubang dari siluet tergabung. Membalik operand mengajukan pertanyaan berbeda dan dapat memberikan hasil kosong atau tidak terduga. Mode pengurangan default Paper.js memperlakukan operand sebagai area. Opsi trace-nya berkaitan dengan geometri Boolean; opsi itu tidak terkait dengan penelusuran PNG menjadi vektor.

Periksa hasil sebagai geometri dan sebagai file

Dalam contoh ini, penggabungan mengembalikan Path; pengurangan mengembalikan CompoundPath dengan dua kontur. Batas akhir adalah x = 40, y = 40, lebar = 220, tinggi = 140 dalam unit SVG. Artwork berada di dalam viewport ekspor 300 × 220, sehingga batas dan ukuran dokumen sengaja berbeda.

Kami memeriksa pusat bukaan pada (105, 105): titik itu berada di dalam siluet tergabung dan di luar hasil pengurangan. Titik dalam badan solid pada (60, 60) tetap di dalam. Mengimpor ulang SVG hasil ekspor mempertahankan batas dan kembali mengecualikan pusat lubang. Ini adalah hasil untuk fixture sederhana ini, bukan jaminan untuk setiap file impor.

API ekspor dapat mengembalikan string SVG dan menerima batas eksplisit. Salin markup yang ditampilkan di bawah hasil ke result.svg, lalu buka file tersebut secara mandiri. Ekspor tersimpan kami berisi satu elemen path dengan dua subpath tertutup; file juga dirender dengan benar ketika dibuka langsung di browser.

Untuk artwork Anda sendiri, periksa:

• siluet dan setiap bukaan terhadap aslinya;
• apakah latar belakang atau bentuk bantuan tersembunyi tidak sengaja disertakan;
• isian yang dimaksudkan, karena satu bentuk tergabung tidak dapat mempertahankan dua isian datar yang dapat diedit secara mandiri;
• viewport hasil ekspor, terutama ketika artwork mencapai tepi dokumen;
• file dalam aplikasi yang benar-benar akan menggunakannya.

Lapisan putih dapat terlihat seperti bukaan pada kertas putih. Letakkan hasil di atas latar belakang kontras untuk memeriksa transparansi. Panduan lubang SVG yang terisi menjelaskan masalah compound path dan aturan isian terkait.

Ketika operasi memberikan bentuk yang salah

Metode tidak tersedia. Periksa class item yang dipilih. Temukan path yang dimaksudkan di dalam grup, atau konversikan bentuk primitif yang didukung selama impor. Jangan menyelesaikan ini dengan menggabungkan setiap turunan: compound path juga berisi anak, dan hubungan lubangnya penting.

Hasil tampak tidak berubah. Pastikan Anda menampilkan item yang dikembalikan. Membiarkan sumber asli terlihat dapat menutupi pengurangan yang berhasil. Dalam contoh, hanya hasil akhir yang masuk ke lapisan aktif.

Stroke menghilang atau berubah makna. Contoh ini beroperasi pada wilayah berisian tertutup. Garis tebal yang terlihat tidak otomatis merupakan bentuk yang sama dengan area yang disapu stroke-nya. Jika Anda membutuhkan outline tersebut sebagai operand berisian, siapkan salinan yang diubah menjadi outline di editor vektor dan periksa sebelum impor. Pertahankan sumber asli yang dapat diedit.

Artwork terperinci berperilaku buruk. Isolasi dua operand dan periksa konturnya sebelum menerapkan rangkaian operasi ke seluruh ilustrasi. Duplikat, perpotongan diri, dan fragmen kecil membutuhkan pemeriksaan per kasus. Contoh kecil ini tidak mengukur performa maupun kompatibilitas SVG luas. Untuk perbaikan sekali saja, alat seleksi dan node dalam editor vektor mungkin lebih mudah daripada menulis pipeline geometri.

Ketika sumber Anda masih berupa PNG atau JPG

Jika sumber asli yang dapat diedit hilang, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan SVG dari artwork raster yang sesuai. Lihat pratinjau hasil, periksa kontur dan ruang negatif, dan unduh kandidat untuk diuji di Paper.js.

Vektorisasi tidak mengidentifikasi bagian mana yang harus digabungkan atau dikurangi program Anda. Anda tetap perlu memeriksa struktur impor, memilih operand yang tepat, dan memeriksa hasil ekspor. Gunakan vektor asli ketika Anda memilikinya; gambar persegi atau lingkaran sederhana secara langsung alih-alih menelusurinya. Ikhtisar vektorisasi gambar membahas keputusan file sumber tersebut.

FAQ

Dapatkah saya memanggil unite pada grup SVG impor? Pilih operand Path atau CompoundPath yang dimaksudkan di dalam grup terlebih dahulu. Grup menjelaskan organisasi, dan menggabungkan setiap anak dapat menyertakan latar belakang atau merusak pemisahan yang dimaksudkan.

Apakah subtract menghapus path asli? Metode ini mengembalikan item path baru. Contoh ini menggunakan insert: false untuk impor dan hasil Boolean, lalu menyisipkan hanya hasil akhir. Operand sumber tetap tersedia di bawah kontainer impor.

Mengapa lubang masih terlihat putih? Periksa di atas latar belakang berwarna. Objek berisian putih menutupi apa yang berada di belakangnya; bukaan hasil pengurangan menampilkan latar belakang itu. Buka kembali file hasil ekspor untuk memastikan hubungan tersebut tetap ada.

Apakah vektorisasi akan melakukan pembersihan Boolean untuk saya? Tidak. Proses ini dapat memulihkan artwork path dari sumber raster yang sesuai, tetapi aplikasi Anda tetap harus memilih geometri yang digabungkan, area yang dihapus, dan cara memvalidasi hasilnya.

Sources

1. Paper.js — Referensi Project — Mendokumentasikan impor SVG, ekspor, batas, dan konten proyek.
2. Paper.js — Referensi Path — Mendefinisikan penggabungan dan pengurangan, item path yang dikembalikan, dan opsi Boolean.
3. Paper.js — Referensi CompoundPath — Menjelaskan geometri gabungan dan path penyusunnya.

Jika gambar raster adalah satu-satunya sumber Anda, siapkan kandidat SVG, periksa bagian-bagiannya, lalu uji operasi Boolean terkecil yang berguna sebelum memproses sisa artwork.