Gambar SVG p5.js: Muat, Skalakan, dan Simpan Sumber

Untuk memuat gambar SVG di p5.js 2.3.4, gunakan await loadImage('emblem.svg') di dalam async function setup(), lalu gambar citra yang dikembalikan dengan image(). Sajikan halaman dan SVG melalui HTTP. Simpan berkas SVG sebagai master yang bisa diedit: jalur pemuatan gambar ini melukis p5.Image ke Canvas dan tidak memberikan path SVG yang bisa diedit kepada sketsa. Referensi loadImage saat ini menjelaskan pola pemuatan berbasis Promise.

Pemuatan yang berhasil hanya menjawab pertanyaan pertama. Periksa apakah bukaan tetap transparan, apakah gambar meregang, dan apakah dimensi piksel yang dimuat sesuai untuk ukuran tampilan terbesar. Contoh di bawah memakai satu wajik membulat asli dengan lubang dan menggambarnya pada 48, 120, serta 240 piksel.

Pilih tampilan gambar atau geometri sumber

Panduan ini mengunci p5.js 2.3.4 dan renderer P2D. Panduan memakai API asinkron saat ini alih-alih menyalin kode awal preload() dari tutorial 1.x. createCanvas membuat Canvas sketsa dan mendukung pilihan renderer eksplisit.

Dalam versi ini, implementasi pemuatan gambar menggambar citra peramban yang dimuat ke Canvas pendukung sebuah p5.Image. Ini menjelaskan mengapa mempertahankan ekstensi .svg dan memperbesar tampilan Canvas tidak cukup untuk mempertahankan pengeditan berbasis path di dalam sketsa.

Simpan SVG asli dengan bukaan sungguhan

Simpan berkas ini sebagai emblem.svg. Berkas memiliki satu path, tanpa bitmap tertanam, ukuran yang dinyatakan 120 × 120, dan viewBox yang sesuai. Wajik membulat luar dan wajik dalam merupakan dua kontur dalam path tersebut. fill-rule="evenodd" membiarkan tengahnya tidak dicat; referensi fill-rule MDN menjelaskan cara aturan ini menentukan area yang diisi.

<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>

Bukaan itu bukan wajik putih yang diletakkan di atas bentuk koral. Perbedaan ini penting saat latar sketsa berubah. Jika berkas yang ada memuat elemen <image>, periksa dengan daftar periksa raster tertanam sebelum menganggap seluruh gambarnya terdiri dari path yang bisa diedit.

Muat dengan setup asinkron

Simpan halaman lengkap ini sebagai example.html di samping emblem.svg, lalu sajikan folder itu dengan server HTTP lokal. Misalnya, jalankan python3 -m http.server 8000 di folder tersebut dan buka http://localhost:8000/example.html di peramban.

<!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 status muncul setelah pemuatan dan melaporkan versi p5, dimensi gambar yang dimuat, serta dua sampel piksel sumber. Sampel tengah memeriksa transparansi; sampel koral memeriksa bagian cincin yang buram. Panggilan menggambar berbagi satu gambar yang dimuat. Panggilan itu tidak memuat ulang atau mengubah SVG di antara ukuran tampilan.

Referensi image membedakan konten sumber dari lebar dan tinggi tujuan. Di sini setiap tinggi tujuan dihitung dari art.height / art.width, sehingga gambar pengganti yang tidak persegi juga mempertahankan proporsinya. Pertahankan kedua dimensi dalam perhitungan saat Anda mengubah lebar tampilan.

Contoh menetapkan pixelDensity(1) untuk membuat perbandingan Canvas-nya eksplisit. Catat kepadatan yang dipakai sketsa sebenarnya; nilai bawaan bisa mengikuti layar. Menaikkan kepadatan Canvas tidak merekonstruksi path yang sudah menjadi gambar yang dimuat.

Hasil pengujian peramban

Kami menjalankan berkas asli dan kode awal ini di Chrome dengan p5.js 2.3.4, P2D, dan kepadatan piksel 1. Gambar yang dimuat berukuran 120 × 120. Sampel tengahnya adalah [0, 0, 0, 0], sedangkan sampel koral di bagian dalam adalah [235, 112, 90, 255]. Latar sketsa pucat tetap terlihat melalui bukaan pada ketiga ukuran tujuan.

Pengamatan ini menggambarkan berkas yang kami buat, peramban, versi, dan renderer tersebut. Ini bukan hasil kompatibilitas untuk setiap SVG yang diekspor, filter, font, atau runtime pihak ketiga.

Sumber yang bisa diedit dan tampilan Canvas

Data path sumber tetap sama sepanjang pengujian. Menggambar citra pada 2× memengaruhi tampilannya, bukan atribut d di emblem.svg. Simpan master itu bersama proyek agar Anda dapat menyiapkan gambar penyerahan berbeda nantinya.

Perbaiki gejala yang Anda lihat

Gambar tidak pernah muncul

Pastikan URL SVG dapat diakses dari halaman yang disajikan dan loadImage() sudah selesai sebelum image() dijalankan. try/catch dalam kode awal menempatkan kegagalan pemuatan di blok status. Gambar jarak jauh juga bisa gagal karena pembatasan keamanan peramban, seperti dicatat dokumentasi loadImage. Mulailah dengan berkas dari origin yang sama yang Anda kendalikan untuk memisahkan masalah pemuatan dari masalah gambar.

Buka SVG itu sendiri di peramban. Jika tampilannya juga salah di sana, perbaiki sumber terlebih dahulu. PNG yang diganti nama tidak menjadi dokumen SVG, dan pembungkus SVG di sekitar bitmap tidak menciptakan kontur yang tidak ada.

Gambar terlihat meregang

Bandingkan rasio tujuan dengan art.width / art.height. Misalnya, menggambar citra persegi ke tujuan 240 × 120 dengan sengaja menjadikannya dua kali lebih lebar relatif terhadap tingginya. Gunakan perhitungan rasio dalam kode awal jika peregangan tidak diinginkan. Jika sumber itu sendiri memiliki ruang kosong berlebihan, periksa artboard dan viewBox sebelum memperbesar tampilan untuk mengimbanginya.

Tepi yang diperbesar terlihat lembut

Periksa dimensi gambar yang dimuat, bukan hanya ukuran Canvas. Dalam pengujian kami, gambar 120 × 120 digambar ke tujuan 240 × 240. Mengubah argumen tujuan itu tidak memproses ulang kurva SVG melalui pemuatan gambar baru.

Siapkan SVG untuk penyerahan dengan dimensi eksplisit yang sesuai penggunaan, muat lagi, dan periksa art.width serta art.height hasilnya sebelum menerimanya. Jaga sistem koordinat dan kontur sumber tetap utuh. Lalu bandingkan ukuran terkecil dan terbesar di layar: lebih banyak piksel yang dimuat tidak bisa membuat bukaan kecil terbaca saat tampilan akhir terlalu kecil.

Jika sketsa membutuhkan operasi geometri alih-alih lukisan gambar, rencanakan secara terpisah. Panduan Canvas Path2D membahas bekerja dengan data path, sedangkan panduan SVG PixiJS membandingkan jalur geometri dan tekstur engine tersebut. API-nya tidak dapat dipertukarkan dengan loadImage() p5.

Bagian tengah putih alih-alih transparan

Periksa SVG asli untuk latar yang dicat atau bentuk dalam putih. Dalam sumber ini, kontur evenodd meninggalkan lubang dan alfa tengah yang dimuat bernilai nol. Ulangi pemeriksaan di atas latar sketsa kontras dengan berkas Anda; halaman pratinjau putih bisa menyembunyikan perbedaannya.

Pisahkan ekspor Canvas dari master SVG

Referensi saveCanvas standar mencantumkan keluaran gambar PNG, WebP, dan JPG. Menyimpan Canvas yang sudah dilukis melalui API itu tidak memulihkan path SVG asli. Simpan emblem.svg secara terpisah saat Anda membutuhkan pengeditan kontur di masa depan atau berkas penyerahan berbasis path. Tangkapan layar Canvas yang tampak mulus tidak membuktikan adanya alur ekspor SVG yang bisa diedit.

PerfectVector sesuai digunakan di tahap awal saat ilustrasi hanya ada sebagai PNG atau JPG datar dan Anda membutuhkan kontur sumber untuk diedit. Ubah gambar menjadi SVG, periksa kontur dan ruang negatifnya dalam editor SVG, lalu ulangi pemuatan p5 serta pemeriksaan ukuran yang sebenarnya. Gunakan SVG bersih yang sudah ada secara langsung. Penjiplakan tidak mengubah API gambar p5 atau menjadikan keluaran Canvas-nya dokumen path SVG. Panduan vektorisasi yang lebih luas menjelaskan tahap persiapan sumber tersebut.

Simpan master, catat versi p5 dan dimensi yang dimuat, serta terima aset hanya setelah bukaan dan tepinya sesuai pada ukuran yang dipakai sketsa.

Pertanyaan umum

Bisakah p5.js memuat SVG dengan loadImage? Bisa. Contoh p5.js 2.3.4 P2D ini memuat SVG asli dengan await loadImage di dalam setup asinkron. Uji tampilan dan dimensi yang dimuat dari berkas Anda sendiri alih-alih menganggap satu pemuatan berhasil sebagai kompatibilitas SVG lengkap.

Apakah gambar SVG p5 yang dimuat tetap bisa diedit sebagai path? Jalur pemuatan gambar mengembalikan p5.Image dan melukisnya ke Canvas. Simpan SVG asli secara terpisah untuk pengeditan path sumber. Tampilan gambar Canvas tidak menyediakan DOM SVG yang bisa diedit untuk gambar yang dimuat.

Mengapa SVG p5 saya tampak buram saat diperbesar? Periksa dimensi gambar yang dimuat terhadap dimensi tujuan. Gambar kami yang dimuat pada 120 × 120 terlihat lebih lembut pada 240 × 240. Siapkan sumber penyerahan berukuran sesuai, muat ulang, dan periksa hasil sebenarnya.

Apakah saveCanvas mengekspor SVG asli? API saveCanvas standar mendokumentasikan keluaran PNG, WebP, dan JPG. Pertahankan master SVG asli atau verifikasi alur rendering serta ekspor SVG terpisah untuk keluaran berbasis path.

Sumber

1. p5.js loadImage — Menjelaskan pemuatan gambar berbasis Promise dan pembatasan peramban.
2. Rilis p5.js 2.3.4 — Mengidentifikasi versi terkunci dan skrip CDN resmi.
3. p5.js createCanvas — Menjelaskan pembuatan Canvas dan pemilihan renderer.
4. Sumber pemuatan gambar p5.js 2.3.4 — Menunjukkan gambar yang dimuat digambar ke Canvas pendukung p5.Image.
5. MDN fill-rule — Menjelaskan cara evenodd menentukan area yang diisi dari path majemuk.
6. p5.js image — Mendefinisikan penempatan gambar dan ukuran tujuan.
7. p5.js pixelDensity — Menjelaskan kepadatan piksel sketsa dan nilai bawaan yang bergantung pada layar.
8. p5.js saveCanvas — Mencantumkan format ekspor gambar Canvas standar.