JavaScript Vectorgraphics kütüphanesini kullanarak sitenize istediğiniz şekilleri çizebilirsiniz. LGPL lisanslı bu kütüphane tamamen ücretsiz ve geliştirilmeye açık. Kütüphanenin halihazırdaki versiyonunda kullanıcılar tarafından eklenmiş bölümler de mevcut.Kütüphanenin çalışma mantığına gelirsek, kütüphanenin mantığı web sayfasında küçük küçük bir sürü div ler oluşturmaya dayanıyor çok abartmadığınız sürece bu div ler sayfanızda bir kasılmaya sebep olmuyor.
Ayrıca Cross Browser olan(Farklı tarayıcılarda sorunsuz çalışabilen) bu kütüphane ile İE4 dahil birçok web tarayıcısında istediğiniz görüntüyü elde edebilirsiniz.Şimdi bakalım bu kütüphaneyle neler yapabiliriz. Bu kütüphaneyi kullanarak sayfaya doğru, kırık doğru, elips(ve daire), herhangi sayıda kenarı olan çokgenler yada bir pasta dilimi şeklinde açı çizebilir ve içlerini boyayabilirsiniz. Bunların dışında gereksiz gibi dursalar da sayfaya resim ve yazı da ekleyebilirsiniz ve bu eklediklerinizi sayfaya sonradan eklediğiniz halde dilerseniz yazıcıda görünür hale getirebilirsiniz yada yaptığınız çizimleri arka arkaya göstererek animasyona benzer şeyler oluşturabilirsiniz. Benim buna benzer yaptığım bi çalışma için şuraya bakabilirsiniz.(Reklam olmaması için dosyaları free host a yükledim.)Şimdi kütüphanemizin kullanımına bakalım ve fonksiyon listesini inceleyelim.Kütüphane de işlemler jsGraphics nesnesi etrafında dönüyor bu nedenle öncelikle bu nesneyi oluşturalım.
Burda kullandığımız cizim1 parametresi sayfamıza birden fazla çizim yapacaksak bu çizimlerin birbirinden ayrılması için gerekli. Eğer sayfamızdaki çizimleri tek bir nesne ile yapacaksak burayı boş bırakma hakkına da sahibiz.
Bir şekil çizeceksek önce çizimin rengini belirlememiz gerek. Bunun için setColor fonksiyonunu kullanacağız.
Buradaki parametre tahmin edeceğiniz gibi rengin RGB kodu. Burada dilersek rengin ingilizce adını da yazabiliriz.
gibi. Rengi de belirlediğimize göre şimdi sayfamıza basit bir çizgi çizelim. Bunun için drawLine fonksiyonunu kullanıyoruz.
Burada yazdığımız parametreler sırasıyla çizginin başlangıç ve bitiş noktasının kordinatları.Birinci Parametre: Çizginin başlangıç noktasının sayfanın soluna uzaklığı
İkinci Parametre: Çizginin başlangıç noktasının sayfanın yukarısına uzaklığı
Üçüncü Parametre: Çizginin bitiş noktasının sayfanın soluna uzaklığı
Dördüncü Parametre: Çizginin bitiş noktasının sayfanın yukarısına uzaklığı
Elbettre bu değerler pixel cinsinden.Burda dikkatinizi çekmek istediğim bir şey var şuan çizgiyle alakalı gerekli ayarlamaları, başlangıç bitiş noktalarını vs. belirledik ancak sayfamızda hala bir çıktı yok. Yani drawLine fonksiyonu çizimi yapmıyor sadece çizginin başlangıç ve bitiş noktalarını belirliyor. Çizdiğimiz şeklin sayfadaki çıktısını görmek içinse paint fonksiyonunu kullanıyoruz.
Bu kodu sitemizde kullandığımızda şöyle bir çıktı elde edeceğiz.
Şimdi kütüphanemizdeki diğer fonksiyonlara göz atalımsetColor(“#HexColor”): Bu fonksiyonla çizimin rengini belirliyoruz.
setStroke(Number): Bu fonksiyonla çizdiğimiz çizimin çizgi kalınlığını belirliyoruz.
drawLine(X1, Y1, X2, Y2): Bu fonksiyonla sayfamıza çizgi çiziyoruz.
drawPolyline(Xpoints, Ypoints): Bu fonksiyonla sayfamıza kırık doğru çizebiliyoruz. Burada Xpoints ve Ypoints parametrelerinin birer dizi-değişken olduğunu hatırlatmakta fayda var.
drawRect(X, Y, width, height): Bu fonksiyonla sayfamıza içi boş dikdörtgen çizebiliyoruz. X ve Y dikdörtgenin sol üst köşesinin kordinatları; width ve height ise dikdörtgenin en ve boy uzunlukları oluyor.
fillRect(X, Y, width, height): Parametreler üstteki fonksiyonla aynı ancak bu sefer içi dolu dikdörtgen çiziyorsunuz.
drawPolygon(Xpoints, Ypoints): İçi boş çokgen çizmenize olanak sağlayan bu fonksiyonda parametreler yine dizi-değişkenşeklinde.
fillPolygon(Xpoints, Ypoints): İçi dolu çokgen çizmeniz için hazırlanmış bir fonksiyon.
drawEllipse(X, Y, width, height): Elips çizmenize yarayan bu fonksiyonda X ve Y değerleri elipsi çevreleyen dikdörtgenin sol üst köşesinin kordinatları; width ve height ise elipsin en ve boy uzunlukları oluyor. Eğer width ve height değerlerinin eşit girerseniz daire çizebileceğinizi de hatırlatmakta yarar var.
fillEllipse(X, Y, width, height): İçi dolu elips çizmenizi sağlayan bir fonksiyon.
fillArc(X, Y, width, height, start-angle, end-angle): İçi dolu pasta dilimi çizmenizi sağlayan fonksiyon. X ve Y değerleri dilimi çevreleyen dikdörtgenin sol üst köşesinin kordinatları; width ve height ise dilimin en ve boy uzunlukları; start-angle ve end-angle da dilimin başlangıç bitiş açıları oluyor. Bu açı değerleri tam sayı veya ondalıklı sayı olabiliyor. Açının birimi ise derece. Bu fonksiyonun nasıl bir iş yaptığı gözünüzde canlanmadıyla şu örneğe bakalım.
gibi bir kodun sayfadaki çıktısı şu şekilde olacaktır.
paint(): Hazırladığınız çizimleri sayfaya çıktı olarak yansıtır.
clear(): Sayfaya yaptığınız çizimleri temizler.
setPrintable(true): Yaptığınız çizimleri yazıcıdan çıktı alınabilir hale getirir. (Normalde sayfaya sonradan eklenen şeyler, yani kaynak kodda olmayanlar, yazıcıdan çıktı alırken gözükmez. Bu kod işte bu eksikliği gideriyor.)
Bunlar dışında sayfaya yazı ve resim ekleyen fonksiyonlarda mevcut. bu fonksiyonlar hakkında daha fazla bilgi edinmek ve kütüphaneyi bilgisayarınıza indirmek için şu adresi ziyaret edebilirsiniz.
