Facebook RSS Feed
 

.NET Micro Framework: WPF Uygulamalarında InkCanvas Kullanımı

InkCanvas, kalem kullanarak dokunmatik ekran üzerinde çizim yapılmasını sağlar. Ekranın tamamını yada belirli bir bölgesini çizim için ayırabiliriz. Bu şekilde akıllı cihazlar üzerinde not defteri, karalama kağıdı gibi uygulamalar geliştirmemiz mümkün olur. Örnek uygulamamızda önce InkCanvas oluşturmayı, sonra da butonlarla rengi değiştirilebilen bir demo yapımını inceleyeceğiz.

Geliştireceğimiz uygulama ile simulatör üzerinde resimdeki gibi çizim yapmamız mümkün olacak:

-

Adım 1: InkCanvas Oluşturmak

Önce Visual Studio üzerinden Micro Framework Window Application oluşturalım. Proje referansları arasına "Microsoft.SPOT.Touch.dll" ve "Microsoft.SPOT.Ink.dll" kütüphanelerini ekleyelim. İlk örnekte mavi renkle çizim yapılabilen temel bir uygulama üzerinde duracağız.

Program.cs

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Touch;
using Microsoft.SPOT.Ink;
 
namespace MF_WPF_InkCanvas
{
    public class Program : Microsoft.SPOT.Application
    {
        public static void Main()
        {
            Program myApplication = new Program();
            Window mainWindow = myApplication.CreateWindow();
 
            // Touch verisinin toplanma metodunu belirleyelim (Native sürücü yada Managed):
            TouchCollectorConfiguration.CollectionMethod = CollectionMethod.Native;
 
            // Touch verisinin toplanma modunu belirleyelim
            // (InkOnly, GestureOnly yada InkAndGesture):
            TouchCollectorConfiguration.CollectionMode = CollectionMode.InkOnly;
 
            // Touch özelliğini başlatalım:
            Touch.Initialize(myApplication);
 
            myApplication.Run(mainWindow);
        }
 
        private Window mainWindow;
 
        public Window CreateWindow()
        {
            // Ekran çözünürlüğünde bir Window objesi oluşturalım:
            mainWindow = new Window();
            mainWindow.Height = SystemMetrics.ScreenHeight;
            mainWindow.Width = SystemMetrics.ScreenWidth;
 
            // 320 x 240 boyutunda bir InkCanvas oluşturalım:
            // InkCanvas, üzerinde çizim yapmamızı sağlayan UIElement'dir.
            InkCanvas inkCanvas = new InkCanvas(0,    // Soldan başlangıç noktası
                                                0,    // Yukarıdan başlangıç noktası
                                                320,  // Genişlik
                                                240,  // Yükseklik
                                                0);   // Çerçeve kalınlığı 
 
            // InkCanvas'ın yatay ve dikey hizzalamasını belirleyelim:
            inkCanvas.HorizontalAlignment = HorizontalAlignment.Center;
            inkCanvas.VerticalAlignment = VerticalAlignment.Center;
 
            // Çizim rengini belirleyelim:
            DrawingAttributes drawingAttributes = new DrawingAttributes();
            drawingAttributes.Color = ColorUtility.ColorFromRGB(0, 0, 255); // Mavi: R:0, G:0, B:255
 
            // Çizim özelliklerini InkCanvas'a bağlayalım:
            inkCanvas.DefaultDrawingAttributes = drawingAttributes;
 
            // Paneli Main Window'un alt elemanı olarak ekleyelim:
            mainWindow.Child = inkCanvas;
 
            // Pencereyi görünür yapalım:
            mainWindow.Visibility = Visibility.Visible;
 
            return mainWindow;
        }
    }
}

Bu uygulamayı çalıştırdığınızda, ekran üzerinde mavi renkle çizim yapabileceksiniz.

Adım 2: Daha Gelişmiş Bir InkCanvas Uygulaması

Bu örnekte ise GPIO Button Input Provider sınıfını da kullanarak kalem rengini değiştirmeyi, seçili rengi debug mesajı olarak almayı ve InkCanvas'ı temizlemeyi inceleyeceğiz. (GPIO Button Input Provider sınıfıyla ilgili detayları önceki yazılarımda bulabilirsiniz.)

Simulatör üzerindeki yön butonlarına bastığımızda, InkCanvas'a bağlı DrawingAttributes renk değerini değiştireceğiz. Fakat InkCanvas'ı temizlediğimizde yalnızca çizimler değil, renk ayarları da silinecek. Bunu önlemek için temizleme komutundan önce geçerli rengi geçici bir Color değişkenine atayıp temizleme işleminden sonra geri yükleyeceğiz. Kodlarımıza göz atalım:

Program.cs

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Touch;
using Microsoft.SPOT.Ink;
using Microsoft.SPOT.Hardware;
 
namespace MF_WPF_InkCanvas
{
    public class Program : Microsoft.SPOT.Application
    {
        public static void Main()
        {
            Program myApplication = new Program();
            Window mainWindow = myApplication.CreateWindow();
 
            // GPIO pinlerini butonlara bağlayan GPIO Button Input Provider objesi oluşturalım:
            GPIOButtonInputProvider inputProvider = new GPIOButtonInputProvider(null);
 
            // Touch verisinin toplanma metodunu belirleyelim (Native sürücü yada Managed):
            TouchCollectorConfiguration.CollectionMethod = CollectionMethod.Native;
 
            // Touch verisinin toplanma modunu belirleyelim
            // (InkOnly, GestureOnly yada InkAndGesture):
            TouchCollectorConfiguration.CollectionMode = CollectionMode.InkOnly;
 
            // Touch özelliğini başlatalım:
            Touch.Initialize(myApplication);
 
            myApplication.Run(mainWindow);
        }
 
        private Window mainWindow;
 
        public Window CreateWindow()
        {
            // Ekran çözünürlüğünde bir Window objesi oluşturalım:
            mainWindow = new Window();
            mainWindow.Height = SystemMetrics.ScreenHeight;
            mainWindow.Width = SystemMetrics.ScreenWidth;
 
            // 320 x 240 boyutunda bir InkCanvas oluşturalım:
            // InkCanvas, üzerinde çizim yapmamızı sağlayan UIElement'dir.
            InkCanvas inkCanvas = new InkCanvas(0,    // Soldan başlangıç noktası
                                                0,    // Yukarıdan başlangıç noktası
                                                320,  // Genişlik
                                                240,  // Yükseklik
                                                0);   // Çerçeve kalınlığı
 
            // InkCanvas'ın yatay ve dikey hizzalamasını belirleyelim:
            inkCanvas.HorizontalAlignment = HorizontalAlignment.Center;
            inkCanvas.VerticalAlignment = VerticalAlignment.Center;
 
            // Çizim rengini belirleyelim:
            DrawingAttributes drawingAttributes = new DrawingAttributes();
            drawingAttributes.Color = ColorUtility.ColorFromRGB(0, 0, 255); // Mavi: R:0, G:0, B:255
 
            // Çizim özelliklerini InkCanvas'a bağlayalım:
            inkCanvas.DefaultDrawingAttributes = drawingAttributes;
 
            // InkCanvası Main Window'un alt elemanı olarak ekleyelim:
            mainWindow.Child = inkCanvas;
 
            // Button Handler'ı tüm butonlara ve InkCanvas'a bağlayalım:
            inkCanvas.AddHandler(Buttons.ButtonUpEvent, new RoutedEventHandler(OnButtonUp), false);
 
            // Pencereyi görünür yapalım:
            mainWindow.Visibility = Visibility.Visible;
 
            // Button Focus'u InkCanvas'a ayarlayalım.
            Buttons.Focus(inkCanvas);
 
            return mainWindow;
        }
 
        private void OnButtonUp(object sender, RoutedEventArgs evt)
        {
            InkCanvas inkCanvas = (InkCanvas)sender;
            ButtonEventArgs e = (ButtonEventArgs)evt;
 
            // Renk değişimi için geçici çizim özellikleri oluşturalım:
            DrawingAttributes drawingAttributes = new DrawingAttributes();
 
            // Buton verisine ulaşalım:
            switch (e.Button)
            {
                case Button.VK_LEFT: // Sol buton: Kalemi kırmızı yap
                    drawingAttributes.Color = ColorUtility.ColorFromRGB(255, 0, 0); // Kırmızı
                    Debug.Print("Kalem rengi: Kırmızı");
                    break;
 
                case Button.VK_RIGHT: // Sağ buton: Kalemi mavi yap
                    drawingAttributes.Color = ColorUtility.ColorFromRGB(0, 0, 255); // Mavi
                    Debug.Print("Kalem rengi: Mavi");
                    break;
 
                case Button.VK_UP: // Üst buton: Kalemi yeşil yap
                    drawingAttributes.Color = ColorUtility.ColorFromRGB(0, 255, 0); // Yeşil
                    Debug.Print("Kalem rengi: Yesil");
                    break;
 
                case Button.VK_DOWN: // Alt buton: Kalemi siyah yap
                    drawingAttributes.Color = ColorUtility.ColorFromRGB(0, 0, 0); // Siyah
                    Debug.Print("Kalem rengi: Siyah");
                    break;
 
                case Button.VK_SELECT: // Orta buton: Çizimi temizle
                    // Çizim temizlendiğinde InkCanvas'a bağlı özellikler de temizlenecektir.
                    // Bu nedenle InkCanvas'ın o anki kalem rengini bir renk değişkenine kopyalayalım:
                    Color tempColor = inkCanvas.DefaultDrawingAttributes.Color;
 
                    // InkCanvas'ı temizleyelim:
                    inkCanvas.Clear();
 
                    // Kopyaladığımız rengi çizim özelliklerine aktaralım:
                    drawingAttributes.Color = tempColor;
 
                    Debug.Print("Çizim temizlendi.");
                    break;
 
                default:
                    break;
            }
 
            // Değiştirdiğimiz çizim özelliklerini InkCanvas'a bağlayalım:
            inkCanvas.DefaultDrawingAttributes = drawingAttributes;
        }
    }
}

Uygulamayı çalıştırdığınızda, kırmızı, mavi, yeşil ve siyah kalem kullanarak çizim yapabileceğiniz bir cihazınız (yada simulatör uygulamanız) olacak. Renk değişiminde aynı zamanda güncel renk adı Visual Studio'ya debug mesajı olarak gönderilecek.

Visual Studio Output Window

Kalem rengi: Mavi
Kalem rengi: Kırmızı
Kalem rengi: Yesil
Çizim temizlendi.
Kalem rengi: Siyah

Uygulama kodlarını buradan indirebilirsiniz.




 
Hoşgeldiniz!
Son güncelleme: 25.12.2016
-
Yeni Teknik Yazılar
Latte Panda İncelemesi
Turta IoT HAT İncelemesi
USB Gamepad Kullanımı
GPIO Kullanımı
VEML6075 UV Sensör Kullan...
-
İlgili Gruplar
.NET MF ve Gadgeteer FB Grubu
İst. IoT & Wearables Meet-up
-
 

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.Copyright © 1999 - 2017, Umut Erkal. Bu materyal, "Creative Commons Public Licence" ile sunulmuştur.
Kaynak göstererek ve ücretsiz olarak, aynı şartlar altında paylaşabilir ve kullanabilirsiniz. | Kullanım Sözleşmesi