Paper.js ile SVG şekillerini birleştirin ve kesin

SVG'yi içe aktarın, istediğiniz yol nesnelerini bulun ve dolgulu bölgeleri birleştirmek için unite(), bir bölgeyi diğerinden çıkarmak için subtract() çağırın. Sonucu kontrol edene kadar işleme giren nesneleri saklayın ve dışa aktarılan SVG'yi başka bir yerde kullanmadan önce yeniden açın.

Asıl önemli karar, Boolean işleminden önce verilir: hangi şekiller birbirine ait? İçe aktarılan bir grup; arka plan dikdörtgenleri, kırpma yolları, yazılar ve dekoratif parçalar içerebilir. Her alt öğeyi birleştirmek, korumak istediğiniz ayrımları ortadan kaldırabilir. Bu rehberde, tam olarak neyin değiştiğini görebilmeniz için adlandırılmış üç kapalı yol kullanıyoruz.

Tanımlayabildiğiniz dolgulu geometriyle başlayın

Paper.js'in SVG içe aktarma işlevi, SVG işaretlemesi, bir SVG öğesi veya URL kabul eder. Bu seçenekler farklı yükleme yöntemleri gerektirir: bu örnek doğrudan kodda tanımlanmış bir metin dizesini içe aktarır; uzak bir dosya ise yüklendikten sonra içe aktarma geri çağrısında işlenmelidir.

Bu görevde, işleme giren nesneler Path veya CompoundPath olmalıdır. Grup bir kapsayıcıdır; raster görüntü ise yollar üzerinde Boolean işlemi için gereken sınırı sağlamaz. Bir dosya yalnızca tek bir resim gibi davranıyorsa önce SVG'nin neden gruplarına ayrılamadığını kontrol edin.

Kontrolünüzdeki parçalar için ID kullanın. Herhangi bir dışa aktarımda children[0] öğesinin “logo” olduğunu varsaymayın. Tanımadığınız çizimleri inceleyin ve parçaları bilinçli olarak belirleyin. Alt yolları zaten istediğiniz delikleri tanımlıyorsa mevcut bileşik yolu olduğu gibi koruyun.

Küçük bir içe aktarma, birleşim ve çıkarma örneği çalıştırın

Aşağıdaki kodu tarayıcıda Paper.js 0.12.18 ile test ettik. Çizim elle yazılmış özgün bir SVG'dir: kare bir gövde, onunla örtüşen bir çıkıntı ve açılması istenen boşluğu işaretleyen beyaz bir kare. Bu, PerfectVector ile dönüştürülmüş bir örnek değildir.

Boş bir klasörde, sürümü sabitlenmiş kütüphaneyi yükleyin:

npm install --save-exact paper@0.12.18

Bunu index.html olarak kaydedin:

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

Bunu example.js olarak kaydedin, ardından HTML dosyasını tarayıcıda açın:

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;

İçe aktarılan içerik, insert: false sayesinde sahnenin dışında kalır. expandShapes: true, içe aktarıcıdan desteklenen temel şekilleri yollara dönüştürmesini ister; örnek dosyamız zaten yol öğeleri içerir. İçe aktarılan bir ID, bir kapsayıcıyı veya başka türde bir öğeyi tanımlayabildiğinden, açık sınıf kontrolü yine de önemlidir.

Boolean API yeni bir yol öğesi döndürür. Burada sonuç, son kesilmiş şekil eklenene kadar sahnenin dışında tutulur. Özgün parçalar imported altında kullanılabilir durumda kalır; böylece bir işlem başarısız olduğunda kaynağı yeniden oluşturmanız gerekmez.

joined.subtract(hole), deliği birleştirilmiş silüetten çıkarır. İşleme giren nesnelerin sırasını ters çevirmek farklı bir işlem tanımlar ve boş ya da beklenmedik bir sonuç verebilir. Paper.js'in varsayılan çıkarma modu, işleme giren nesneleri alan olarak ele alır. trace seçeneği Boolean geometrisiyle ilgilidir; PNG'yi vektörleştirmek için konturlarını izlemekle ilişkili değildir.

Sonucu hem geometri hem dosya olarak kontrol edin

Bu örnekte birleşim işlemi bir Path, çıkarma işlemi ise iki konturlu bir CompoundPath döndürdü. Son sınırlayıcı kutu SVG birimleriyle x = 40, y = 40, genişlik = 220, yükseklik = 140 idi. Çizim, 300 × 220 boyutunda bir dışa aktarma görünüm alanında yer alır; bu nedenle sınırlayıcı kutu ile belge boyutu bilinçli olarak farklıdır.

Boşluğun merkezindeki (105, 105) noktasını kontrol ettik: birleştirilmiş silüetin içindeydi, çıkarma işleminin sonucunun ise dışındaydı. Dolgulu gövdedeki (60, 60) noktası içeride kaldı. Dışa aktarılan SVG'yi yeniden içe aktarmak sınırlayıcı kutuyu korudu ve deliğin merkezini yine dışarıda bıraktı. Bunlar bu basit örnek dosyanın sonuçlarıdır; içe aktarılan her dosya için garanti değildir.

Dışa aktarma API'si, bir SVG metin dizesi döndürebilir ve açıkça belirtilmiş sınırlar alabilir. Sonucun altında gösterilen işaretlemeyi result.svg dosyasına kopyalayın, ardından bu dosyayı bağımsız olarak açın. Kaydettiğimiz dışa aktarım, iki kapalı alt yol içeren tek bir yol öğesi barındırıyordu; doğrudan tarayıcıda açıldığında da doğru görüntülendi.

Kendi çiziminiz için şunları kontrol edin:

• silüeti ve her boşluğu özgün çizimle karşılaştırın;
• herhangi bir arka planın veya gizli yardımcı şeklin yanlışlıkla dahil edilip edilmediğine bakın;
• istediğiniz dolguyu kontrol edin; tek bir birleştirilmiş şekil, birbirinden bağımsız düzenlenebilen iki düz renkli dolguyu koruyamaz;
• özellikle çizim belge kenarına ulaşıyorsa dışa aktarılan görünüm alanını kontrol edin;
• dosyayı, gerçekten kullanılacağı uygulamada açın.

Beyaz bir üst nesne, beyaz kâğıt üzerinde boşluk gibi görünebilir. Saydamlığı kontrol etmek için sonucu kontrast oluşturan bir arka plan üzerine yerleştirin. SVG deliklerinin dolması rehberi, bununla ilişkili bileşik yol ve dolgu kuralı sorunlarını açıklar.

İşlem yanlış şekli oluşturduğunda

Bir metot eksik. Seçili öğenin sınıfını inceleyin. Bir grubun içindeki istediğiniz yolu bulun veya desteklenen temel şekilleri içe aktarma sırasında dönüştürün. Bunu tüm alt öğeleri birleştirerek çözmeyin: bileşik yollar da alt öğeler içerir ve delik ilişkileri önemlidir.

Sonuç değişmemiş görünüyor. Döndürülen öğeyi görüntülediğinizden emin olun. Özgün öğeleri görünür bırakmak, başarılı bir çıkarma işlemini örtebilir. Örnekte etkin katmana yalnızca son sonuç eklenir.

Bir kontur çizgisi kayboluyor veya anlamı değişiyor. Bu örnek kapalı, dolgulu bölgeler üzerinde çalışır. Görünen kalın bir çizgi, kontur çizgisinin kapladığı alanla otomatik olarak aynı şekil değildir. Bu dış çizgiye dolgulu bir işlem girdisi olarak ihtiyacınız varsa, bir vektör düzenleyicide kontur çizgisi şekle dönüştürülmüş bir kopya hazırlayın ve içe aktarmadan önce inceleyin. Düzenlenebilir özgün dosyayı saklayın.

Ayrıntılı çizimlerde sorun çıkıyor. Tüm illüstrasyona bir işlem dizisi uygulamadan önce iki işlem girdisini ayırın ve konturlarını inceleyin. Yinelenen öğeler, kendi kendini kesen yollar ve küçük parçalar duruma özel kontroller gerektirir. Bu küçük örnek ne performansı ne de geniş kapsamlı SVG uyumluluğunu ölçer. Tek seferlik bir onarım için vektör düzenleyicideki seçim ve düğüm araçlarını kullanmak, bir geometri işleme hattı yazmaktan daha kolay olabilir.

Kaynağınız hâlâ PNG veya JPG ise

Düzenlenebilir özgün dosya yoksa PerfectVector'ın görüntüden vektöre dönüştürme iş akışı, uygun raster görüntülerden SVG hazırlamanıza yardımcı olabilir. Sonucu önizleyin, konturları ve negatif alanları inceleyin ve Paper.js'te test etmek için bir aday dosya indirin.

Vektörleştirme, programınızın hangi parçaları birleştirmesi veya çıkarması gerektiğini belirlemez. İçe aktarılan yapıyı yine de incelemeniz, doğru işlem girdilerini seçmeniz ve dışa aktarılan sonucu kontrol etmeniz gerekir. Elinizde varsa özgün vektörü kullanın; basit bir kareyi veya daireyi vektörleştirmek yerine doğrudan çizin. Görüntü vektörleştirmeye genel bakış, bu kaynak dosya kararını ele alır.

Sık sorulan sorular

İçe aktarılan bir SVG grubunda unite çağırabilir miyim? Önce grubun içindeki istediğiniz Path veya CompoundPath işlem girdilerini seçin. Grup, öğelerin düzenini tanımlar; her alt öğeyi birleştirmek arka planları dahil edebilir veya korumak istediğiniz ayrımları yok edebilir.

subtract özgün yolları kaldırır mı? Yeni bir yol öğesi döndürür. Bu örnek, içe aktarma ve Boolean sonuçları için insert: false kullanır, ardından yalnızca son sonucu ekler. Kaynak işlem girdileri, içe aktarılan kapsayıcı altında kullanılabilir durumda kalır.

Delik neden hâlâ beyaz görünüyor? Renkli bir arka plan üzerinde kontrol edin. Beyaz dolgulu bir nesne arkasındakini örter; çıkarma işlemiyle açılmış bir boşluk ise o arka planı gösterir. Bu ilişkinin korunduğunu doğrulamak için dışa aktarılan dosyayı yeniden açın.

Vektörleştirme, Boolean temizliğini benim yerime yapar mı? Hayır. Uygun bir raster görüntüden yol tabanlı çizimi yeniden oluşturabilir; ancak hangi geometrinin birleştirileceğini, hangi alanın çıkarılacağını ve sonucun nasıl doğrulanacağını yine uygulamanız seçmelidir.

Kaynaklar

1. Paper.js — Project reference — SVG içe aktarma, dışa aktarma, sınırlar ve proje içeriğini belgeler.
2. Paper.js — Path reference — Birleşim ve çıkarma işlemlerini, döndürülen yol öğelerini ve Boolean seçeneklerini tanımlar.
3. Paper.js — CompoundPath reference — Bileşik geometriyi ve onu oluşturan yolları açıklar.

Tek kaynağınız raster bir görüntüyse bir SVG aday dosyası hazırlayın, parçalarını inceleyin ve çizimin geri kalanını işlemeden önce işe yarayan en küçük Boolean işlemini test edin.