Canvas içerisinde resim döndürme

Muhtemelen canvas context drawImage fonksiyonunu biliyorsunuzdur :

context.drawImage(image, x, y);

x ve y resmin üst ve solu anlamına gelir. Daha farklı parametre seçenekleri de var fakat konumuzun dışında kalıyor.

Dönen bir resim yapmak çok net veya kolay bir iş değildir. Sadece drawImage bu iş için yeterli değildir. Birşeyler çizmeden önce koordinat girmek gerekiyor.

Basit bir canvas örneği yapalım :

 Örnek için tıklayınız

Resmimizi sol üstten 50 px ve aşağıdan 35 pixel  olacak şekilde çiziyoruz.

Buraya kadar herşey kolay fakat koordinat vererek resmimizi nasıl çevireceğiz ?

context.rotate(0.5);
context.drawImage(ornekres, 50,35);

Şimdi ne olduğuna bakacak olursak... Resmi çizmeden önce Canvas'ın sol üst köşesi 0.5 radians (takriben 30º) çevirilyor. Dikkatli düşünürseniz, 50 üst 35 aşağı olduğu için aynı alanda kullanılmadığını göreceksiniz.

Peki, resmimizi aynı alanda koruyarak nasıl döndüreceğiz ? Döndürme işleminden önce çizmek istediğimiz Canvas resmimizin kaynağını (source) taşımamız gerekiyor. Daha sonra context.translate(x,y) fonksiyonunu kullanarak alanımızı koruyacağız.

context.translate(50, 35);
context.drawImage(ornekres, 0, 0);

Translate fonksiyonu girilen koorinatı taşıyor : context.translate(50, 35) resim kaynağını 50 üst ve 35 alt olacak şekilde taşıyor:

Örnek için tıklayınız

Şimdiye kadar herşey yolunda, fakat resmin merkezini döndürmek isteseydik ? Bunun çizmek istediğimiz resmin ortasının kaynağını alacağız. Daha sonra uzunluk ve genişliğinin üst ve sol yarısını alarak çizimi gerçekleştireceğiz.

Bu örnek konuyu açıklığa kavuşturacak : Örnek için tıklayınız

Son olarak : translate ve rotate işleminlerimizi sonlandırdık ama koordinat sistemi vidalandı ve geri almanın yolu yoktur. Ancak başlangıçta yaptıklarımızı save  edebiliriz :

// Koordinatları başlangıçta kayıt ediyoruz. 

context.save(); 
 
// kaynağı taşıyoruz (50, 35)   
context.translate(50, 35); 
 
context.translate(64, 64); 
 
context.rotate(0.5); 
 
context.drawImage(logoImage, -64, -64); 
 
// koordinat sistemini default haline getiriyoruz.

context.restore();

Artık resmi döndürmeyi ve merkeze çekmeyi biliyoruz. O zaman yaptıklarımızı şekillendirerek bir fonksiyonda toplayalım :

Sonuç : http://jsfiddle.net/muavenet/rboxg186/1/

Makalemiz burada bitiyor. Kolay gelsin.

Sormak istediklerinizi yorum olarak yazabilirsiniz. Mutlaka dönüş yapmaya çalışacağım.