Silverlight nesnelerini fare ile döndür / çevir / yuvarla

0 dakikada yazıldı

6460 defa okundu

Düzenle

Silverlight içerisinde fare ile nesneler arasında bir etkileşim kurmak
için JavaScript ile çok farklı kodlar yazılabilir. Bu makalede herhangi
bir nesneyi fare ile tutarak sahnede kendi etrafında çevirmeyi
deneyeceğiz. Bunun için hemen yeni bir Silverlight animasyonu
yaratıyoruz ve içerisinde örnek olması amacıyla ufak bir resim
yerleştiriyoruz. Image nesnesinin adını Foto olarak verdikten
sonra Image tagları arasına aşağıdaki şekliyle RotateTransform
nesnesi yerleştirmemiz gerekiyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400"
Height
="400"

  Background="White"

  x:Name="Page"

  >

  <Image
Width
="185" Height="184"
Canvas.Left
="110" Canvas.Top="103"
Source
="image[1].jpg" x:Name="Foto"
RenderTransformOrigin
="0.5,0.5">

    <Image.RenderTransform>

      <TransformGroup>

        <RotateTransform
x
:Name="FotoAci"
Angle
="0"/>

      </TransformGroup>

    </Image.RenderTransform>

  </Image>

</Canvas>

Yukarıdaki kod içerisinde özellikle dikkat etmemiz gereken iki nokta
var. Bunlardan ilki Image nesnemizin adının Foto olması,
ikincisi ise aynı şekilde Foto'ya ait RotateTransform nesnesine de
FotoAci ismini vermiş olmamış. Bu isimler üzerinden söz konusu
nesnelere ulaşıyor olacağız.

Kullanıcılar fotoğrafımıza tıklayarak döndürme işlemini
başlatabilsinler. Yani Foto nesnesinin MouseLeftButtonDown durumunu
kontrol etmeliyiz. Aynı şekilde döndürme işlemini bitirebilmek için
MouseLeftButtonUp durumunu da kontrol etmemiz gerekecek. Fakat bunların
haricinde fare ile döndürme işlemi yapılırken kullanıcı Foto nesnesinin
dışına da çıkabilir. Bu durumda döndürmenin devam edebilmesi için tüm
sahnedeki MouseMouve durumunu kontrol etmemiz gerekecek. Ayrıca döndürme
işlemine fotoğrafın üzerinde başlayıp dışarıda sonlandırılabilir. Özetle
aşağıdaki şekilde dört farklı durumu kontrol etmemiz gerekiyor.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400"
Height
="400"

  Background="White"

  x:Name="Page"

**  MouseMove**="FareHareketli"

**  MouseLeftButtonUp**="FareGitti"

  >

  <Image
MouseLeftButtonDown
="FareGeldi"
MouseLeftButtonUp
="FareGitti"
Width
="185" Height="184"
Canvas.Left
="110" Canvas.Top="103"
Source
="image[1].jpg" x:Name="Foto"
RenderTransformOrigin
="0.5,0.5">

    <Image.RenderTransform>

      <TransformGroup>

        <RotateTransform
x
:Name="FotoAci"
Angle
="0"/>

      </TransformGroup>

    </Image.RenderTransform>

  </Image>

</Canvas>

Şimdi sıra geldi gerekli JavaScript kodlarını yazmaya. Doğruda
projemizin Page.xaml.js dosyasına yöneliyoruz. İlk olarak
FareGeldi fonksiyonunu yazalım.

var FareBasili;

var SonDurum;

 

function FareGeldi(sender, args)

{

    //Global fare takibini başlat

    sender.captureMouse();

    //Tuşa BASILDI!! :)

    FareBasili = true;

    // Durumu bir kenara kaydet

    SonDurum = args.getPosition(null);

}

Yukarıdaki kodun öncesinde iki adet global değişken tanımlıyoruz. Bu
değişkenlerden biri farenin tuşunun basılı olup olmadığı kontrol edecek.
Böylece MouseMove durumunda gerekli işlemlerin yapılıp,
yapılmamasını sağlayacağız. Diğer değişken ise fare imlecinin
pozisyonunu bir kenara kaydediyor, ileride kullanıyor olacağız.

Sıra geldi nesneyi çevirme işlemine, yani FareHareketli JavaScript
fonksiyonunu yazmaya.

function FareHareketli(sender,args)

{

    var GuncelDurum =
args.getPosition(null);

 

    // Fareye basılı mı??

    if (FareBasili)

    {   

        var AciNesnesi =
sender.findName("FotoAci");

 

       // Nesnenin merkez noktasının
global

       //koordinatlarını bulalım.

        var Merkez = {};     

        Merkez.X = sender.findName("Foto")["Canvas.Left"] + sender.findName("Foto").width/2;

        Merkez.Y = sender.findName("Foto")["Canvas.Top"] + sender.findName("Foto").height/2;

 

        // Çeviri işlemi

        var SonAci =
parseInt(Math.atan2(SonDurum.Y - Merkez.Y, SonDurum.X - Merkez.X) * 360
/ (2 * Math.PI));

        var GuncelAci =
parseInt(Math.atan2(GuncelDurum.Y - Merkez.Y, GuncelDurum.X -
Merkez.X) * 360 / (2 * Math.PI));

        AciNesnesi.Angle += GuncelAci-SonAci;

 

        // Son durumu tekrar sakla.

        SonDurum = GuncelDurum;

    }

}

Yukarıdaki kod sizi korkutmasın. Aslında epey basit bir işlemden
bahsediyoruz. İlk satırda farenin güncel koordinatlarını alıyoruz
sonrasında da fareye basılı mı yoksa değil mi kontrolünü yapmak için
kendi FareBasili değişkenimize danışıyoruz. Eğer farenin düğmesine
basılmış ise döndürme işlemini yapmamız gerekecek.

Döndürme işlemini yaptıktan sonra hesapladığımız yeni açı değerini adını
FotoAci koyduğumuz RotateTransform nesnesine aktarmamız gerekecek. O
nedenle baştan nesnemizi AciNesnesi adında bir değişkene
aktarıyoruz. Sıra geldi hesaplamalara; kullanacağımız teknik farenin
sahnedeki konumu ile çevirmek istediğimiz nesnenin merkez noktası
arasında bir doğru çizerek bu döğrunun X aksına açısını almak olacak. Bu
nedenle ilk olarak nesnenin merkezinin global koordinatlarını buluyoruz.
Sonrasında açı hesaplama işlemlerini yaparken ilk olarak bir önceki
durumdaki, yani bizim SonDurum değişkenine kaydettiğimiz durumdaki
açıyı hesaplıyoruz sonra da şu anki durumdaki açıyı hesaplıyoruz. Açı
hesaplama için standart JavaScript fonksiyonları kullanıyoruz.
Kullandığımız esas fonksiyon olan Math.atan2 geriye Radiant döndürdüğü
için onu da dereceye çeviriyoruz.

Son olarak önceki ile sonraki açı arasındaki farkı alarak
RotateTransform nesnesinin açısına ekliyoruz. SonDurum
değişkenini de güncelledikten sonra işimiz bitiyor.

İşimiz bitiyor derken sadece FareHareketli fonksiyonundan
bahsediyordum. Tabi ki daha FareGitti fonksiyonunu da yazmamız
lazım.

function FareGitti(sender,args)

{

    FareBasili = false;

    sender.releaseMouseCapture();

}

Gördüğünüz gibi FareGitti kısmı belki de işin en kolay kısmı. Global
FareBasili değişkenimizi false yaptıktan sonra global fare
yakalamayı da kapatıyoruz.

Artık projemizi çalıştırabiliriz. Foto nesnemizi faremiz ile
istediğimiz gibi döndürebiliyoruz.

Hepinize kolay gelsin.