Erdem YILDIZ - WPF - Grafik İşlemlerinde Şekillerin(Shapes) Kullanımı2(210708)

Bu örneği daha da geliştirmeye çalışmanızı öneririm. Oldukça fazla eksiği var. Söz gelimi, mouse tuşuna basıp sürüklerken farklı renkte bir çizginin çıkartılarak gidilen rotanın gösterilmesi sağlanabilir. Mouse bırakıldığında ise asıl rengini alan rota ortaya çıkar. Üstelik örnek kodda sağ tuşa veya sol tuş kontrolü yapılmamıştır. Belkide klavyeden tuş kombinasyonları katarak sadece düz çizgi değil eğrilerin çizdirilmesinide sağlayabiliriz. Bu örneğin geliştirilmesini siz değerli okurlarıma bırakıyorum.

Gelelim Path bileşenine. Bu tip aslında kendi içerisinde birden fazla düz çizgi veya eğriyi barındırabilecek şekilde tasarlanmıştır. Temelde şekiller birbirleriyle uç uca eklenecen şekilde yeni bir grafik oluşturmaktadırlar. Dilerseniz örnek üzerinden ilerleyerek konuyu daha iyi anlamaya çalışalım. Bu amaçla aşağıdaki gibi bir XAML içeriği oluşturduğumuzu göz önüne alalım.

Path elementi içerisinde farklı şekillerin uç uca eklenmesi işini geometri tipleri üstlenmektedir. Bu geometri tipleride kendi içlerinde segmentler halinde şekilleri barındırmaktadır. Kullanılabilecek olan geometri tipleri aşağıdaki gibidir.

Örnekte söz konusu geometri tiplerinden PathGeometry kullanılmaktadır. PathGeometry elementinin altında yer alan tüm şekiller Segment anahtar kelimesi ile bitmektedir. Buna göre, BezierSegment ile başlayan şekiller dizisi sırasıyla, ArcSegment, LineSegment, QuadraticBezierSegment, PolyLineSegment ve PolyBezierSegment ile devam eder. Tüm bu alt elementleri farklı nitelikleri ile değişik çizgilerin oluşturulması sağlanmaktadır. BezierSegment elementinin nitekikleri sayesinde üç noktadan bükülmüş bir eğri çizimi yapılabilmektedir. ArcSegment elementinin nitelikleri ile, başlangıç koordiantları, genişlik yükseklik değerleri, eğilme açısı ve saat yönü yada saatin ters yönünde çizilecek yaylar oluşturulabilmektedir. Burada PolyLineSegment� i altında belirtilen noktalar uç uca bağlı düz çizgilerin oluşturulmasını sağlarken, PolyBezierSegment elementi altındaki noktalarda, uç uca eklenmiş eğrilerin oluşturulmasını sağlamaktadır. Örneğin tasarım zamanındaki çıktısı aşağıdaki gibi olacaktır.

Dikkat edilecek olursa, tüm çizgiler ister eğri ister düz olsunlar, uç uca eklenerekten birleştirilmiştir. Bu nedenle Path tipini örneğin harita gibi arka planlarda yolların birleştirilmesi amacıyla kullanabiliriz.

Bu yazımızda son olarak basit anlamda dönüştürme(Transform) işlemlerine bakıyor olacağız. Transform denilince aklımıza gelmesi gerekenler bir şeklin yön, büyüklük, düzlemsel koordinat gibi değerlerinin değiştirilmesidir. Bu sayede bir şekli herhangibir açıda döndürebilir, ebatlarını ayarlayabilir yada herhangibir düzlem üzerinde öteleyebiliriz. Transform işlemlerinde beş farklı tip rol oynamaktadır. Bu tipler aşağıdaki gibidir.

RotateTransform : Şeklin belirtilen bir açıda, kendi ekseninde yada belirtilen orijine göre farklı bir eksende döndürülmesini sağlamak için kullanılır. Söz gelimi bir şeklin farklı açılardan gösterilmesinin sağlanmasında önemli rol oynamaktadır.

ScaleTransform : Şeklin ebatlarının eşit oranda yada farklı oranlarda arttırılması yada azaltılmasında kullanılır. Örneğin Zoom işlemlerinde bu tip çok faydalı olacaktır.

SkewTransform : Şeklin bükülmesini yada eğilmesini sağlamak amacıyla kullanılan tiptir.

TranslateTransform : Şeklin x veya y düzlemleri üzerinde farklı noktalara ötelenmesi amacıyla kullanılan tiptir.

MatrixTransform : Resim işlemede önemli bir yere sahip olan matris algoritmalarının iki boyutlu şekiller üzerinde de uygulanabilmesini sağlayan tiptir. Diğer Transform tipleri ile gerçekleştirilmesi zor olan dönüştürmelerde kullanılmaktadır. Bu tipi ilerleyen yazılarımızda ele almaya çalışacağız.

Şimdi basit bir örnek ile RotateTransform ve ScaleTransform tiplerinin nasıl kullanılabileceğini incelemeye çalışalım. Bu amaçla XAML ve kod içeriklerini aşağıdaki gibi geliştirdiğimizi düşünelim.

XAML içeriği;

<Window x:Class="GrafiklerleCalismak.TransformKullanimi" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White" Title="Transform Kullanımı" Height="292" Width="330">
    <Grid Name="grdTahta" Width="309" Height="253">
        <Rectangle Fill="Gold" Stroke="Black" StrokeThickness="2" Name="dortgen" Width="100" Height="40" />
        <Slider Minimum="1" Maximum="5" ValueChanged="sldScale_ValueChanged" Height="21" Margin="110,14,89,0" Name="sldScale" VerticalAlignment="Top" />
        <Label Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Name="label1" VerticalAlignment="Top" Width="92">Scale Transform</Label>
        <Slider Height="21" Margin="110,49,89,0" Maximum="360" Minimum="0" Name="sldRotate" ValueChanged="sldRotate_ValueChanged" VerticalAlignment="Top" />
        <Label Height="23" HorizontalAlignment="Left" Margin="0,47,0,0" Name="label2" VerticalAlignment="Top" Width="92">Rotate Transform</Label>
    </Grid>
</Window>

Kod içeriği;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace GrafiklerleCalismak
{
    public partial class TransformKullanimi : Window
    {
        public TransformKullanimi()
        {
            InitializeComponent();
        }

        private void sldScale_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            TransformYap();
        }

        private void sldRotate_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            TransformYap();
        }

        private void TransformYap()
        {
            if (sldRotate != null
               && sldScale != null)
            {
                TransformGroup grp = new TransformGroup();
                grp.Children.Add(new ScaleTransform(sldScale.Value, sldScale.Value));
                grp.Children.Add(new RotateTransform(sldRotate.Value));
                dortgen.LayoutTransform = grp;
            }
        }
    }
}

Kullanıcı Slider kontrollerindeki çubuğu hareket ettirdikçe ekran üzerindeki dörtgenin kendi ekseni üzerinde dönmesi veya büyüklüğünün değişmesi amaçlanmaktadır. Bu, aynı şekle birden fazla dönüştürme işleminin uygulanmasını gerektirmektedir. Bir başka deyişle Rectangle nesne örneğinin LayoutTransform özelliğine hem ScaleTransform hemde RotateTransform nesne örneklerinin atanması gerekmektedir. Bunun için TransformGroup adı verilen nesne örneklerinden yararlanılır. TransformGroup tipi, sahip olduğu Children özelliği ile sunduğu koleksiyon içerisinde farklı Transform tiplerini taşıyabilmektedir. Dolayısıyla TransformYap metodu içerisinde bu şekilde bir kodlama yapılmaktadır. Uygulamanın çalışma zamanındaki görüntüsü aşağıdaki Flash animasyonunda olduğu gibidir.(Flash dosyasını görebilmek için Flasy Player� ın sisteminizde yüklü olması gerekmektedir. Dosya boyutu 220 Kb olduğundan yüklenmesi zaman alabilir.)

Böylece geldik bir makalemizin daha sonuna. Bu makalemizde WPF(Windows Presentation Foundation) uygulamalarında iki boyutlu grafik(2D Graphics) işlemlerinde kullanılabilecek şekilleri ele almaya çalıştık. Son olarak basit bir transform işleminin örnek bir dörtgen üzerinde nasıl gerçekleştirileceğine değindik. Buradaki bilgilerden yola çıkarak çok daha kolay grafik işlemleri gerçekleştirebileceğimizi ve eski Windows programlamadaki GDI+ ile zorlandığımız vakkaları daha etkin bir biçimde yapabileceğimizi görmüş bulunuyoruz. İlerleyen makalelerimizde WPF ile ilişkili başka konularada değiniyor olacağız.Tekrardan görüşünceye dek hepinize mutlu günler dilerim.

Örnek Uygulama için Tıklayın

Kaynak : http://www.csharpnedir.com/makalegoster.asp?Mid=786