SVG Yolları

Bir Lightscript’e renk katmak istiyorsanız arka plan eklemek dikkat çekici bir yol olabilir. Bunu gerçekleştirmenin birkaç farklı yolu vardır, ancak açık ara en kolay ve en verimli yol SVG yollarını kullanmaktır.

SVG yolları Adobe Illustrator kullanılarak görece kolayca oluşturulabilir. Bir SVG yoluna basitleştirmek istediğiniz normal bir PNG görüntüsüyle başlamak en iyisidir. Bir arka plan görüntüsü bulduktan sonra New’e tıklayıp Web Large ön ayarını seçerek yeni bir Illustrator projesi oluşturun.

Ardından, araç çubuğunda File -> Place seçeneğine tıklayıp açılan pencerede görüntünüzü seçerek referans görüntünüzü yeni çalışma alanına aktarın.

Çoğunlukla çalışma alanı içe aktardığınız görüntüden çok daha büyük olacaktır. Bunu düzeltmek için Object -> Artboards -> Fit to Artwork Bounds seçeneğine tıklayın.

Ardından görüntünün bir yola izole etmek istediğiniz bölümünü seçin. SVG görüntüleri, dış hat yoluyla tanımlanan çokgenlerden oluşur. Bu çokgenler daha sonra JS Canvas API kullanılarak bir renk veya degradeyle doldurulabilir.

Bu örnekte gölün dış hattını izleyeceğim ve düz bir renkle dolduracağım. Başlamak için klavyenizde P tuşuna basarak kalem aracını seçin. İzlemek istediğiniz şeklin dış hattı boyunca bir noktaya tıklayın ve seçtiğiniz şekille aynı şekil ve boyutta sürekli bir yol oluşturana kadar daha fazla nokta eklemeye devam edin. Bu şeklin rengi önemli değildir çünkü rengi JavaScript kodunda ayrı olarak ayarlayacaksınız.

Yolunuzdan memnun kaldığınızda File -> Export -> Export As seçeneğine tıklayarak dışa aktarın. SVG dosya türünü seçtiğinizden emin olun.

Açılan bir sonraki pencerede Image öğesinin Link olarak ayarlandığından emin olun ve ardından Show Code seçeneğine tıklayın.

Açılan Not Defteri penceresinde <polygon> etiketini bulun ve points niteliğinin tamamını kopyalayın. Bu, uzun bir sayı dizesi olmalıdır. Ardından ihtiyacınız olan tüm verilere sahip olduğunuzdan Cancel’a tıklayın.

Efekt canvas’ında yol tabanlı bir görüntü çizmek için iki yeni sabit bildirin. Önce, daha önce kopyaladığınız dizeye ayarlanmış bir sabit bildirin.

İpucu

Örneğin, 351 396.5 440 435.5 501.84 ifadesi M351 396.5 440 435.5 501.84 olur.

Şimdi, yol birinci sabitinizin adı olmak üzere new Path2D(path) ile yeni bir yol oluşturun.

Bu görüntü artık path2d’nin önceki adımda bildirdiğiniz yolun adı olduğu ctx.fill(path2d) çağrısıyla çizilebilir.

Bir şeklin rengini ayarlamak için görüntüyü çizmeden önce ctx.fillStyle(color) çağrısını yapın. Bu fonksiyon argüman olarak hex renk kodlarını, CSS renk adlarını, CSS renk fonksiyonlarını ve degradeleri kabul eder.

Ayrıca ölçek ve öteleme gibi tam canvas dönüşüm efekt dizisini de kullanabilirsiniz. Dönüşümlerin yalnızca mevcut görüntüye uygulandığından emin olmak için her katman çizildikten sonra ctx.setTransform(1,0,0,1,0,0) kullanın.

Aşağıdaki örnek kod, basit bir SVG yol görüntüsünün nasıl çizileceğini göstermektedir. Bu teknik, karmaşık arka planlar çizmek için istediğiniz kadar tekrarlanabilir.

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// Illustrator'dan kopyalanan veri. İlk karakterin M olduğundan emin olun.
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// Verilerden yeni bir Path2D oluştur.
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // İsteğe bağlı canvas dönüşümü. Yeni yolun konumunu taşımak için ctx.translate(x,y) de kullanabilirsiniz.
  ctx.fillStyle = "blue"; // Yolun rengini ayarla. Burada degrade de kullanabilirsiniz.
  ctx.fill(pondPath); // Yolu çiz.
  ctx.setTransform(1, 0, 0, 1, 0, 0); // Yalnızca bu yolu etkilemesi için dönüşümü sıfırla.

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

Yukarıdaki kod şu sonucu üretmelidir: