SVG Tarama Dolgusu: Kalem Çiziciler İçin Gerçek Yollar

Kalem çizici için SVG'ye tarama dolgusu uygularken hedef kapalı alanın içinde açık çizgiler üretin, sınırlarında bölün ve kalan parçaları geometri olarak dışa aktarın. Makine işini hazırlamadan önce kaydedilen dosyada delikleri geçen veya şeklin dışına çıkan rotalar arayın.

Renkli dolgu veya çizgili önizleme tek başına bu çizim rotalarını sağlamaz. Bu öğretici dikdörtgen delikli özgün beş kenarlı amblem oluşturur, Paper.js ile açık çizgileri bu alanla kesiştirir ve incelemek için kaydedilen SVG'leri yeniden açar. Kontroller dijital merkez çizgisi geometrisini doğrular; başarılı fiziksel çizimi değil.

1. Geri kazanılacak çizgi değil, doldurulacak alan seçin

Delikleri geometrisinin parçası olan kapalı bölge gerekir. Dolu şeklin üzerine koyulan beyaz dikdörtgen, alttaki bölgeyi sağlam bırakırken delik gibi görünebilir. GRBL-Plotter'ın tarama dolgusu belgeleri, örtüşen nesnelerle tek yol içindeki açıklığı karşılaştırarak bu ayrımı gösterir. Burada GRBL-Plotter çalıştırmadık.

Kalın raster çizginin ortasından geçen tek konturu geri kazanmak istiyorsanız tek çizgili SVG rehberini kullanın. Tarama, alan boyunca birden fazla çizgi oluşturur; özgün kalem merkez çizgisini geri getirmez.

Dolgulu tasarımın kopyasını tutun. Örnek, dış hat geçişi eklemeden bilinçli olarak tarama rotaları üretir. Dış sınırı veya delik sınırını da çizmek istiyorsanız bunları ayrı, bilinçli rotalar olarak hazırlayın.

2. Kırpılmış görünümü kesilmiş yollardan ayırın

SVG deseni, tekrarlanan döşeme boyar. Kırpma yolu, alttaki geometriyi değiştirmeden görüntülenen bölgeyi sınırlar. İkisi de yararlı ekran görseli oluşturabilir, ancak uygulama bu görünümü kalem rotalarına çevirecek yönteme yine ihtiyaç duyar.

Yalnızca kırpmalı kontrolümüz her biri 200 kullanıcı birimi uzunlukta on yatay çizgi saklar. Kırpma bunların dış kısımlarını ve dikdörtgen açıklığı gizler. Kaydedilen çizgi uzunlukları hâlâ toplam 2.000 birimdir.

Kesilmiş seyrek çıktı toplam 1.320 birimlik 14 ayrı açık yol içerir. Kırpma yolu, desen, maske, gömülü görsel veya yeniden kullanılan sembol içermez. Dört tarama sırası delik çevresinde iki yola bölünür. Kırpılmış ve kesilmiş önizlemeler aynı görünse bile bu fark kaydedilen SVG'de incelenebilir.

SVG desen birimleri rehberi, amaçlanan çıktı tekrarlanan boya olduğunda bunu ele alır. Burada gereken çıktı açıkça tanımlanmış açık geometridir.

3. Tam Paper.js örneğini çalıştırın

Tarayıcı, metin düzenleyici ve resmî sürümden tam Paper.js 0.12.18 derlemesi kullanın. paper-full.min.js dosyasını library klasörüne koyun. Bu HTML'yi generate.html, sonraki JavaScript'i hatch.js olarak o klasörün yanına kaydedin. Özgün amblem kodun içindedir.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Generate original hatch routes</title>
<canvas id="work" width="200" height="140" hidden></canvas>
<p id="status">Running</p>
<pre id="export-receipt"></pre>
<h2>0 degrees, 10-unit spacing</h2>
<img id="preview-coarse" width="400" alt="Coarse hatch">
<pre id="svg-coarse"></pre>
<h2>0 degrees, 5-unit spacing</h2>
<img id="preview-dense" width="400" alt="Dense hatch">
<pre id="svg-dense"></pre>
<h2>30 degrees, 10-unit spacing</h2>
<img id="preview-angled" width="400" alt="Angled hatch">
<pre id="svg-angled"></pre>
<script src="library/paper-full.min.js"></script>
<script src="hatch.js"></script>
</html>

paper.setup(document.getElementById('work'));
 
// Original area: a five-sided boundary with a rectangular hole.
const areaData = 'M20 20 L140 20 L180 60 L180 120 L20 120 Z ' +
  'M60 50 L60 90 L110 90 L110 50 Z';
const configurations = [
  { id: 'coarse', angle: 0, spacing: 10 },
  { id: 'dense', angle: 0, spacing: 5 },
  { id: 'angled', angle: 30, spacing: 10 }
];
 
function makeHatch(angle, spacing) {
  const area = new paper.CompoundPath({
    pathData: areaData,
    fillRule: 'nonzero',
    insert: false
  });
  const radians = angle * Math.PI / 180;
  const direction = new paper.Point(Math.cos(radians), Math.sin(radians));
  const normal = new paper.Point(-direction.y, direction.x);
  const center = new paper.Point(100, 70);
  const delivery = new paper.Group({ insert: false });
 
  for (let offset = -200 + spacing / 2; offset < 200; offset += spacing) {
    const origin = center.add(normal.multiply(offset));
    const line = new paper.Path.Line({
      from: origin.subtract(direction.multiply(300)),
      to: origin.add(direction.multiply(300)),
      insert: false
    });
    const kept = line.intersect(area, { trace: false, insert: false });
    const parts = kept instanceof paper.CompoundPath ? [...kept.children] : [kept];
    const routes = parts.filter(path => path.length > 1e-7);
    for (const path of routes) {
      if (path.closed || path.segments.length !== 2) {
        throw new Error('Expected one open straight segment');
      }
      if (path.firstSegment.point.dot(direction) > path.lastSegment.point.dot(direction)) {
        path.reverse();
      }
    }
    routes.sort((a, b) => a.firstSegment.point.dot(direction) - b.firstSegment.point.dot(direction));
    for (const path of routes) {
      path.fillColor = null;
      path.strokeColor = '#2f6977';
      path.strokeWidth = 1;
      path.strokeCap = 'butt';
      delivery.addChild(path);
    }
    if (kept instanceof paper.CompoundPath || routes.length === 0) {
      kept.remove();
    }
    line.remove();
  }
  area.remove();
  const geometry = delivery.exportSVG({ asString: true, precision: 6 });
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="70mm" ' +
    'viewBox="0 0 200 140">' + geometry + '</svg>';
  const routeCount = delivery.children.length;
  const drawnLength = delivery.children.reduce((sum, path) => sum + path.length, 0);
  let transitionLength = 0;
  for (let index = 1; index < routeCount; index += 1) {
    transitionLength += delivery.children[index - 1].lastSegment.point
      .getDistance(delivery.children[index].firstSegment.point);
  }
  delivery.remove();
  return { svg, routeCount, drawnLength, transitionLength };
}
 
const receipt = { paper: paper.version, units: 'viewBox user units; 0.5 mm per unit', rows: [] };
for (const configuration of configurations) {
  const result = makeHatch(configuration.angle, configuration.spacing);
  document.getElementById('svg-' + configuration.id).textContent = result.svg;
  const preview = document.getElementById('preview-' + configuration.id);
  preview.src = URL.createObjectURL(new Blob([result.svg], { type: 'image/svg+xml' }));
  receipt.rows.push({ ...configuration, route_count: result.routeCount,
    drawn_length: result.drawnLength, transition_length: result.transitionLength });
}
document.getElementById('export-receipt').textContent = JSON.stringify(receipt, null, 2);
document.getElementById('status').textContent = 'Generated. Save each exact SVG shown below, then reopen those saved files for independent checks.';

generate.html dosyasını tarayıcıda açın. Bunu Chromium 155'te Paper.js 0.12.18 ile çalıştırdık. Her sonuç hem önizleme hem tam SVG işaretlemesini gösterir. Üç tam SVG dizgesini hatch-coarse.svg, hatch-dense.svg ve hatch-angled.svg dosyalarına kopyalayın, ardından kaydedilen dosyaları bağımsız açın.

Kritik çağrı line.intersect(area, { trace: false, insert: false }) ifadesidir. Paper.js, trace: false değerini ilk yolu kesişimlerde bölüp ikinci yolun alanındaki eğrilerini tutma olarak belgeler. Bu, açık tarama parçalarını korur. Varsayılan alan izleme modu farklı bir Boolean sorusunu yanıtlar; Paper.js dolgulu şekil rehberi bu iş akışını ele alır.

İşlev fillColor değerini null yapar ve her rotaya kontur verir. Dışa aktarmadan önce iki noktalı açık sonuçları da kontrol eder. Kapalı alan yapı yardımcısı olarak kalır ve teslim grubuna dahil edilmez.

4. Aralığı, açıyı ve fiziksel ölçeği birlikte kontrol edin

Üç çıktı da width="100mm", height="70mm" ve viewBox="0 0 200 140" tanımlar. Bu, SVG'de bir kullanıcı birimini 0,5 mm'ye eşler. Dolayısıyla 10 birim tarama aralığı 5 mm, 5 birim ise 2,5 mm'dir.

Bilerek geniş seçilen bu örnek aralıklar tek tek rotaları incelemeyi kolaylaştırır. Tam mürekkep kaplaması için öneri değildir. Ekran konturu bir kullanıcı birimi genişliğindedir, ancak görünümü gerçek kalemin malzemedeki izini ölçmez.

Ofset döngüsü tarama fazını yarım aralıkta sabitler. Fazı değiştirmek, çizginin hangi sınır özellikleriyle karşılaştığını değiştirebilir. Pozitif 30°'de yön, bu SVG koordinat sisteminde sağa aşağı uzanır. Aralık, ekrandaki dikey ayrım yerine paralel çizgilere dik ölçülür.

Beklenen çizgi/çokgen kesişimlerini bağımsız hesaplayıp kaydedilen koordinatları 0,000002 kullanıcı birimi toleransıyla karşılaştırdık. Dışa aktarılan her rota beklenen uç noktalarla eşleşti. Her rota açıktı ve örneklenen hiçbir merkez çizgisi noktası bu toleransın ötesinde deliğe veya dış bölgeye geçmedi. Üç kaydedilen SVG de belirtilen fiziksel boyut eşlemesini korudu.

Başka şekillerde bu örneğin sayılarının geçerli kalacağını varsaymak yerine gerçek dışa aktarılan rotaları kontrol edin. Eğriler, çok küçük boşluklar, kendini kesmeler, dönüştürülmüş gruplar ve rastgele içe aktarılan SVG belgeleri bu örneğin test kapsamı dışındadır.

5. Rota boşluklarını optimize edilmiş hareket planından ayırın

Seyrek dosyada, kaydedilme sırasına göre 14 açık rota ve ardışık rotalar arasında 13 boşluk vardır. Bunları kalem aşağıdayken birleştirmek istenmeyen izler ekler. Çizimden önce iş akışınız geçişleri amaçlandığı gibi yönetmelidir.

Betik basit tek yönlü sıra kullanır: tarama ofsetlerini sırayla ziyaret edip her parçayı aynı yönde izler. Her rotanın sonundan sonrakinin başlangıcına düz mesafeler toplandığında seyrek dosya için yaklaşık 1.562,997 kullanıcı birimi elde edilir. Sık dosyada 27 boşluk ve yaklaşık 3.281,578 birim bağlantı toplamı vardır.

Bu toplamlar ilk yaklaşmayı ve son dönüşü içermez. Bu sıralamanın geometrik sonuçlarıdır; ölçülen makine hareketi, zaman tahmini veya optimize plan değildir. Çizici uygulaması rotaları ters çevirebilir veya yeniden sıralayabilir. Aralığı yarıya indirmek bu örneğin çizilen uzunluğunu ve rota sayısını ikiye katladı; iş süresinin evrensel olarak ikiye katlandığını kanıtlamadı.

Dosyayı çizicinizi yönetecek uygulamada yeniden açın, boyutunu doğrulayın ve rota önizlemesiyle kaldırma davranışını inceleyin. Kalemi, malzemeyi, aralığı, sınır payını ve hareket ayarlarını kendi düzeninizde test edin. Çizici işi çalıştırmadık, makine kodu üretmedik veya Cricut Draw/Attach test etmedik.

Yaygın geometri hatalarını giderin

Kaynak yalnızca düz raster siluetse PerfectVector'ın clipart'tan SVG'ye iş akışı önce kapalı tasarımı geri kazanmaya yardımcı olabilir. Dış hattı ve her açıklığı inceleyip kabul edilen geometriden tarama rotaları üretin. Mevcut temiz vektör tasarım doğrudan tarama hazırlığına gidebilir.

Silueti vektörleştirmek ve tarama rotaları üretmek ayrı adımlardır. Bu makalenin özgün amblemi vektör geometrisi olarak hazırlanmıştır; PerfectVector dönüşüm örneği değildir.

Sık sorulan sorular

SVG dolgusu otomatik olarak kalem taramasına dönüşür mü? Hayır. Dolgu boyalı görünümü tanımlar. Çizici iş akışı, alandan çizim konturları oluşturmak için tarama rotaları veya desteklenen başka yöntem gerektirir.

Tarama önizlememde neden hâlâ deliği geçen çizgiler var? Kırpma, tam çizgilerin bölümlerini kaydedilen geometrilerini kesmeden gizleyebilir. Kaydedilen koordinatları kontrol edin ve açık rotalar üretmeden önce deliği gerçek alanın parçası yapın.

Hangi tarama aralığını kullanmalıyım? Hedef ölçekte kalem ve malzeme testiyle seçin. Bu dijital örnek rotaları görünür kılmak için 5 mm ve 2,5 mm aralık kullanır; tam kaplama veya evrensel kalem ayarı belirlemez.

Bu tek bir sürekli yol mu? Hayır. Seyrek sonuç 14 ayrı açık rota içerir. Delik dört sırayı böler ve çizim iş akışı istenmeyen izler eklemeden rotalar arasındaki boşlukları yönetmelidir.

Kaynaklar

1. Paper.js PathItem kesişimi — trace false'un açık yol bölme davranışını belgeler.
2. SVG desenleri — Tekrarlanan boyayı açık rota geometrisinden ayrı tanımlar.
3. CSS maskeleme ve kırpma yolları — Kırpmanın alttaki şekli kesmeden görüntüyü neden değiştirdiğini açıklar.
4. GRBL-Plotter tarama dolgusu — Üst üste nesnelerle tek yol içindeki delik arasındaki farkı gösterir.
5. Paper.js 0.12.18 sürümü — Çalıştırılabilir örnekte kullanılan kitaplık sürümünü belirtir.

Yalnızca raster olan siluetin düzenlenebilir sınırlar gerektirmesi halinde clipart SVG adayı hazırlayın, deliklerini inceleyin ve fiziksel işi test etmeden önce tarama rotalarını ayrı üretip doğrulayın.