Raphael kütüphanesi
Raphael çizim yapmamızı sağlayan bir javascript kütüphanesidir. Bu ismin ünlü İtalyan ressam Raphael Santi’yi düşünerek konulduğunu düşünmedim değil doğrusu. Stajımın son 2 haftasında anket sistemi projesiyle ilgileneceğim. Bu projenin görsel arayüzünü tasarlarken Raphael kütüphanesinden faydalanıyoruz. Raphael küçük bir kütüphane çok ayrıntısı yok, bende ufak tefek bir kaç örnek açıklayacağım. Öncelikle Raphael kütüphanesini kullanmak için raphael.js dosyasını indiriyoruz ve kullanacağımız html dosyasının içine import ediyoruz. Raphael de 2 şekilde çizim alanı oluşturabiliyoruz.
var paper = Raphael(10, 40, 500, 500);
var stats = Raphael("stats",935, 200);
pasta alanı için ayırdığımız yer ekran üzerinde x=1350 y=60 olan koordinattan başlayan 250x250’lik bir kısımdır. stats alanı ise parantez içinde belirttiğimiz stats elementine bağlı olarak 935x200 boyutlarında üretilmiş bir kısımdır.
Yukarıda oluşturduğumuz alanın içine bir değişkene atama yaparak çizeceğimiz şekli oluşturuyoruz. Mesela bir çember çizelim.
var circle = paper.circle(50, 50, 10);
x koordinatı 50, y koordinatı 50, yarıçapı 10 olan bir çember çizdirdik, eğer bu satırı yazdığınızda ekranda bir çember göremiyorsanız sorun şundan kaynaklanıyor olabilir yazdığınız x ve y koordinatı sınırları çemberi çizdirdiğimiz paper alanının dışında kalıyor olabilir. Bunun için ya circle’ın koordinatlarını ya da paper’ın koordinetlarını değiştirmeliyiz. Çemberimizi daireye dönüştürmek için ise:
circle.attr("fill", "#f00");
satırını ekleyebiliriz attr fonksiyonumuzun ilk parametresi fill içini doldurmaya, ikinci parametresi ise #f00 dolduracağımız renge tekabül ediyor.
circle.attr("stroke", "#fff");
bu satırla dairemizin etrafını “#fff” rengi ile çevrelemiş oluyoruz. Yada attribute’u şu şekilde kullanıp ek olarak kenarlığın kalınlığını da belirleyebiliriz.
circle.attr({fill:'#9cf', stroke:'#f0d', 'stroke-width':5});
elle de çizim yapabiliriz, şimdi ben ismimin baş harfi olan E harfini ekrana şu şekilde bastırabilirim:
var eylul=paper.path("M50 300 l0 -250 l150 0 l0 50 l-100 0 l0 50 l100 0 l0 50 l-100 0 l0 50 l100 0 l0 50 z");
eylul.attr({fill:'#9cf', stroke:'#f0d', 'stroke-width':5});
buradaki M harfi başlangıç noktamız oluyor “move”dan geliyor yani imleci o noktaya taşı anlında, küçük L harfi ise “Line”dan geliyor en sonunda kullandığımız z harfi ise sonlandırma anlamındadır. Çıktısı da şu şekildedir:
En basit anlamda bu iş böyle benim anket sistemi uygulamamda kullandığım bir başka komut ise:
ScaleRaphael('map', 1030, 820)
Adından da anlaşılacağı gibi ScaleRaphael ölçekleme yapıyor. Bu örnekte map elementini x=1030 y=820 olacak şekilde ölçekliyor.
