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ı haline getirilebilir. SVG'de, metin görüntüleyebilmenin yanı sıra daireler ve dikdörtgenler gibi bazı yerleşik temel türler bulunur. SVG yeni bir teknoloji olmasa da HTML5 artık SVG nesnelerinin bir <object> veya <embed> etiketi kullanılmadan doğrudan bir sayfaya yerleştirilebilmesini sağlıyor. Raphaël.js, programlı olarak SVG sahneleri oluşturmanıza olanak tanıyan bir JavaScript kitaplığıdır. Desteklendiği SVG sahneleri oluşturmak için birleşik bir API veya şu anda olduğu yerde VML (Vektör Modelleme Dili) (yani IE9'dan önceki Internet Explorer sürümleri) kullanır.

İlk Sahnenizi Çizme

Raphaël ile basit bir sahne çizerek başlayalım. Sahneyi bir Raphaël nesnesi örneği vererek çizmeye başlıyoruz. Bu örnekte, onu belirli bir genişliğe ve yüksekliğe sahip belirli bir HTML öğesine ekleyen kurucuyu kullandım, ancak Raphaël'in nesneyi DOM'ye eklemesini de (Belge Nesne Modeli) ekleyebilirsiniz. Ardından, istenen x ve y konumlarına genişlik ve yükseklik sağlayarak bir dikdörtgen oluşturdum. Sonra, istenen koordinatları ve yarıçapı vererek bir daire oluşturdum. Son olarak, nesnelere renkler atamak için (attr) özellik işlevini kullandım.

Her SVG nesnesine renk, döndürme, fırça rengi, boyutu vb. için atanmış özellikler olabilir. 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şturucunun nesne oluşturmak için kullandığı bir talimat dizisidir. Yolla çizim yapmak, dev bir grafik kağıdına kalemle çizmeye benzer. Kalemi kağıttan kaldırma ve farklı bir konuma taşıma(taşıma), bir çizgi(çizgi çizme) veya bir eğri(yay) çizme talimatı verebilirsiniz. Yollar, SVG'nin ölçek ne olursa olsun aynı ayrıntı düzeyine sahip nesneler oluşturabilmesini sağlar. Eğri çizme talimatı verdiğinizde, SVG eğrinin orijinal ve istenen nihai boyutunu dikkate alır (ölçeklendirmeden sonra), düzgün bir eğri oluşturmak için ara noktaları matematiksel olarak hesaplar.

Aşağıdaki kodda ve şekilde, yollarla çizilmiş bir dikdörtgen ve kapalı eğri görebilirsiniz. Ardından M harfi ve ardından koordinatlar kalemi bu konuma hareket ettirir, L ve ardından koordinat çifti mevcut konumdan söz konusu konuma bir çizgi çizer. Belirli bir kontrol noktası ve göreli koordinatlara sahip uç noktayla yumuşak bir Bezier eğrisi çizer. Z bir yolu kapatır. Genellikle, büyük harf kullanıldığında komut mutlak koordinatlarla verilirken küçük harf kullanımı göreli koordinatlar kullanır. M/m ve Z/z sırasıyla büyük veya küçük harf için aynı komutu verin. 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"});

Metin Çizimi

Metin çizme özelliği olmayan illüstrasyonlara sahip olmak gerçekten sıkıcı olabilir. Neyse ki Raphaël metin çizmek için iki yöntem sunuyor. Birinci yöntem olan metin, çizilecek dizeyle birlikte x ve y koordinatlarını alır. Metin yöntemi, yazı tipi veya diğer efektler üzerinde çok fazla kontrol sağlamaz. Varsayılan yazı tipinde, varsayılan boyutta çizilir.

İkinci yöntem olan yazdırma, metni yollar koleksiyonu olarak çizer. Bu sayede, harfleri tek tek değiştirebiliyoruz. Aşağıdaki örnekte 5 rakamını turuncu bir dolguyla renklendirdik, "TROCKS" rengini mavimsi bir dolguyla renklendirdik ve kalın metni taklit etmek için fırçayı kalınlaştırdık. Bu işlemi 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ğildir ve onun için herhangi bir yazı tipi yoktur. Bunun yanı sıra, ç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ç yardımıyla bunları dönüştürmemiz gerekiyor. Cufon, belirli bir yazı tipinin farklı yazı tipi stillerini (normal, kalın, italik, kalın italik vb.) Raphaël ile kullanmak için dışa aktarmanıza olanak tanır. Cufon'u ayrıntılı olarak ele almak bu eğiticinin kapsamı dışındadır. Daha fazla bilgi için yukarıdaki bağlantıyı inceleyin. Google Font Directory, uygulamalarınız için benzersiz yazı tipleri kaynağıdır.

Etkinlikler

SVG öğeleri, tüm geleneksel fare tabanlı etkinliklere doğrudan abone olabilir: click, dblclick, mousedown, Mousemove, mousout, Mouseover, mousup ve fareyle üzerine gelme. Raphaël, tuvale veya tek tek öğelere kendi yöntemlerinizi ekleyebilmenizi sağlar. Bu nedenle, teoride mobil tarayıcılar için hareketler eklemenizi engelleyen bir şey yoktur.

Aşağıdaki snippet, "ROCKS" içindeki belirli bir harfi tıkladığınızda 45 derece döndürmek 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 karşılaştırması

İkisi de ekrana nesne çizmeye yarayan yöntemler olduğundan, bunları neden diğerine tercih etmeniz gerektiği genellikle hemen net olarak anlaşılmaz. Bu iki araçta birbirinden çok farklı yaklaşımlar vardır. Tuval, boya kalemiyle çizim yapmaya çok benzeyen bir API modudur. Çizimin bir bölümünü temizleyebilir veya yok edebilirsiniz, ancak varsayılan olarak önceki bir çizgiyi geri döndüremez veya değiştiremezsiniz. Tuval aynı zamanda bir kafes bit eşlemidir, bu nedenle resimler ölçeklendirilirken büyük ölçüde pikselleşmeye tabidir. Öte yandan SVG, daha önce de belirtildiği gibi, aynı ayrıntı düzeyinde birden fazla çözünürlük sunabilir ve komut dosyası haline getirilebilir.

Oyun programlama için SVG veya Canvas'ı kullanmak oldukça basittir. Masaüstü veya mobil cihazlara dağıtmayı planladığınıza dair normal kısıtlamaların yanı sıra esasen imge sayısına bağlıdır. SVG, benim düşük kaliteli oyunlar dediğim oyunlara uygundur. Bunları, nesnelerin aynı anda sınırlı hareket edebildiği ve imgelerin kaldırılıp yaratıldığı oyunlar olarak tanımlıyorum. Satranç, Dama veya Battleship gibi birçok masa oyunu ile BlackJack, Poker ve Hearts gibi kart oyunları bu kategoriye girer. Birleştiren diğer bir konu da bu oyunların çoğunda oyuncunun rastgele bir nesneyi hareket ettirmesinin gerekmesi ve SVG'nin komut dosyası seçebilme özelliğinin nesne seçmeyi kolaylaştırmasıdır.

SVG İçin Yazma Araçları

SVG'yi kullanmak, yolları el ile oluşturmanız gerektiği anlamına gelmez. SVG'ye aktarma işlemi yapmanızı sağlayan açık kaynaklı ve ticari çeşitli araçlar vardır. Yoğun bir şekilde kullandığım ve önemle tavsiye ettiğim iki araç Inkscape ve svg-edit.

svg-edit

svg-edit, JavaScript'te 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ıkça, SVG çizimlerini oluşturmak yerine çoğunlukla svg-edit kullanarak çizimleri yapardım. svg-edit, nesneleri grafik olarak veya SVG koduyla oluşturmanıza imkan tanır.

Mürekkep Manzarası

Inkscape; CorelDraw, Adobe Illustrator ve Xara'ya benzer, platformlar arası tam donanımlı bir vektör grafik düzenleyicidir. Inkscape, canlı bir eklenti topluluğu ve olgun bir kod tabanından faydalanıyor. Inkscape'in öncüsü olan ve ardından çatallanan Inkscape 1999'da geliştirildi. Inkscape, vektör tabanlı ve bit eşlem öğeler için kullandığım uygulamadır.

Küçük Çocuk

Windows'da SVG, IE9'dan önceki Internet Explorer sürümlerinde desteklenmemektedir. IE, SVG ile büyük ölçüde aynı işlevleri sunan VML, Vektör Biçimlendirme Dili adlı bir vektör grafik biçimi kullanır. Raphaël, desteklendiği yerlerde SVG veya VML kullanan sahneler oluşturabilir. Raphaël kullanmak, platformlar arası destek sağlamanın kolay bir yoludur.

Referanslar