Konva SVG içe aktarımı: Görsel mi, düzenlenebilir yol mu?

Tam bir SVG'yi tuvale yerleştirmek istediğinizde Konva.Image kullanın. Uygulamanızın tek tek yol şekillerini yeniden renklendirmesi veya değiştirmesi gerekiyorsa ayrı Konva.Path düğümleri kullanın. Bir SVG görseli yüklemek, içindeki her öğe için kendiliğinden bir Konva nesnesi oluşturmaz. Konva'nın SVG rehberi bunları farklı yaklaşımlar olarak açıklar.

Bir logo seçici veya kompozisyon aracı için tek bir görsel yeterli olabilir. Bölgelerinin ayrı kontrollere ihtiyaç duyduğu iki renkli bir rozet içinse nesne yapısı önemlidir. Yükleyiciyi seçmeden önce kullanıcının neyi düzenlemesi gerektiğine karar verin ve SVG kaynağını tuval sahnesiyle birlikte saklayın.

İçe aktarmadan önce temsil biçimini seçin

Konva'nın Path tutorial belgesi, SVG yol verilerini data üzerinden kabul eder. Bu, tam SVG belgesi değil, bir yolun d özniteliğinin değeridir. Yalnızca d değerlerini kopyalamak; üst grubun dönüşümünü, miras alınan rengi veya SVG'nin viewBox davranışını beraberinde taşımaz.

Kaynak dosyayla ilgili ayrı bir soru da vardır: SVG gerçekten yol içeriyor mu? Çizim, SVG içine sarılmış bir bitmap ise gömülü raster inceleme rehberini kullanın. Geçerli ve yol tabanlı bir SVG de Konva'da tek bir görsel düğümüne dönüşebilir; bu, kaynak dosyayı sahte vektör yapmaz.

Dolgu testini görünür kılan iki renkli bir örnek

Aşağıdaki özgün işaret, dolguları açıkça belirtilmiş, elle yazılmış iki yol içerir. Soldaki tuval ikisini tek bir görsel olarak yükler. Sağdaki tuval aynı geometriden iki Path düğümü oluşturur. İkisine de pembe dolgu isteği ve 1.3 ölçeği uygulanır.

Soldaki pembe dikdörtgen yararlı bir kanıttır: imageNode.fill(), görsel şeklinin arka planını değiştirirken opak yeşil ve sarı bölgeler kaynak renklerini korur. Sağda paths[0].fill() yalnızca ilk bölgeyi değiştirir. Bu test, PerfectVector dönüşüm sonucu değil, özgün geometri kullanır.

Aşağıdakini bir HTML dosyası olarak kaydedin ve yerel geliştirme sunucunuz üzerinden sunun. Konva sürümünü 10.6.0'a sabitler, iki adet 320 × 240 sahne oluşturur ve çizmeden önce SVG görselinin çözümlenmesini bekler. Kod, ekran görüntüsü için çalıştırılan karşılaştırmayla aynıdır.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

Bilinçli olarak küçük tutulan bu örnekte her yolun kendi boyaması vardır ve hepsi aynı koordinatları kullanır. Grup, iki düzenlenebilir yola ortak bir konum ve ölçek verir. Grubun ölçeğini değiştirmek, her yolun data değerini korur; grubun nerede ve ne büyüklükte çizildiğini değiştirir.

Yalnızca bütün görselin yerleştirilmesini gerektiren, güvenilir mevcut bir SVG dosyası için Image tutorial belgesi normal görsel yükleme iş akışını gösterir. SVG URL'sini bir görsel olarak yükleyin, yüklenmesini bekleyin ve ardından Konva.Image öğesine aktarın. SVG işaretlemesi oluşturan bir React bileşeni, tuvalin beklediği görsel nesnesinden farklı bir değerdir.

Çizim karmaşıksa yol verilerinden fazlasını aktarın

Örnekteki parts dizisi, bilinen iki şekil için açıkça tanımlanmış bir modeldir. SVG içe aktarıcısı değildir. Dışa aktarılmış çizimlerde benzer bir yaklaşım kullanmadan önce görünümü nelerin oluşturduğunu inceleyin:

• Bir grup dönüşümü tüm alt öğelerini taşıyabilir, döndürebilir veya ölçekleyebilir. Bu ilişkiyi koruyun ya da dönüşümü bilinçli olarak geometriye işleyin.
• Boyama bir ata öğeden veya CSS kuralından gelebilir. Her yolun bunları bildirdiğini varsaymak yerine amaçlanan dolgu ve konturu belirleyin.
• Gradyanların, kırpmanın, maskelerin ve filtrelerin kendi tanımları ve başvuruları vardır. Kopyalanmış bir d dizesi bu efektleri yeniden oluşturmaz.
• Metin ve temel şekiller ayrı işlem gerektirebilir. Görünür her nesnenin zaten yol olduğunu varsaymayın.

Test ederken özgün dosyanın görüntülenmiş hâlini yeniden oluşturduğunuz sürümün yanında tutun. Tanınabilir tek bir bölgeyle başlayın, konumunu ve rengini karşılaştırın; kalan şekilleri ancak bundan sonra ekleyin. SVG düzenleme rehberi, nesne yapısıyla çalışmanın zor olduğu durumlarda kaynak temizliğini ele alır.

Tek tek yol kontrolleri gerekmiyorsa tam SVG'yi bir görsel olarak yüklemek, bu yeniden oluşturma işini önleyebilir. Konva, SVG'yi canvg gibi harici bir kütüphaneyle görüntülemeyi ve ardından ortaya çıkan tuvali Konva.Image içine yerleştirmeyi de belgeler. Bu da bir görsel temsili olarak kalır; kullanıcıya her kaynak yol için ayrı Konva düğümleri vermez. Belgelenmiş seçeneklere bakın.

Yalnızca farklı bir kaynak rengine ihtiyaç duyan çizimler için başka bir yaklaşım da SVG'nin kendisini güncellemek ve görselini yeniden yüklemektir. Konva'nın bakım sorumlusu bu iş akışını react-konva issue 530 içinde açıklar. Her dolguyu ayrım gözetmeden değiştirerek amaçlanan renk farklılıklarını kaybetmek yerine, bildiğiniz SVG'ye uygun yapısal bir düzenleme kullanın.

Tuval dışa aktarımını raster çıktı olarak ele alın

Örnek, pathScene.stage.toDataURL({ pixelRatio: 2 }) çağrısını yapar. 320 × 240 sahnesi, çözümlendiğinde 640 × 480 boyutunda bir PNG üretir. pixelRatio değerini artırmak, dışa aktarılan piksel boyutlarını değiştirir; PNG'yi düzenlenebilir SVG'ye dönüştürmez. Konva'nın dışa aktarım belgeleri bu ayarı açıklar.

Şu üç çıktıyı ayrı tutun:

1. Vektör düzenleme ve karşılaştırma için özgün SVG.
2. Yol veya görsel başvuruları ve uygulamanızın desteklediği düzenlemeler dâhil, uygulamanızın sahne verileri.
3. Görüntülenmiş bir resme ihtiyaç duyan kullanımlar için PNG veya başka bir raster dışa aktarım.

Dışa aktarılan PNG'yi yeniden açın, boyutlarını ve küçük ayrıntılarını inceleyin. SVG görselini uygulamanızın desteklediği tarayıcılarda da test edin; Konva SVG rehberi, görüntüleme uyumluluğundaki farklılıklara dikkat çeker. Bu örnek basit, kendi içinde yeterli tek bir SVG'yi test eder; dolayısıyla her dışa aktarılmış dosya veya efekt için desteği kanıtlamaz.

Vektör kalitesini yalnızca tuval önizlemesine göre değerlendirmekten kaçının. Pikselli görünen SVG rehberi, kaynak geometrisini raster önizlemelerden ve görüntüleme boyutlandırmasından ayırır.

PerfectVector kaynağa ne zaman yardımcı olur?

Başlangıç görseliniz yalnızca PNG veya JPG bir motifse PerfectVector, Konva sahnesini oluşturmadan önce düzenlenebilir SVG geometrisini yeniden oluşturmanıza yardımcı olabilir. Görüntüyü vektöre dönüştürün, sonucu bir düzenleyicide açın ve herhangi bir yolu uygulamanıza eşlemeden önce silüeti, delikleri ve renk bölgelerini inceleyin.

Vektörleştirme, bir Konva sahne modeli veya her türlü SVG'yi işleyebilen bir ayrıştırıcı oluşturmaz. Temsil biçimini seçmek ve onun gerektirdiği özellikleri aktarmak yine size aittir. Zaten kullanılabilir bir ana SVG dosyanız varsa o dosya üzerinde çalışın. Piksel olarak kalması gereken fotoğraflar veya boyanmış dokular için vektörleştirme yapmadan bir görsel düğümü kullanmak çoğu zaman uygun temsil biçimidir.

İçe aktarımı kendi çiziminizle kontrol edin

Yeniden kullanılabilir bir düzenleyiciye SVG eklemeden önce:

1. Kullanıcının ihtiyaç duyduğu kontrollere göre tek bir bütün görsel düğümü veya ayrı şekil düğümleri seçin.
2. Bir bölgenin rengini değiştirin ve yalnızca amaçlanan nesnenin değiştiğini doğrulayın.
3. Tasarımın tamamını boyutlandırın; aralıkları, kontur görünümünü ve kırpmayı kontrol edin.
4. Gereken piksel boyutlarında dışa aktarın ve raster dosyayı yeniden açın.
5. Kaydedilmiş ana SVG dosyasını bağımsız olarak yeniden açın; böylece tuval dışa aktarımı hiçbir zaman tek kopyanız olmaz.

Sık sorulan sorular

Konva.Image bir SVG'nin içindeki yolları düzenlenebilir hâle getirir mi? Hayır. SVG'yi tek bir görsel düğümü olarak gösterir. Tek tek yol bölgelerini kontrol etmek için uygun yol verilerinden ayrı Path düğümleri oluşturun veya belge yapısını koruyan bir SVG düzenleme iş akışı kullanın.

fill neden SVG'mi yeniden renklendirmek yerine bir dikdörtgen ekliyor? Bir Image düğümünde fill, görsel içeriğinin arkasındaki görsel şeklini boyar. SVG'nin içindeki dolguları yeniden yazmaz. Kaynak SVG'yi düzenleyip yeniden yükleyin veya uygulamanız tek tek renk kontrolleri gerektiriyorsa ayrı Path düğümleri kullanın.

pixelRatio değerini artırmak vektör dosyası dışa aktarır mı? Hayır. Bu örnekte pixelRatio 2, sahne genişliği ve yüksekliğinin iki katına sahip bir PNG üretir. Vektör düzenleme için SVG kaynağını ayrı saklayın.

Kaynaklar

1. Konva — SVG on canvas — Image, Path ve harici görüntüleyici seçeneklerini ve tarayıcı uyumluluğu sınırlarını açıklar.
2. Konva — Path tutorial — SVG yol verilerinden ve açıkça belirtilmiş boyama özelliklerinden Path oluşturmayı belgeler.
3. Konva — Image tutorial — Bir görseli yüklemeyi ve Konva sahnesine yerleştirmeyi gösterir.
4. Konva — High-quality image export — Raster dışa aktarımı ve pixelRatio değerinin çıktı boyutlarına etkisini açıklar.
5. Konva — react-konva issue 530 — Bakım sorumlusunun SVG görsel renklerini değiştirmek için kaynak düzenleme ve yeniden yükleme yaklaşımını kaydeder.

Elinizde yalnızca raster görüntü biçiminde bir simge mi var? Görüntünüzü SVG yollarına dönüştürün, yeniden elde edilen renk bölgelerini inceleyin ve düzenleyicinizin kalanını bağlamadan önce Konva'da tek bir bölgeyi test edin.