Silverlight 2.0 içerisinde maskeleme (clipping)

10.03.2010

4544

Bu yazımızda Silverlight 2.0 içerisinde maskeleme (clip) işlemlerine göz atacağız. İlk olarak basit bir maskeleme işleminin XAML içerisinde nasıl yapıldığına baktıktan sonra bu maskeleri nasıl anime edebileceğimize ve programatik yoldan ulaşımına değineceğiz.

Bir maske yaratalım!

Herhangi bir nesneye maske aktarmak demek aslında o nesnenin Clip özelliğine uygun bir şekil aktarmak demektir. Elinizde var olan bir geometri nesnesini alarak bir element'in Clip özelliğine verdiğiniz anda artık söz konusu Geometri nesnesi bir maske görevi görür. Expression Blend içerisinde baktığınızda maskeler nesnelerin birer Property'sine atandığı için ayrı birer obje olarak arayüzde gözükmez.

Expression Blend içerisinde maskelenmeye hazır kontroller.

Yukarıdaki ekran görüntüsünde de görebileceğiniz üzere sahnede bir Image ve bir de Ellipse nesnesi bulunuyor. Bir sonraki adımda amacımız bu Ellipse nesnesini Image için bir maske haline getirmek. Yapacağımız işlem bu iki nesneyi fare ile seçip "Objects and Timeline" kısmında sağ tıklayıp "Path / Make Clipping Path" komutunu vermek. Böylece söz konusu Ellipse artık Image'in Clip özelliğine bir geometri olarak aktarılacak ve ortada Ellipse diye bir nesne kalmayacak.

Maskelenmiş Image kontrolümüz karşınızda.

Artık kontrolümüzü maskeledik ve Ellipse diye bir nesne kalmadı peki arkaplanda XAML tarafında neler oldu? Gelin Blend'in bizim için yarattığı XAML kodunu bir detaylıca inceleyelim.

[XAML]

Gördüğünüz gibi Image nesnesinin uzun bir Clip datası var. Bu data bizim bir önceki adımda yarattığımız Ellipse'in ta kendisi. Aslında bu kodu bu şekilde yazmak yerine daha okunaklı bir şekilde de yazabilirdik. Nasıl mı?

[XAML]

<Image.Clip>

</Image.Clip>

</Image>

Peki ne değişti? Nesne basında Clip vermiş olduk. Image nesnesinin Clip özelliğine doğrudan koordinatları girmek yerine ayrı bir element vermeye karar verdik ve bu nedenle de Image.Clip tagları açarak içerisine bir Geometry nesnesi yerleştirdik. EllipseGeometry nesnesi gibi GeometryGroup, LineGeometry, PathGeometry nesneleri de mevcut. Bizdeki örnekte EllipseGeometry'nin Center özelliği maskelenen Image nesnesinin merkez noktasına göre maskenin ne kadar uzaklıkta olacağına dair X ve Y değerlerini verirken RadiusX ve RadiusY'de yatay ve dikey olarak Ellipse'in yarıçapını tanımlıyor. Peki bu iki metod arasındaki diğer farklar nelerdir? Gelin olayın animasyon kısmına bir bakalım.

Maskelere animasyon katalım....

Herhangi bir nesnenin maskesine animasyon verebilmek için Expression Blend içerisinde animasyon modunda sol taraftaki araç çubuğundan Selection aracı yerine "Direct Selection" aracını kullanmalısınız. Söz konusu aracı seçtiğiniz anda seçili nesnenin maskesine ait tanımlı noktaları ekranda görebilirsiniz. Böylece rahatlıkla KeyFrame'ler yaratarak noktaların pozisyonlarını değiştirebilir ve maskeyi anime edebilirsiniz.

Maskemize animasyon verirken.

Biz örneğimizde maskedeki tüm noktaları toplu seçerek bir Ellipse şekliden tüm maskenin pozisyonunu değiştiren bir animasyon hazırlıyoruz. Böylece sanki bir ışık ile resme bakılıyormuş gibi resmin üzerinde geziliyor görüntüsü yaratıyoruz. Gelin Blend'in bizim için yarattığı XAML koduna göz atalım.

[XAML]

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</PointAnimationUsingKeyFrames>

</Storyboard>

Animasyonun kodu gördüğünüz gibi epey uzun. Aslında Blend kendi Clip'ini noktalardan yarattığı için mecburen bu noktaları tek tek anime ederek noktaların pozisyonlarını değiştirmek zorunda kalıyor. Bu esnada bizim Image'in XAML kodlarına bakarsan zaten minik bir değişiklik de dikkatimizi çekiyor.

[XAML]

<Image.Clip>

</PathFigure>

</PathGeometry>

</Image.Clip>

</Image>

Söz konusu Clip'in içindeki noktaları anime edebilmek için Blend de kısmen bizim taktiğe geri dönmüş ve bir PathGeometry yerleştirmiş. Oysa biz zamanında Ellipse koymuştuk :) Neden doğrudan o esnada EllipseGeometry koymadın? diye Blend'e sorarsak eminim cevabı basit olacaktır. "Nereden bilebilirim ki bu noktaları ayrı ayrı anime etmeyeceğinizi?" Aslında Blend haklı. Blend her ihtimali düşünmek zorunda çünkü o bir GUI :) Oysa biz kendi örneğimizde maske olarak Ellipse'in şeklini değiştirmeyeceğiz, sadece konumunu değiştireceğiz o nedenle bu sistem bize çok da uygun değil.

Yukarıdaki PointAnimation taglarına bakarsan tek tek Image nesnesinin Clip özelliğindeki değerin alınıp bu değerdeki noktaların Index numarası verilerek bulunduğunu ve pozisyonlarının değiştirildiğini görebilirsiniz. Performans açısından bir sıkıntısı olmasa da oluşan kodun okunabilirliliği çok zayıf olmakla beraber bu gibi bir Clip nesnesinin programatik olarak anime edilmesi de neredeyse imkansız. C# veya VB kodu ile tek tek bu noktaları bulup anime etmek işkenceden farksız olacaktır.

Peki ya bizim teknikle yaparsak?

Bizim esas istediğimiz maskenin konumunun değişmesiydi. Daha önceki kodlarımızda bir EllipseGeometry'yi maske olarak verebilmiştik. Bu EllipseGeometry nesnesinin Center özelliği maskenin konumunu belirliyordu. Bu durumda bizim kodumuzda bu özelliklerin anime edilmesi yeterli olacaktır. Fakat eğer Blend içerisinde bu animasyonu yapacak olursanız bizim EllipseGeometry'yi ısrarlı bir şekilde yukarıdaki gibi bir PathGeometry'ye çevirecek ve yine aynı animasyon kodunu üretecektir. Bu durumda bizim de programatik olarak bu maskeyi anime etmemiz yine zorlaşacaktır.

Sonuç olarak eğer bir nesnenin maskesinin pozisyonunu çok uğraşmadan kod ile anime edebilmek istiyorsanız Blend'in arayüzünden anime etmemeniz gerekiyor.

Programatik olarak maskeye erişmek...

Bir nesnenin maskesine programatik olarak erişmek için söz konusu nesnenin Clip özelliğini alıp uygu Geometry tipine cast edebilirsiniz. Sonrasında elinizde Geometry nesnesi ile ilgilenmeniz yeterli olacaktır. Oysa bir diğer seçenek de XAML içerisinde bu Geometry nesnesine el ile bir isim vermektir.

[XAML]

<Image.Clip>

</Image.Clip>

</Image>

Gördüğünüz gibi basit bir şekilde bizim EllipseGeometry nesnesine bir isim verdik. Artık kod tarafında bu isim ile EllipseGeometry'ye ulaşabilir ve Center veya RadiusX ve RadiusY özelliklerini değiştirebiliriz.

[VB]

Maskesi.Center = New Point(200, 200)

Böylece tamamen kod ile bu maskeyi anime etmek istediğinizde de rahatlıkla bu noktayı anime ederek maskenin pozisyonunun değiştiği bir animasyon üretebilirsiniz. Örnek bir kodu aşağıda inceleyebilirsiniz.

[VB]

Dim DBL As New PointAnimation

DBL.From = New Point(100, 100)

DBL.To = New Point(200, 200)

DBL.Duration = New TimeSpan(0, 0, 2)

Storyboard.SetTarget(DBL, Maskesi)

Storyboard.SetTargetProperty(DBL, New PropertyPath(EllipseGeometry.CenterProperty))

Dim SB As New Storyboard

SB.Children.Add(DBL)

SB.Begin()

[C#]

PointAnimation DBL = new PointAnimation();

DBL.From = new Point(100, 100);

DBL.To = new Point(200, 200);

DBL.Duration = new TimeSpan(0, 0, 2);

Storyboard.SetTarget(DBL, Maskesi);

Storyboard.SetTargetProperty(DBL, new PropertyPath(EllipseGeometry.CenterProperty));

Storyboard SB = new Storyboard();

SB.Children.Add(DBL);

SB.Begin();

Eğer bu animasyonu XAML tarafında temiz olarak yazmak isterseniz aslında pratik bir şekilde elle de yazabilirsiniz.

[XAML]

</PointAnimationUsingKeyFrames>

</Storyboard>

Animasyonumuz doğrudan Maskesi adındaki EllipseGeometry'yi hedef alarak onun Center property'sini anime ediyor.

Unutmayın ki bizim örneğimizde böyle bir optimizasyon yapabilmemizin nedeni maskenin sadece pozisyonunu değiştirmek istememiz. Eğer maskedeki her bir noktanın konumunu ayrı ayrı birbirinden bağımsız olarak anime etmek isterseniz Blend'in yaptığı teknikten farklı bir seçeneğiniz zaten yok.

Hepinize kolay gelsin.

Yazar Hakkında

Daron Yöndem

daron.yondem.com

DEVELOAD Yazılım şirketi kurucusu Daron Yöndem ASP.NET alanında aldığı MVP ünvanını son üç yıldır Silverlight alanında devam ettirmektedir. Microsoft Regional Director ünvanına da sahip olan Daron Yöndem’e 2009, 2010 ve 2011 yıllarında Microsoft tarafından “Gold Global Impact Award” ödülü verilmiştir. Microsoft TechEd, PDC, DevReach, Microsoft DevDays gibi uluslararası konferanslarda konuşmacı olan Daron Yöndem INETA (International .NET Association) Orta-Doğu Afrika Bölge Başkanlığı görevini sürdürürerek 262.000’i aşkın üyesi olan 58 sosyal topluluğa destek vermektedir. Üç Türkçe, üç İngilizce kitabı olan Daron Yöndem’in Wrox Publishing gibi uluslararası yayınevlerinden kitapları bulunmaktadır.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar