Nil Buşra Özer Kişisel Blog

Raphael.js Kütüphanesi

Herkese merhabalar.

Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere raphael.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Raphael.js, SVG (Scalable Vector Graphics) / VML (Vector Markup Language)'in temelinde kullanılan oldukça işlerimizi kolaylaştıran ve tasarım için yardımımıza koşan bir kütüphanedir. Bu kütüphane sayesinde sayfanıza vektörel grafikleri çizmekle kalmayıp, çizmiş olduğunuz şekli istediğiniz derecede ölçeklendirebilirsiniz. İstediğiniz derece kadar elementinizi döndürebilirsiniz, elementinize animasyon ekleyebilirsiniz ve sürükle bırak özelliğinin eklenebilmesi gibi birçok özelliği kullanabilmeniz mümkün. Aşağıda raphael.js kütüphanesi kullanarak çizilmiş birkaç şekil örneği bulunmaktadır.

Şimdi ise sizlere biraz bu kütüphanede kullanılan fonksiyonlardan ve parametrelerden bahsetmek istiyorum. Bu kütüphanede kullanılan tüm fonksiyonlardan bahsedecek olursam oldukça sıkılacaksınız çünkü oldukça fazla kullanılan fonksiyon sayısı mevcut, bu yüzden detaylı bilgi için bu siteye göz atmanızı tavsiye ediyorum.

ELEMENT

1) Element.animate()

Element için animasyon oluşturup başlatmaktadır. Bu fonksiyon obje döndürmektedir.

Parametreler:

callback: Animasyonun sonunda çağrılan bir parametredir.

animation: Obje tipinde bir parametre olan animasyon objesidir.

easing: String tipinde önemli bir parametredir. Raphael.easing_formulas veya CSS formatını kabul eder.
ms: Sayı tipindeki bir parametredir. Animasyonun çalışma süresi olan milisaniyeleri belirtir.

params: Obje tipindeki parametredir. Elementin özelliklerini belirtmektedir.

2) Element.clone()

Obje döndürür ve isminden de anlaşıldığı gibi elementi çoğaltır.

3) Element.dblclick(handler)

Elemente event handler(olay işleyicisi) ve çift tıklanabilme özelliğini ekler.

4) Element.hide()

Elementi görünmez yapmamızı sağlar.

5) Element.isPointInside(x,y)

Aldığı parametredeki koordinatların elementin içinde olup olmadığını anlamamıza yarar.

ANIMATION

1) Animation.delay(delay)

Belirlenen erteleme ile birlikte var olan animasyon objesinin bir kopyasını oluşturur. Geriye bu animasyon objesini döndürür.

delay parametresi: Milisaniye cinsinden gecikme süresidir.

var anim = Raphael.animation({cx: 25, cy: 35}, 2e3);
circle1.animate(anim); // verilen animasyonu çalıştırır..
circle2.animate(anim.delay(289)); // verilmiş olan animasyonu 289 ms sonra çalıştırır..

2) Animation.repeat(repeat)
Belirtilen tekrarlama sayısı kadar var olan animasyon objesinin kopyalarını oluşturur. Döndürdüğü değer, değiştirilmiş olan animasyon objesidir.
repeat parametresi: Animasyonun kaç defa tekrarlanacağının sayısını tutmaktadır.

PAPER

1) Paper.add(json)

Elementleri JSON formatındaki arraye ekler. Döndürdüğü değer, eklenmiş olan elementlerdir. Aşağıdaki kodlarda nasıl kullanıldığına bir bakalım.

paper.add([
    {
        type: "rect",
        x: 25,
        y: 40,
        width: 25,
        height: 40,
        fill: "#fc0"
    },
    {
        
        type: "circle",
        cx: 12,
        cy: 12,
        r: 6
        fill: "#fc0"
    }
]);

2) Paper.circle(x,y,r)
Parametrelerdeki belirlenen koordinatlar ve yarıçapa göre çember çizmemizi sağlar.

Şimdi ise aşağıdaki kod parçacığında nasıl kullanıldığına bir bakalım.

var circle1 = paper.circle(60, 70, 45);

3) Paper.image(src,x,y,width,height)
Belirlenen alana resim eklememizi sağlar. Şimdi ise aldığı parametrelere bakalım.
src: Eklenen resmin url'idir.

x: x koordinatı pozisonu.

y: y koordinatı pozisonu.

width: Eklenecek olan resmin genişliğidir.

height: Eklenecek olan resmin yüksekliğidir.

Aşağıdaki kod parçacığında nasıl kullanıldığına bir bakalım.

var v = paper.image("nil.png", 80, 60, 200, 300);

4) Paper.setSize(width,height)
Canvas boyutlarını değiştirmek istiyorsanız bu metodu çağırmalısınız.

width: Canvasın yeni genişliğidir.

height: Canvasın yeni yüksekliğidir.

5) Paper.getElementsByPoint(x,y)
Parametlerde belirtilen x ve y koordinatlarını içerisinde bulunduran tüm elementleri geriye döndüren bir metottur.

6) Paper.clear()
Çizilmiş olan sayfa kaldırılır ve sayfa üzerindeki tüm elementler silinir.

MATRIX

1) Matrix.add(a,b,c,d,e,f,matrix)
Parametrelerde verilen matrisin, var olan bir matrisin içerisine atılmasını sağlar.
2) Matrix.clone()
Döndürüğü değer matrisin kopyasıdır. İsminden de anlaşıldığı gibi matrisi çoğaltmaktadır.
3) Matrix.rotate(a,x,y)
Matrisi verilen parametrelere göre döndürür.
4) Matrix.toTransformString()
Dizgiye dönüştürülmüş olan matrisi geriye döndürür.

RAPHAEL

1) Raphael.angle(x1,y1,x2,y2,[x3],[y3])

İki veya üç nokta arasındaki açıyı geri döndüren metottur.

2) Raphael.isPointInsideBBox(bbox,x,y)
Eğer parametrelerde verilen koordinatlar sınırlayıcı kutunun (bounding box) içerisinde ise metot, true değerini geriye döndürür.

3) Raphael.el

Elementlere kendi metotlarınızı eklemeniz "Raphael.el" sayesinde mümkün. Aşağıda bu kullanımın nasıl olacağına dair bir örneğe bakalım.

Raphael.el.blue = function () {
    this.attr({fill: "#00F"});
};
// sonrasında aşağıdaki gibi kullanın..
paper.circle(175, 180, 35).blue();

4) Raphael.matrix(a,b,c,d,e,f)
Verilen parametrelere göre geriye matris döndürür.

SET

1) Set.clear()

Kümedeki tüm elementleri siler.

2) Set.exclude(element)

Parametrede verilmiş olan elementi kümeden siler.

3) Set.pop()

Pop'un özelliğinden de bilindiği gibi, son elementi siler ve bu elementi geriye döndürür.

eve()

1) eve.on(name,f)

Verilen olay dinleyicisini (event handler) verilen isme bağlayabilirsiniz. İsimler için "*" sembolünü kullanabilirsiniz. Aşağıdaki kod parçacığına bakarak kullanımını daha iyi anlayalım.

eve.on("*.under.*", f); //under ismi ile bağladık..
eve("mouse.under.floor"); // f'i tetikler..

2) eve.off(name,f)
Olay dinleyicisi (event handler) listesinden, verilen fonksiyonu bağlanmış olduğu isme göre siler.

Bazı fonksiyonları tanıdıktan sonra, sizin için ASP.NET ortamında yapmış olduğum örneğe geçmeden önce kendi çizim alanımızı nasıl oluşturduğumuza bir bakalım. Bu alanı sayfamızda Raphael() nesnesiyle oluşturduğumuz "paper" referansı ile kullanacağız. Çizim alanımızı oluşturmadan önce, çizim alanımızın genişliğini ve yüksekliğini belirlememiz gerekiyor. Ayrıca şunu da eklemek istiyorum; tercihe bağlı olarak, bu alanın bağımsız (absolute) bir pozisyona mı sahip olacağını yoksa bir elemente bakılarak mı konumlandırılacağını belirleyebiliyoruz.

İlk yöntem:

var paper = new Raphael(x, y, width, height);
var paper = new Raphael(element, width, height);

Bir elementi örnek alma yöntemi: Aşağıdaki örneğimizde, sayfamızda yer alan canvas_container DIV' ini kullanarak 300 x 400 boyutlarında bir çizim alanı oluşturuyoruz.

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 300, 400);
}

ASP.NET ortamında sizler için hazırlamış olduğum projeye gelmeden önce, raphael.js kütüphanesini indirip Solution Explorer'a eklemeliyiz. Projemde kullandığım kodları biraz açıklamak istiyorum.

p.circle(100, 100, 30).attr({ "stroke-width": 10, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");

Yukarıdaki kod parçacığında, istediğim boyuttaki circle' ı (çember) çizdim ve hareket edeceği süreyi ms cinsinden belirleyerek sağdan sola hareket etmesini sağladım.

p.circle(100, 100, 30).attr({ "stroke-width": 20, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");

Yukarıdaki kod parçacığında, istediğim boyuttaki circle'ı (çember) çizdim ve hareket edeceği süreyi ms cinsinden belirleyerek yerinde titreme hareketi yapmasını etmesini sağladım.

   var p = Raphael(0, 0, 400, 400);
            p.rect(0, 0, 400, 400);
            p.rect(20, 20, 50, 50).attr({ fill: "red", stroke: "none",cursor:"pointer" }).click(function () {
                this.attr({ fill: "blue" })// Kırmızı dikdörtgene tıklayınca mavi renge dönmesini sağlar..
            }).hover(function () {
                this.attr({ fill: "pink" });
            }, function () {
                this.attr({fill:"orange"});
            });

Yukarıdaki kod parçacığında, istediğim boyuttaki dikdörtgeni çizdim ve üzerine mouse ile gelindiğinde (hover) veya mouse ile tıklanıldığında (click) dikdörtgenin renginin değişmesini sağladım.

Ekran Görüntüsü:

Projenin kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <meta charset="utf-8" />  
   <title>Raphael JavaScript Kütüphanesi Örnek</title>  
   <script src="raphael.js"></script>  
   <script>  
     window.onload = function () {  
       var p = Raphael(0, 0, 400, 400);  
       p.rect(0, 0, 400, 400);  
       p.rect(20, 20, 50, 50).attr({ fill: "red", stroke: "none", cursor: "pointer" }).click(function () {  
         this.attr({ fill: "blue" })// Kırmızı dikdörtgene tıklayınca mavi renge dönmesini sağlar..  
       }).hover(function () {  
         this.attr({ fill: "pink" });  
       }, function () {  
         this.attr({ fill: "orange" });  
       });  
       p.circle(100, 100, 30).attr({ "stroke-width": 20, fill: "90-#f00-#000" }).animate({ cx: 300 }, 1000, "elastic");  
       p.circle(100, 100, 30).attr({ "stroke-width": 10, fill: "90-#00f-#0f0" }).animate({ cx: 300 }, 1000, "ease-in-out");  
     };  
   </script>  
   <style></style>  
 </head>  
 <body>  
 </body>  
 </html>

Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Sylvester.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

KAYNAKLAR

1. http://kurtmancelik.wordpress.com/2009/11/03/raphael-javascript-kutuphanesi/
2. http://raphaeljs.com/reference.html
3 .https://github.com/DmitryBaranovskiy/raphael/
4. http://raphaeljs.com/