29 Ocak 2014 Çarşamba

Inkscape ile Resimleri ve Fotoğrafları Vektörel Yapma


          Inkscape ile çok basit bir şekilde resimlerimizi ve fotoğraflarımızı vektörel hale getirebiliriz. Bunu için öncelikle Inscape açıkken File--> Import seçeneği ile vektörel yapmak istediğimiz fotoğrafı veya resmi ekleyelim. Aşağıdaki gibi bir uyarı gelecektir. Direk Embed seçili olarak Ok ile devam edelim.




          Resmimiz eklendiğine göre işlemimize başlayabiliriz. Resim seçili iken üstteki menüden Path--> Trace Bitmap seçeneğini şeçelim. Aşağıdaki gibi penceremiz açılacaktır.




          Açılan penceredeki seçenekleri inceleyecek olursak öncelikle sağdaki update butonuna basalım ve resmimizin işlemden sonra nasıl gözükeceğini görelim. Brigthness cutoff seçeneği bizim resmimizi siyah beyaz hale getirmiş durumda. Eğer siyah-beyaz vektörel olmasını istiyorsak bu seçeneği kullanabiliriz. Hemen yandaki Treshold seçenekleri ile görüntüdeki siyah yoğunluğunu istediğimiz şekilde ayarlayabiliyoruz. (Değişikliklerden sonra Update butonuna basmayı unutmayalım yoksa değişiklikleri tam gözlemleyemeyiz!) Edge detection ise sadece şekillerin etrafını çizmektedir. Color quantization ile belirli çizimlerin rengini siyah hale getirebiliriz. Bunu için hemen sağdaki Color seçeneğindeki 8 sayısını azaltırsak ne demek istediğimizi kolay bir şekilde anlayabilirsiniz.


          Invert image seçeneğinin yanına tik atarsanız resmimizdeki siyah olan çizgiler beyaz , beyaz olan herşeyde siyah olacaktır aşağıdaki gibi




           Single scan işlemleri böyleydi bizim asıl ilgilendiğimiz kısım Multiple scan kısmıdır. Bu kısım ile resimlerimizi renkli şekilde vektörel yapabiliyoruz. Britghness step seçeneği yukarıdaki gibi çalışıyor ben pek bir farkını görmedim. Gray ise gri tonlamalı bir resim oluşturuyor.
Color ise renkli hale getirmemizi sağlıyor. Alttaki seçeneklerden Smooth resmimizi bulanıklaştırıyor. Bu bizim istemeyeceğimiz bir şey olduğu için yanına tik atmanızı tavsiye etmiyorum. İkinci seçenek ise Stack scans , bu vektörel yapılırken taranan resimlerin bir yığın haline getiriliyor ve üstüste ekliyor ki buda bizim daha kaliteli sonuçlar almamızı sağlıyor. Üçüncüsü de Remove Background seçeneği , bu da programın otomatik belirlediği arka planın silinmesini ve silinen kısım tranparant bir görünüme kavuşmasını sağlıyor.

          Buraya kadar tamamsa şimdi de son olarak Scan yazan kısma bakalım. Burada resmimizin veya fotoğrafımızın kaç defa taranmasını istediğimizi belirliyoruz. 2 ile 256 arasında değişen bir tarama sayısı belirleyebiliyoruz. Buradaki tarama sayısı bizim daha etkili bir sonuç almamızı sağlayacaktır. Şimdi aşağıdaki örneğimize bakalım. Ayarlarımız tamam ise OK ile başlayabiliriz. İşlem bittiğinde OK tuşu tekrar aktifleşecektir. Oluşturulan resim ise ilk resmin üzerinde olacağından sürükleyerek ayırıp aradaki farkı görebiliriz.(Alttaki resimden üstte olanı vektörel alttaki ise orjinal resim)




          Eğer işlemciniz eski ise bu işlem işlemcinizi biraz yoracaktır. Tabiki bu tarama sayısına göre değişkenlik gösterir.

          Ayrıca bu tarama işlemi sonucunda şekiller program tarafından otomatik olarak gruplandırılıyor. Biz bu grubu üstteki menüden Object --> Ungroup ile grubu açabilir ve şekilleri istediğimiz gibi değiştirebiliriz. Sonuç olarak resmimiz vektörel hale geldi. Şimdi Save As seçeneği ile istediğimiz formatta dışarı aktarabilirz. Bu işlemlerden sonra svg , pdf .... gibi formatlarda dışa aktarmalıyız.




         Ben bu yaptığım örneğin pdf dosyasını diskten paylaşıyorum , iki resim arasındaki farkı görmek isteyenler göz atabilirler !

vektörel.pdf

24 Ocak 2014 Cuma

C# WPF Saat Uygulaması


                Bu WPF ile dördüncü uygulamamız. Bu uygulamamızda aşağıdaki gibi basit bir dijital saat yapıcaz.



                Öncelikler WPF projesi oluşturuyoruz. Daha sonra uygulamada kullanacağım resmi projeme dahil ediyorum. Bunun için Solution Explorer da projemin ismine sağ tıklıyorum , açılan menüden AddàNew Folder ile resmimi atacağım bir Resimler klasörü oluşturuyorum. Yine aynı şekilde oluşturduğum klasör üzerinde sağ tık ve AddàExisting Item ile resmimin olduğu konuma gidip daha önceden Inkscape ile hazırladığım resmimi ekliyorum.( Alttaki combobox içerisindeki seçeneği “All Files” yaparsak resmimiz gözükecektir! )



                Resmi eklediğimize göre uygulamaya başlayabiliriz. Uygulamamızda resim üzerinde saat gözükecek ve penceremiz gözükmeyecek bunun için Xaml kısmında Window etiketi içerisinde seçili iken WindowStyle  None olarak ayarlıyorum ve arka planın gözükmemesi için de AllowTransparancy  özelliğini etkinleştiriyorum. Daha sonra Mouse ile sola basılı şekilde resmimizi ekranda kaydırmak için MouseLeftButtonDown  ve sağa tık ile kapanmasını sağlamak için MouseRightDown yazarak otomatik olarak birer fonksiyon oluşturuyorum ve resmimi de ekliyorum. Sonuç olarak Xaml kodum aşağıdaki gibi oldu :

<Window x:Class="saat.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None"
        MouseLeftButtonDown="Window_MouseLeftButtonDown_1" MouseRightButtonDown="Window_MouseRightButtonDown_1">
    <Window.Background>
        <ImageBrush ImageSource="Resimler/deneme.png"/>
    </Window.Background>
    <Grid>
       
    </Grid>
</Window>

                Görüntüm aşağıdaki gibi oldukça büyük oldu bunu Mouse ile Window boyutunu istediğim gibi ayarlıyorum.



                Bu işlemden sonra saatin gözükeceği bir TextBox ı Grid etiketi içerisine yazıyorum  ve TextBox ın özelliklerini aşağıdaki gibi tanımlıyorum ve boyutunu yine Mouse ile istediğim gibi ayarlıyorum.

<Grid>
        <TextBox Name="saat" Background="Transparent" TextAlignment="Center"
                 FontWeight="Bold" Foreground="Red" FontSize="20" BorderThickness="0" Cursor="Arrow" Focusable="False"/>
</Grid>

                Xaml kısmı hazır şimdi de C# ile gerekli kodlara yazalım.

namespace saat
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private System.Windows.Threading.DispatcherTimer timer = new System.Windows.Threading.DispatcherTimer();

        public MainWindow()
        {
            InitializeComponent();
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.IsEnabled = true;
            timer.Tick += timer_say;
        }

        private void Window_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

        private void Window_MouseRightButtonDown_1(object sender, MouseButtonEventArgs e)
        {
            Application.Current.Shutdown();
        }
        private void timer_say(object sender, EventArgs e)
        {
            DateTime simdi = DateTime.Now;
            saat.Text = simdi.ToLongTimeString();
        }
    }
}


                Yukarıda bir timer tanımladık ve MainWindow içerisinde her bir saniye yenilenmesini sağladık.(TimeSpan.FromSecond()) timer_say adında kendimiz bir fonksiyon tanımladık ve bu fonksiyon ile o anki bilgisayar saatini almış olduk ve textbox ımıza aktardık. Sola basıldığında DragMove() fonk. ile sürükleyebilmeyi sağladık. Sağa basıldığında ise uygulamayı sonlandırdık. Uygulamamız hazır. Çalışır hali aşağıdakiler gibi.


            Bunlarda başka bir resimle yaptığım saat.





19 Ocak 2014 Pazar

C# WPF ile Paint Uygulaması


                
Bu WPF ile üçüncü uygulamamız. Bu uygulamamızda basit bir paint aracı yaparak WPF ile Mouse event larımızı nasıl kontrol ediyor ve kullanıyoruz bunlara bakıcaz.Yapıcağımız uygulamanın bitmiş hali aşağıdaki gibidir.



                Öncelikle yeni bir WPF projesi oluşturalım. Oluşturulan Projemizde ön tanımlı olarak bulunan Grid i siliyoruz ve Window etiketi içerisine Aşağıdaki gibi bir Canvas  ekliyoruz. Canvas ın ismini cnvs , arka plan rengini ise Azure olarak ayarlıyorum. Burada renkten ziyade Canvas a verdiğimiz isim önemlidir. Eğer ki isim vermezsek C# kodu yazarken Canvas a erişemeyiz.

<Canvas Name="cnvs" Background="Azure">

</Canvas>

                Canvas ı ekledikten sonra paint için kullanacağımız eventlara göz atalım. Düşündüğümüzde Mouse un sol butonuna tıkladığımızda ve basılı tutarak hareket ettirdiğimizde imlecin geçtiği noktalara bir doğru çizmesi gerekiyor , bıraktığımızda ise çizim işleminin de sonlanması gerekiyor. Xaml içerisinde  MouseLeftButtonDown , basılı iken hareket ettiriliyorsa MouseMove ve sol butona tıklama işlemi bitmişse MouseLeftButtonUp elementlerini tanımlamalı ve bunlara birer C# event handler fonksiyonları ekleyerek yapmak istediğimizi yapmış oluruz. Öncelikle bu elementleri yukarıdaki Canvas içerisinde yazıyorum , aşağıdaki ise son hali.

<Canvas Name="cnvs" Background="Azure" MouseLeftButtonDown="cnvs_MouseLeftButtonDown_1" MouseMove="cnvs_MouseMove_1" MouseLeftButtonUp="cnvs_MouseLeftButtonUp_1" MouseDown="cnvs_MouseDown_1">

</Canvas>

                Bu Elementlerin karşılığı olan tırnak içerisindeki fonksiyon adlarını program otomatik tamamlayacaktır. Buradakinden farklı isimlerde kullanabiliriz. Şimdi renk seçimi için çeşitli dörtgenler ekleyelim ve Xaml kısmındaki işimiz bitsin. Canvas etiketleri içerisine aşağıdaki gibi sırası ile kodlarımı ekliyorum.

<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="5" Fill="Red" />

                Rectangle ile dörtgenim oluşturuluyor. Stroke buradaki dörtgenin çerçeve rengini , Canvas.Left soldan ne kadar uzakta bulunduğunu , Canvas.Top ise üst taraftan ne kadar uzakta olduğu belirtiyor. Bu kodu kopyalayıp hemen altına yapıştırıp birkaç yeri değiştirerek en üstteki resim gibi çeşitli renkler elde ediyorum.

<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="5" Fill="Red" />
<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="35" Fill="Green" />
<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="65" Fill="Yellow" />
<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="95" Fill="White" />
<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="125" Fill="Blue" />
<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="155" Fill="Black" />

                Xaml kısmı hazır şimdi yaptığımız değişiklikleri kaydedip C# kısmına geçelim.
Öncelikle kullanacağım değişkenleri tanımlıyorum.

Point nokta;
bool durum;
Brush fırca = Brushes.Black;

                Nokta şuan ki imleç pozisyonunu , durum resim çizilecek mi çizilmeyecek mi , fırça da boyama rengini belirtiyor.

                Mouse sola tıklandığında aşağıdaki gibi durumu true , noktanın yerini belirliyorum ve CaptureMouse() ile imlecin bulunduğu yeri takip ediyorum.

private void cnvs_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
{
    durum = true;
    nokta = e.GetPosition(cnvs);
    cnvs.CaptureMouse();
}

                Mouse basılı iken hareket ettirildiğinde (x1,y1) ile (x2,y2) arasında çizgimin çizilmesini aşağıdaki kodlarla sağlıyorum.

private void cnvs_MouseMove_1(object sender, MouseEventArgs e)
{
     if (durum)
     {
        Line line = new Line();
        line.X1 = nokta.X;
        line.Y1 = nokta.Y;
        nokta = e.GetPosition(cnvs);
        line.X2 = nokta.X;
        line.Y2 = nokta.Y;
        line.Stroke = fırca;
        line.StrokeThickness = 10;
        cnvs.Children.Add(line);
     }
}

                Mouse sola artık tıklanmıyorsa aşağıdaki gibi durumu false yapıyorum ve ReleaseCaptueMouse() fonksiyonu ile imleci takip etmeyi bırakıyorum.

private void cnvs_MouseLeftButtonUp_1(object sender, MouseButtonEventArgs e)
{
    durum = false;
    cnvs.ReleaseMouseCapture();
}

                Dörtgenlerdeki renkleri aktifleştirmek için aşağıdaki gibi kodumu yazıyorum.

private void cnvs_MouseDown_1(object sender, MouseButtonEventArgs e)
{
    var rect = e.Source as Rectangle;
    if(rect != null)
    {
        fırca = rect.Fill;
    }
    else
    {
        durum = true;
        nokta = e.GetPosition(cnvs);
        cnvs.CaptureMouse();
    }
}


                Paint aracımız hazır hale geldi. Bir sonraki WPF yazımızda değişik bir uygulamayla devam ederiz. Sizlere kolay gelsin!