Silverlight 1.0 ve InkPresenter kullanımı

0 dakikada yazıldı

6295 defa okundu

Düzenle

Silverlight 1.0 ile beraber gelen ve hakkında belki de en az bahsedilen
kontrollerden biri de InkPresenter kontrolüdür. InkPresenter
kontrolü ile web ortamında TabletPC'lerdeki kalemler ile yazı girişi ve
doğrudan dokunmatik ekranlarda elle çizimlerin yapılabilmesi
sağlanabilir. Böylece kullanıcılar web sitenizde görsel öğeler ,
fotoğraflar, videolar üzerine bile kolaylıkla notlar alabilecektir.

Silverlight ile beraber gelen InkPresenter yapısında her şey
StylusPoint'ler şeklinde yaratılır. Birden çok StylusPoint bir
StylusPointCollection içerisinde StylusPoints adı altında
saklanır. Her bir Collection'dan bir Stroke oluşturulur ve
Stroke'lar da StrokeCollection ile toparlanır. Tüm bu yapıların
her birinin kendine has özellikleri, metodları bulunur. Çok fazla teknik
bilgiye boğulmadan hemen bir uygulama yaparak InkPresenter nesnesini
nasıl kullanabileceğimize bakalım.

İlk olarak sahneye bir InkPresenter koyarak fonunu da beyaz rengine
ayarlıyoruz. Ayrıca InkPresenter nesnesinin toplam üç farklı event'ını
(MouseLeftButtonDown, MouseMove ve MouseLeftButtonUp) farklı JavaScript
fonksiyonların da bağlamamız gerekiyor. Elimizdeki XAML aşağıdaki
şekilde sonlanıyor.

<Canvas

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

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

  Width="300"
Height
="300"

  Background="White"

  x:Name="Page"

  >

  <InkPresenter
Background
="White" Width="303"
Height
="300" Canvas.Left="0"
Canvas.Top
="0"

  MouseLeftButtonDown="MouseDown"
MouseMove
="MouseMove" MouseLeftButtonUp="MouseUp"/>

</Canvas>

Toplam üç farklı event kullanacağız. MouseLeftButtonDown ile farenin
sol tuşuna basıldığı anda çizim yapmaya başlayacağız. MouseMove yani
fare hareket ettikçe yaptığımız çizime yeni noktalar ekleyeceğiz,
MouseLeftButtonUp ile farenin tuşu serbest bırakıldığında çizimi
tamamlayacağız.

var YeniStroke;

İlk olarak yukarıdaki şekilde tüm JavaScript event'larımızda kullanılmak
üzere global bir YeniStroke değişkeni tanımlıyoruz. Fare ile
basıldığında bu değişken üzerinden yeni bir çizgi yaratacağız ve fare
hareket ettikçe bu değişkeni kontrol ederek eğer yeni bir çizgi
yaratmışsak çizgiye yeni noktalar ekleyeceğiz. Eğer yeni bir çizgi
yaratmamışsak demek ki farenin düğmesine basılmamış. Gelelim hemen
farenin düğmesine ilk tıklandığında çalışacak olan
MouseLeftButtonDown durumunda neler yapacağımıza.

function MouseDown(sender,args)

{

  sender.CaptureMouse();

  //Çizgmizi yaratalım

  YeniStroke = sender.getHost().content.createFromXaml("<Stroke/>");

  //Çizginin özelliklerini belirmeke için
gerekli nesneyi yaratalım.

  var StrokeSekli =
sender.getHost().content.createFromXaml("<DrawingAttributes/>");

  //Yarattığımız çizgi özelliklerini
çizgimize aktaralım.

  YeniStroke.DrawingAttributes = StrokeSekli;

  //Çizgi özelliklerini belirleyelim.

  YeniStroke.DrawingAttributes.Width = 4;

  YeniStroke.DrawingAttributes.Height = 4;

  YeniStroke.DrawingAttributes.Color = "Black";

 

  //Yeni gelen Stylus noktaları çizgimize
ekleyelim.

  YeniStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(sender));

  //Çizgimizi InkPresenter kontrolüne
ekleyelim.

  sender.Strokes.add(YeniStroke);

}

Olabildiğince satır içi yorumlarla tek tek neler yaptığımızı anlatmaya
çalıştım. Genel olarak başlangıçta bir çizgi yaratmamız gerekiyor.
Stroke yarattıktan sonra onun özelliklerini belirlemek üzere
DrawingAttributes yaratarak Stroke içerisine ekliyoruz. Sonrasında
MouseLeftButtonDown durumuna parametre olarak gelen args
değişkeni üzerinden GetStylusPoints metodu ile çizilen noktaları
alarak kendi çizgimize ekliyoruz. En sonunda da çizgimizi
InkPresenter içerisine yerleştiriyoruz. Sıra geldi fare hereket
ettikçe çalışacak olan MouseMove durumundaki kodu yazmaya.

function MouseMove(sender,args)

{

  //En son eklenen çizgi hala çiziliyor
mu?

  if (YeniStroke!=null)

  {

    //En son eklenen çizgiye yeni gelen
noktaları ekleyelim.

   
YeniStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(sender));

  }

}

Fare hareket ettikçe acaba daha önce yeni bir çizgi yaratmaya başladık
mı diye ufak bir kontrol yapıyoruz. Eğer yaratmaya başlamadıysak zaten
yapacak bir şey yok. Ama eğer ki yeni bir çizgi yaratmaya başlamışsak
bunu global değişkenimize de aktarmışız demektir. Bu durumda yeni gelen
noktaları da söz konusu çizgiye eklememiz gerekir. Yine
MouseLeftButtonDown'da olduğu gibi GetStylusPoints ile yeni
noktaları alarak çizgimize ekliyoruz. Son olarak sıra geldi
MouseLeftButtonDown durumunu yazmaya.

function MouseUp(sender,args)

{

  //Çizgi bitti. Değişkeni yok et.

  YeniStroke = null;

  sender.releaseMouseCapture();

}

Farenin sol düğmesi bırakıldığı anda biz de global değişkenimizi yok
ediyoruz. Böylece artık fare ekranda hareket edildiğinde çizgiye yeni
noktalar eklenmeyecek.

InkPresenter çizimi fare ile bu kadar olur :)
InkPresenter çizimi fare ile bu kadar olur :)

İşte hepsi bu kadar, InkPresenter'ı bir resim (Image) veya video
(MediaElement) üzerine şeffaf olarak yerleştirerek de kullanabilirsiniz.

Hepinize kolay gelsin.