Raphaël.js'ye giriş

James Williams
James Williams
X Ana sayfa

Giriş

Ölçeklenebilir Vektör Grafikleri'nin kısaltması olan SVG, nesneleri ve sahneleri tanımlamak için kullanılan XML tabanlı bir dildir. SVG öğeleri etkinlikleri tetikleyebilir ve JavaScript ile komut dosyası yazılabilir. SVG, metin görüntüleme özelliğinin yanı sıra daireler ve dikdörtgenler gibi çeşitli yerleşik ilkel türleri içerir. SVG teknolojisi yeni olmasa da HTML5 artık SVG nesnelerinin <object> veya <embed> etiketi kullanılmadan doğrudan bir sayfaya yerleştirilmesine olanak tanıyarak kanvasta şu anda mevcut olanla uyumlu hale getiriyor. Raphaël.js, SVG sahnelerini programatik olarak oluşturmanıza olanak tanıyan bir JavaScript kitaplığıdır. Desteklenen yerlerde SVG sahneleri veya desteklenmeyen yerlerde VML (Vector Modeling Language) (ör. IE9'dan önceki Internet Explorer sürümleri) oluşturmak için birleşik bir API kullanır.

İlk Sahnenizi Çizme

Raphaël ile basit bir sahne çizerek başlayalım. Bir Raphaël nesnesi oluşturarak sahneyi çizmeye başlarız. Bu örnekte, belirli bir genişlik ve yüksekliğe sahip belirli bir HTML öğesine yerleştiren kurucuyu kullandım ancak Raphaël'in nesneyi DOM'a (Belge Nesne Modeli) eklemesini de sağlayabilirsiniz. Ardından, genişlik ve yükseklikle birlikte istenen x ve y konumlarını sağlayarak bir dikdörtgen oluşturdum. Ardından, istenen koordinatları ve yarıçapı belirterek bir daire oluşturdum. Son olarak, nesnelere renk atamak için özellik işlevini (attr) kullandım.

Her SVG nesnesine renk, döndürme, çizgi rengi ve boyut gibi özellikler atanabilir. Atanabilir özelliklerin ayrıntılı bir listesini burada bulabilirsiniz.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

Yollarla Gelişmiş Şekiller Çizme

Yol, oluşturma aracı tarafından nesne oluşturmak için kullanılan bir talimat dizisidir. Yol kullanarak çizim yapmak, dev bir grafik kağıdına kalemle çizim yapmaya benzer. Kalemin kağıttan kaldırılmasını ve farklı bir konuma taşınmasını(move to), çizgi çizmesini(line to) veya eğri çizmesini(arc to) isteyebilirsiniz. Yollar, SVG'nin ölçekten bağımsız olarak aynı ayrıntı düzeyine sahip nesneler oluşturmasını sağlar. Eğri çizme talimatı verdiğinizde SVG, eğrinin orijinal ve istenen nihai boyutunu (ölçeklendirmeden sonra) hesaba katar ve pürüzsüz bir eğri oluşturmak için ara noktaları matematiksel olarak hesaplar.

Aşağıdaki kod ve şekilde, yollarla çizilmiş bir dikdörtgen ve kapalı eğri gösterilmektedir. M harfi ve ardından koordinatlar, kalemi ilgili konuma taşır. L harfi ve ardından koordinat çifti, mevcut konumdan ilgili konuma bir çizgi çizer. s, belirli bir kontrol noktası ve nispi koordinatlara sahip uç noktayla düzgün bir Bezier eğrisi çizer. Z, bir yolu kapatır. Genellikle büyük harf kullanıldığında komut mutlak koordinatlarla, küçük harf kullanıldığında ise göreli koordinatlarla verilir. M/m ve Z/z, sırasıyla büyük harf veya küçük harf için aynı komutu verir. Tüm yol talimatlarının listesini burada bulabilirsiniz.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

Çizim Metni

Metin çizme olanağı olmadan görsel oluşturmak gerçekten sıkıcı olurdu. Neyse ki Raphaël, metin çizmek için iki yöntem sunuyor. İlk yöntem olan metin, çizilecek dizeyle birlikte bir x ve y koordinatı alır. Metin yöntemi, yazı tipi veya diğer efektler üzerinde çok fazla kontrol sahibi olmanızı sağlamaz. Varsayılan yazı tipinde ve varsayılan boyutta çizilir.

Yazdırma adlı ikinci yöntem, metni bir yol koleksiyonu olarak çizer. Sonuç olarak, harfleri tek tek değiştirebiliriz. Aşağıdaki örnekte, 5 rakamını turuncu dolguyla, "ROCKS" ifadesini mavimsi bir dolguyla renklendirdik ve koyu renkli metin etkisi vermek için kalın bir fırça kullandık. Bunu 40 puntoluk özel bir yazı tipi kullanarak yaptık.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Vegur yazı tipi, Raphaël'de veya başka bir yazı tipinde yoktur. Ayrıca, çoğu yazı tipi TrueType(TTF) veya OpenType(OTF) biçimini kullanır. Bu biçimleri Raphaël tarafından kullanılabilecek bir biçime dönüştürmek için Cufon adlı bir araç kullanmamız gerekir. Cufon, belirli bir yazı tipinin farklı yazı tipi stillerini (normal, kalın, italik, kalın italik vb.) Raphaël ile kullanmak üzere dışa aktarmanıza olanak tanır. Cufon'u ayrıntılı olarak ele almak bu eğitim kapsamında değildir. Daha fazla bilgi için yukarıdaki bağlantıyı inceleyin. Uygulamalarınız için özgür yazı tipleri bulmak istiyorsanız Google Yazı Tipi Dizini'ni kullanabilirsiniz.

Etkinlikler

SVG öğeleri, fareyle ilgili tüm geleneksel etkinliklere doğrudan abone olabilir: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup ve hover. Raphaël, tuvale veya tek tek öğelere kendi yöntemlerinizi ekleme olanağı sunar. Bu nedenle, teorik olarak mobil tarayıcılar için hareketler eklemenizi engelleyen hiçbir şey yoktur.

Aşağıdaki snippet, "ROCKS" ifadesindeki belirli bir harfin tıklandığında 45 derece döndürülmesi için bir işlev bağlar.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG ve tuval

Her ikisi de ekranda nesne çizmek için kullanılan yöntemler olduğundan, genellikle birini diğerine tercih etmenizin nedeni hemen anlaşılmaz. Bu iki mecrada çok farklı yaklaşımlar vardır. Tuval, hemen modu bir API'dir ve boya kalemleriyle çizmeye çok benzer. Çizimin bir kısmını temizleyebilir veya yok edebilirsiniz ancak varsayılan olarak önceki bir çizgiyi geri alamaz veya değiştiremezsiniz. Kanvas da raster bitmap olduğundan resimler ölçeklendirildiğinde pikselleşmeye çok açıktır. Öte yandan, daha önce de belirtildiği gibi SVG, aynı ayrıntı düzeyinde birden fazla çözünürlük sunabilir ve komut dosyası olarak yazılabilir.

Oyun programlama için SVG mi yoksa Canvas mı kullanılacağı oldukça basit bir karardır. Masaüstüne mi yoksa mobil cihazlara mı dağıtmayı planladığınıza dair normal kısıtlamaların yanı sıra, sprite sayısı da önemlidir. SVG, düşük kaliteli oyunlar için idealdir. Bu oyunları, eşzamanlı nesne hareketinin, sprite kaldırma ve oluşturmanın sınırlı olduğu oyunlar olarak tanımlayabiliriz. Satranç, dama veya savaş gemisi gibi birçok masa oyununun yanı sıra blackjack, poker ve Hearts gibi kart oyunları bu kategoriye girer. Bu oyunların çoğunda oyuncunun rastgele bir nesneyi hareket ettirmesi gerekir. SVG'nin komut dosyası özelliği, nesne seçimini kolaylaştırır.

SVG İçin İçerik Oluşturma Araçları

SVG kullanmak, yolları manuel olarak oluşturmanız gerektiği anlamına gelmez. SVG'ye dışa aktarmanıza olanak tanıyan hem açık kaynaklı hem de ticari çeşitli araçlar vardır. Sık kullandığım ve kesinlikle önerdiğim iki araç Inkscape ve svg-edit'tir.

svg-edit

svg-edit, JavaScript ile yazılmış tarayıcı tabanlı bir SVG düzenleyicisidir. GIMP veya MS Paint'i andıran sınırlı bir kullanıcı arayüzü sunar. Ayrıntı düzeyi nispeten düşük olmadığı sürece, SVG çizimleri oluşturmak yerine çoğunlukla svg-edit'i kullanarak bu çizimlerde ince ayar yaptım. svg-edit, nesneleri grafiksel olarak veya SVG koduyla oluşturmanıza olanak tanır.

Inkscape

Inkscape, CorelDraw, Adobe Illustrator ve Xara'ya benzer, platformlar arası tam özellikli bir vektör grafik düzenleyicisidir. Inkscape, canlı bir eklenti topluluğundan ve gelişmiş bir kod tabanından yararlanır. Inkscape'in öncülü olan ve Inkscape'in ayrıldığı program 1999'da geliştirildi. Vektör tabanlı ve bitmap öğeler için tercih ettiğim uygulama Inkscape'tir.

Küçük Bir Not

SVG, Windows'ta IE9'dan önceki Internet Explorer sürümlerinde desteklenmez. IE, SVG ile aynı işlevlerin çoğunu sağlayan VML (vektör işaretleme dili) adlı bir vektör grafik biçimi kullanır. Raphaël, destekleniyorsa SVG veya VML kullanan sahneler oluşturabilir. Raphaël'i kullanmak, platformlar arası destek sağlamanın kolay bir yoludur.

Referanslar