p5.js SVG Görselleri: Yükleyin, Ölçekleyin, Kaynağı Koruyun

p5.js 2.3.4'te SVG görsel yüklemek için async function setup() içinde await loadImage('emblem.svg') kullanın, ardından dönen görseli image() ile çizin. Sayfayı ve SVG'yi HTTP üzerinden sunun. SVG dosyasını düzenlenebilir ana dosya olarak saklayın: bu görsel yükleme yolu Canvas üzerine bir p5.Image boyar ve eskize düzenlenebilir SVG yolları vermez. Güncel loadImage başvurusu, Promise tabanlı yükleme desenini belgeler.

Başarılı yükleme yalnızca ilk soruyu yanıtlar. Açıklığın saydam kalıp kalmadığını, görselin gerilip gerilmediğini ve yüklenen piksel boyutlarının en büyük görüntüleme boyutuna uygun olup olmadığını kontrol edin. Aşağıdaki örnek, delikli özgün bir yuvarlatılmış eşkenar dörtgen kullanır ve onu 48, 120 ve 240 pikselde çizer.

Görsel gösterimi veya kaynak geometrisini seçin

Bu kılavuz p5.js 2.3.4 ve P2D işleyicisini sabitler. 1.x öğreticisinden preload() başlangıcı kopyalamak yerine güncel asenkron API'yi kullanır. createCanvas, eskizin Canvas'ını oluşturur ve açık işleyici seçimini destekler.

Bu sürümde görsel yükleme uygulaması, yüklenen tarayıcı görselini bir p5.Image nesnesinin arkasındaki Canvas'a çizer. Bu, .svg uzantısını korumanın ve Canvas gösterimini büyütmenin eskiz içinde yol tabanlı düzenlemeyi korumaya neden yetmediğini açıklar.

Gerçek açıklığı olan özgün bir SVG kaydedin

Bu dosyayı emblem.svg olarak kaydedin. Tek yol içerir, gömülü bitmap yoktur, belirtilen boyutu 120 × 120'dir ve eşleşen viewBox kullanır. Yuvarlatılmış dış eşkenar dörtgen ve iç eşkenar dörtgen, bu yol içindeki iki konturdur. fill-rule="evenodd" merkezi boyanmamış bırakır; MDN fill-rule başvurusu, bu kuralın dolgulu alanı nasıl belirlediğini açıklar.

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

Açıklık, mercan rengi şeklin üzerine yerleştirilmiş beyaz bir eşkenar dörtgen değildir. Eskizin arka planı değiştiğinde bu ayrım önem kazanır. Mevcut dosya <image> öğesi içeriyorsa tüm çizimin düzenlenebilir yollardan oluştuğunu varsaymadan önce gömülü raster kontrol listesiyle inceleyin.

Asenkron setup ile yükleyin

Bu eksiksiz sayfayı emblem.svg dosyasının yanına example.html olarak kaydedin, ardından klasörü yerel HTTP sunucusuyla sunun. Örneğin klasörde python3 -m http.server 8000 çalıştırın ve tarayıcınızda http://localhost:8000/example.html adresini açın.

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

Durum bloğu yüklemeden sonra görünür ve p5 sürümünü, yüklenen görsel boyutlarını ve iki kaynak piksel örneğini bildirir. Merkez örneği saydamlığı; mercan rengi örnek halkanın opak kısmını kontrol eder. Çizim çağrıları yüklenmiş tek görseli paylaşır. Görüntüleme boyutları arasında SVG'yi yeniden yüklemez veya değiştirmezler.

image başvurusu, kaynak içeriği hedef genişlik ve yükseklikten ayırır. Burada her hedef yükseklik art.height / art.width oranından hesaplanır; dolayısıyla kare olmayan bir yedek görsel de oranlarını korur. Görüntüleme genişliğini değiştirirken hesaplamada her iki boyutu da tutun.

Örnek, Canvas karşılaştırmasını açık kılmak için pixelDensity(1) ayarlar. Gerçek eskizinizin kullandığı yoğunluğu kaydedin; varsayılan değer ekranı izleyebilir. Canvas yoğunluğunu artırmak, yüklenen görsele dönüşmüş yolları yeniden oluşturmaz.

Tarayıcı testi ne gösterdi?

Özgün dosyayı ve bu başlangıcı Chrome'da p5.js 2.3.4, P2D ve 1 piksel yoğunluğuyla çalıştırdık. Yüklenen görsel 120 × 120 idi. Merkez örneği [0, 0, 0, 0], içteki mercan rengi örnek ise [235, 112, 90, 255] idi. Açık renkli eskiz arka planı üç hedef boyutta da açıklıktan görünür kaldı.

Bu gözlemler bu özgün dosyayı, tarayıcıyı, sürümü ve işleyiciyi tanımlar. Dışa aktarılmış her SVG, filtre, yazı tipi veya üçüncü taraf çalışma ortamı için uyumluluk sonucu değildir.

Düzenlenebilir kaynak ve Canvas gösterimi

Kaynağın yol verileri test boyunca değişmedi. Görseli 2× boyutta çizmek, emblem.svg içindeki d özniteliğini değil gösterimini etkiledi. Daha sonra farklı bir teslim görseli hazırlayabilmek için bu ana dosyayı projenizle saklayın.

Gördüğünüz belirtiyi düzeltin

Görsel hiç görünmüyor

SVG URL'sinin sunulan sayfadan çözümlendiğini ve image() çalışmadan önce loadImage() işleminin tamamlandığını kontrol edin. Başlangıçtaki try/catch, yükleme hatasını durum bloğuna koyar. loadImage belgelerinin belirttiği gibi uzak görsel tarayıcı güvenlik kısıtlamaları nedeniyle de başarısız olabilir. Yükleme sorununu çizim sorunundan ayırmak için kontrolünüzdeki aynı kökenli bir dosyayla başlayın.

SVG'yi tarayıcıda tek başına açın. Orada da görünümü yanlışsa önce kaynağı düzeltin. Yeniden adlandırılmış PNG, SVG belgesi olmaz ve bitmap çevresindeki SVG sarmalayıcı eksik konturları oluşturmaz.

Görsel gerilmiş görünüyor

Hedef oranını art.width / art.height ile karşılaştırın. Örneğin kare görseli 240 × 120 hedefe çizmek, onu yüksekliğine göre bilerek iki kat geniş yapar. Germe amaçlanmıyorsa başlangıçtaki oran hesabını kullanın. Kaynağın kendisinde aşırı boş alan varsa telafi için gösterimi büyütmeden önce çalışma alanını ve viewBox değerini inceleyin.

Büyütülen kenarlar yumuşak görünüyor

Yalnızca Canvas boyutunu değil, yüklenen görsel boyutlarını kontrol edin. Testimizde 120 × 120 görsel 240 × 240 hedefe çizildi. Bu hedef bağımsız değişkenlerini değiştirmek, SVG eğrilerini yeni görsel yüklemesinden tekrar geçirmez.

Amaçlanan kullanıma uygun açık boyutlarla teslim SVG'si hazırlayın, yeniden yükleyin ve kabul etmeden önce oluşan art.width ile art.height değerlerini inceleyin. Koordinat sistemini ve kaynak konturlarını koruyun. Ardından ekrandaki en küçük ve en büyük boyutları karşılaştırın: son gösterim çok küçükse daha çok yüklenen piksel küçük açıklığı okunabilir hâle getiremez.

Eskiziniz görsel boyama yerine geometri işlemleri gerektiriyorsa bunu ayrı planlayın. Canvas Path2D kılavuzu, yol verileriyle çalışmayı ele alırken PixiJS SVG kılavuzu o motorun geometri ve doku yollarını karşılaştırır. API'leri p5'in loadImage() işleviyle birbirinin yerine kullanılamaz.

Merkez saydam yerine beyaz

Özgün SVG'de boyalı arka plan veya beyaz iç şekil olup olmadığını kontrol edin. Bu kaynakta evenodd konturu delik bırakır ve yüklenen merkez alfası sıfırdı. Kendi dosyanızla kontrast bir eskiz arka planında kontrolü tekrarlayın; beyaz önizleme sayfası farkı gizleyebilir.

Canvas çıktısını SVG ana dosyasından ayrı tutun

Standart saveCanvas başvurusu, PNG, WebP ve JPG görsel çıktılarını listeler. Boyanmış Canvas'ı bu API ile kaydetmek özgün SVG yollarını geri getirmez. Gelecekte kontur düzenlemesi veya yol tabanlı teslim dosyası gerektiğinde emblem.svg dosyasını ayrı saklayın. Pürüzsüz görünen Canvas ekran görüntüsü, düzenlenebilir SVG dışa aktarma iş akışını kanıtlayamaz.

İllüstrasyonunuz yalnızca düz PNG veya JPG olarak mevcutsa ve düzenlemek için kaynak konturlar gerekiyorsa PerfectVector önceki aşamada uygundur. Görseli SVG'ye dönüştürün, dış hattını ve negatif alanını SVG düzenleyicide inceleyin, ardından gerçek p5 yükleme ve boyut kontrollerini tekrarlayın. Mevcut temiz SVG'yi doğrudan kullanın. İzleme, p5'in görsel API'sini değiştirmez veya Canvas çıktısını SVG yol belgesine dönüştürmez. Daha geniş vektörleştirme kılavuzu bu kaynak hazırlama adımını açıklar.

Ana dosyayı koruyun, p5 sürümünü ve yüklenen boyutları kaydedin ve varlığı yalnızca açıklığıyla kenarları eskizinizin kullandığı boyutlarda işe yaradığında kabul edin.

Sık sorulan sorular

p5.js loadImage ile SVG yükleyebilir mi? Evet. Bu p5.js 2.3.4 P2D örneği, asenkron setup içinde await loadImage ile özgün SVG yükler. Tek başarılı yüklemeyi tam SVG uyumluluğu saymak yerine kendi dosyanızın görünümünü ve yüklenen boyutlarını sınayın.

Yüklenmiş p5 SVG görseli yol olarak düzenlenebilir kalır mı? Görsel yükleme yolu p5.Image döndürür ve onu Canvas'a boyar. Kaynak yol düzenlemesi için özgün SVG'yi ayrı koruyun. Canvas görsel gösterimi, yüklenen çizim için düzenlenebilir SVG DOM'u sağlamaz.

p5 SVG'm büyütülünce neden bulanık görünüyor? Yüklenen görsel boyutlarını hedef boyutlarla karşılaştırın. Yüklenen 120 × 120 görselimiz 240 × 240'ta daha yumuşak görünüyordu. Uygun boyutlu teslim kaynağı hazırlayın, yeniden yükleyin ve gerçek sonucu inceleyin.

saveCanvas özgün SVG'yi dışa aktarır mı? Standart saveCanvas API'si PNG, WebP ve JPG çıktısını belgeler. Yol tabanlı çıktı için özgün SVG ana dosyasını koruyun veya ayrı bir SVG işleme ve dışa aktarma iş akışını doğrulayın.

Kaynaklar

1. p5.js loadImage — Promise tabanlı görsel yüklemeyi ve tarayıcı kısıtlamalarını belgeler.
2. p5.js 2.3.4 sürümü — Sabitlenmiş sürümü ve resmî CDN betiğini belirtir.
3. p5.js createCanvas — Canvas oluşturmayı ve işleyici seçimini belgeler.
4. p5.js 2.3.4 görsel yükleme kaynağı — Yüklenen görselin p5.Image arkasındaki Canvas'a çizilmesini gösterir.
5. MDN fill-rule — evenodd kuralının bileşik yolun dolgulu alanını nasıl belirlediğini açıklar.
6. p5.js image — Görsel yerleşimini ve hedef boyutlandırmayı tanımlar.
7. p5.js pixelDensity — Eskiz piksel yoğunluğunu ve ekrana bağlı varsayılanını belgeler.
8. p5.js saveCanvas — Standart Canvas görsel dışa aktarma biçimlerini listeler.