Silverlight nesnelerinin fare ile dinamik olarak büyütülerek küçültülmesi.

0 dakikada yazıldı

6520 defa okundu

Düzenle

Silverlight animasyonları içerisindeki nesnelerin dinamik olarak
kullanıcılar tarafından boyutlandırılmasını sağlayabilirsiniz. Bunun
için de tabi ki en hızlı yol kullanıcıya fare ile herhangi bir nesneyi
tutarak büyütüp küçültme şansı tanımaktır. Bu makalemizde bu çeşit bir
işlevselliği nasıl oluşturabileceğimizi inceleyeceğiz.

Yeni bir Silverlight projesi oluşturarak sahneye deneme amaçlı olarak
bir Rectangle nesnesi yerleştirelim. Amacımız kullanıcıların bu
nesneye tıklayarak dikdörtgeni fare ile büyütüp küçültebilmelerini
sağlamak. Dikdörtgene tıkladıktan sonra fare ile nesneden uzaklaştıkça
çizim büyüyecek, nesnenin sol üst köşesine yaklaştıkça dikdörtgen
küçülecek.

<Canvas

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

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

  Width="640"
Height
="480"

  Background="White"

  x:Name="Page"

  >

  <Rectangle
MouseLeftButtonDown
="FareGeldi"
MouseMove
="FareHareketli" MouseLeftButtonUp="FareGitti"
Width
="249" Height="237"
Fill
="#FFFF0000" Stroke="#FF000000"
Canvas.Left
="86" Canvas.Top="36"/>

</Canvas>

Yukarıdaki şekliyle Silverlifght animasyonumuzu hazırlıyoruz. XAML
kodumuz içerisinde bir dikdörtgen bulunuyor. Bu dikdörtgen yerine siz
örneklerinizde MediaElement gibi içerisinde video oynayan nesneler
de kullanabilirsiniz. Dikdörtgenimize tıklandığında büyüme ve küçülme
işlemleri olacağı için dikdörtgenin MouseLeftButtonDown,
MouseMove ve MouseLeftButtonUp durumlarına ayrı ayrı JavaScript
fonksiyonları yazmamız gerekiyor. Gelin tek tek bu fonksiyonları yazmaya
başlayalım.

var FareBasili;

var SonDurum = {};

 

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

İlk olarak fareye ilk tıklandığında çalıştırılacak olan FareGeldi
fonksiyonunu yazıyor. Söz konusu fonksiyon içerisinde farenin durumunu
global olarak yakalayabilmemizi sağlayacakolan captureMouse metodunu
çağırdıktan sonra FareBasili adında düzenlemiş olduğumuz global
değişkenin değerini true olarak değiştiriyoruz. Böylece bir sonraki
adımda fare hareketini yakalarken büyütme işlemi başlatılmış mı yoksa
başlatılmamış mı kontrolünü yapabileceğiz. Son olarak da farenin
sahnedeki konumunu yine global değişkenimiz olan SonDurum
değişkenine aktarıyoruz.

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

Dikdörtgen nesnesi üzerinde fare hareket ettikçe tetiklenecek olan
MouseMove durumuna bağlı FareHareketli fonksiyonu içerisinde ilk
olarak dikdörtgene basılarak herhangi bir büyütme veya küçültme
işleminin başlatılıp başlatılmadığı kontrol etmek için FareBasili
değişkeninin değerine bakıyoruz. Eğer öncesinde bir büyütme işlemi
başlatılmış ise gerekli değişiklikleri yapıyoruz. Farenin güncel konumu
ile bir önceki konumu arasında farkı alıp bu farkı nesnenin genişlik ve
yükseklik değerlerine ekliyoruz. Son olarak da farenin güncel konumunu
tekrar global değişkenimize kaydederek işlemi bitiyoruz. Böylece fare
hareket ettikçe gerçekleşen konum değişikliği kadar piksel değeri
nesnenin boyutuna yansıtılacak.

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Son olarak MouseLeftButtonUp durumunda çalışacak olan FareGitti
fonksiyonumuzu yazıyoruz. Bu fonksiyon kullanıcı farenin düğmesinden
parmağını çektiğinde çalışacak. Yani artık büyütme veya küçültme işlemi
sonlandı. Bu durumdan MouseMove event'ını haberdar edebilmek için
hemen global değişkenimizi false olarak değiştiriyoruz.

Artık örneğimiz çalışmaya hazır. Örneğin son halinin kaynak kodları şu
şekilde;

[Page.xaml.js]

if
(!window.Resize)

    window.Resize = {};

 

Resize.Page = function()

{

}

 

Resize.Page.prototype =

{

    handleLoad: function(control,
userContext, rootElement)

    {

    }

}

 

var FareBasili;

var SonDurum = {};

 

function FareGeldi(sender,args)

{

    sender.captureMouse();

    FareBasili=true;

    SonDurum = args.getPosition(null);

}

function FareHareketli(sender,args)

{

    if(FareBasili)

    {

        sender.width += args.getPosition(null).X - SonDurum.X;

        sender.height += args.getPosition(null).Y - SonDurum.Y;

        SonDurum = args.getPosition(null);

    }

}

function FareGitti(sender,args)

{

    sender.releaseMouseCapture();

    FareBasili = false;

}

Hepinize kolay gelsin.