Facebook RSS Feed
 

.NET Micro Framework: Bitmap ile Grafik Çizdirmek

Bitmap sınıfı, Paint uygulamasında çizilen grafiksel nesnelerin mikrodenetleyici ile çizimini sağlar. Bitmap sınıfını kullanarak nokta, çizgi, elips, dikdörtgen çizebilir, dikdörtgenler üzerinde gradient efekti verebilir ve saydamlık değerini ayarlayabilirsiniz. Yine Bitmap sınıfını kullanarak değişik yazı tipi ve boyutlarda yazı yazdırmanız ve başka resim dosyalarını göstermeniz mümkündür.

Çalışma Mantığı

.NET MF ile zengin grafiksel uygulamalar geliştirmek için Window Application kullanmanız gerekir. Geliştireceğiniz uygulama birden çok ekrandan oluşmuyorsa ve basit bir yapıya sahipse, Console Application kullanarak da devam edebilirsiniz. Geliştirdiğiniz uygulamaları simulatör yada gerçek cihaz üzerinde çalıştırabilirsiniz. .NET MF 4 ile gelen simulatör 320x240 piksel çözünürlüğünü destekler. Genellikle geliştirme kitlerinde 320x240 yada 480x272 piksel çözünürlüğünde ekranlar kullanılmaktadır.

Bitmap ile çalışmak için hedeflediğiniz cihazın ekran çözünürlüğünde bir Bitmap nesnesi oluşturulur. Bu Bitmap üzerine istenilen çizimler yapılır. Eklenen her çizim, hafızadaki diğer grafiklerin üzerine eklenir. (Paint'te çizim yapar gibi.) İstenilen grafik elde edilince, Flush komutu ile hafızada oluşturulan Bitmap ekrana yansıtılır.

Bitmap Oluşturmak ve Ekrana Yansıtmak

Bitmap nesnesi oluşturabilmek için öncelikle Visual Studio 2010'da bir Micro Framework Console Application oluşturup, proje referansları arasına Microsoft.SPOT.Graphics.dll'i ekleyelim. Program.cs'in namespace'leri arasına da "using Microsoft.SPOT.Presentation.Media;" satırını eklediğimizde çizim yapmaya hazırız demektir.

Bitmap bmp = new Bitmap(320, 240);

Yukarıdaki satır ile ekran çözünürlüğünde bir Bitmap oluşturduk. Bu bmp üzerine çeşitli çizimler yapacağız. Ekrana yansıtmak için ise

bmp.Flush();

komutunu kullanacağız.

Çizgi Çizimi

- DrawLine komutu, iki nokta arasına çizgi çizdirir. Çizginin rengi, kalınlığı, başlangıç X ve Y koordinatı, bitiş X ve Y koordinatı parametrelerinin belirlenmesi gerekir.

bmp.DrawLine(ColorUtility.ColorFromRGB(255, 0, 0), //Kırmızı renkte
    1,        //1 piksel kalınlığında
    10, 10,   //Bağlangıç koordinatları X:10, Y:10
    300, 10); //Bitiş koordinatları X:300, Y:10
 
bmp.DrawLine(ColorUtility.ColorFromRGB(0, 255, 0), //Yeşil renkte
    1,        //1 piksel kalınlığında
    10, 20,   //Bağlangıç koordinatları X:10, Y:20
    200, 20); //Bitiş koordinatları X:200, Y:20

bmp.DrawLine(ColorUtility.ColorFromRGB(0, 0, 255), //Mavi renkte
    1,        //1 piksel kalınlığında
    10, 30,   //Bağlangıç koordinatları X:10, Y:30
    100, 30); //Bitiş koordinatları X:100, Y:30

bmp.Flush(); //bitmap'i ekrana yansıtalım

Rastgele Değişen Renkler

- Örnek kodda saniyede birkaç defa ekranın satır sayısı kadar rastgele renkte çizgi oluşturulup ekrana yansıtılması gösterilmiştir. Her güncellemede 240 x 3 kez (Her RGB kanalı için) random değer ürettiği için performans düşmanı bir uygulamadır. Yalnızca örnek için kullanın.

Random rnd = new Random();
while (true)
{
    for (int i = 0; i < 239; i++)
    {
        bmp.DrawLine(ColorUtility.ColorFromRGB((byte)rnd.Next(256), //Kırmızı değeri
            (byte)rnd.Next(256),  //Yeşil değeri (1-256)
            (byte)rnd.Next(256)), //Mavi değeri (1-256)
             1,       //1 piksel kalınlığında
             0, i,    //X:0, Y:i noktasından başlayan
             320, i); //X:320, Y:i noktasında biten
                }
    bmp.Flush(); //bitmap'i ekrana yansıtalım
    Thread.Sleep(100);
}

Elips ve Çember Çizimi

- Elips yada çember çizmek için DrawEllipse komutu kullanılır. Elipsin çizgi rengi, merkez noktasının X ve Y koordinatları, genişlik ve yükseklik parametreleri belirlenir.

bmp.DrawEllipse(ColorUtility.ColorFromRGB(255, 255, 255), //Beyaz renkte çizgi
    160, 120, //Merkez noktası X:160, Y:120
    150, 60); //Yatay:150 piksel genişliğinde, Dikey 60 piksel yüksekliğinde
 
bmp.DrawEllipse(ColorUtility.ColorFromRGB(255, 255, 255), //Beyaz renkte çerçeve
    160, 120, //Merkez noktası X:160, Y:120
    40, 40);  //Yatay:40 piksel genişliğinde, Dikey 40 piksel yüksekliğinde
bmp.Flush();  //bitmap'i ekrana yansıtalım

Dikdörtgen Çizimi

- Dikdörtgen çizimi, diğer şekillere göre daha çok parametre gerektirir. Çerçeve rengi, kalınlığı, sol üst noktanın X ve Y koordinatları, sağ alt kontanın X ve Y koordinatları dışında gradient ve saydamlık değerleri de belirtilmelidir. Saydamlık değeri %0 (tam görünür) olacaksa Bitmap.OpacityOpaque olarak belirlenmelidir.

bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 200, 0), //~Yeşil renkte çizgi
    1,        //1 piksel kalınlığında
    20, 20,   //Başlangıç koordinatları X:20, Y:20
    280, 200, //Genişliği:280, Yüksekliği:200 piksel
    5, 5,     //Kenarları Dikey:5, Yatay:5 piksel yuvarlatılmış
    Color.White, 0, 0, //Gradient başlangıç noktası: X:0, Y:0
    Color.White, 0, 0, //Gradient bitiş noktası: X:0, Y:0
    Bitmap.OpacityOpaque); //Saydamlık efekti katmadan (%100 görünür)
bmp.Flush();               //bitmap'i ekrana yansıtalım

Gradient

- Gradient, dikdörtgen içinde ilk renkten ikinci renge doğru kayma efekti uygular. Önce başlangıç renginin RGB değerleri ve başlangıç koordinatı belirlenir. Daha sonra ikinci renk ve bu renge doğru akışın koordinatı belirlenir. Belirtilen koordinatlar dikdörtgenin dışında ise, o koordinatlar dikkate alınarak dikdörtgen içerisine denk gelen renkler çizilir. Gradient efektinin uygulanabilmesi için kenar yuvarlatılma değerlerinin (corner rounding) 0 olması gereklidir.

bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 200, 0), //~Yeşil renkte çerçeve
    1,        //1 piksel kalınlığında
    10, 10,   //Başlangıç koordinatları X:10, Y:10
    300, 220, //Genişliği:200, Yüksekliği:220 piksel
    0, 0,     //Kenarları yuvarlatılmamış
    ColorUtility.ColorFromRGB(255, 0, 0), 10, 10,   //X:10, Y:10 noktasından
    ColorUtility.ColorFromRGB(0, 255, 0), 300, 220, //X:300, Y:220 noktasına gradient
    Bitmap.OpacityOpaque); //Saydamlık efekti katmadan (%100 görünür)
bmp.Flush();               //bitmap'i ekrana yansıtalım

Saydamlık Efekti

- Dikdörtgenler üzerinde 256 aşamalı saydamlık efekti uygulanabilir. (0: Tamamen saydam, 256: Tamamen görünür.) Örneğimizde en altta ekran çözünürlüğü boyutunda beyaz bir dikdörtgen üzerine 3 tane yarım saydamlıkta dikdörtgen çizdirilmiştir. Kesişen alanlar ise saydamlık sonucu renk değişimini gösterir.

//Bitmap'in tamamını beyaza boyayalım:
bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
    0,
    0, 0,
    320, 240,
    0, 0,
    ColorUtility.ColorFromRGB(255, 255, 255), 0, 0,
    ColorUtility.ColorFromRGB(255, 255, 255), 320, 240,
    Bitmap.OpacityOpaque);
 
//Sol üstteki dikdörtgen:
bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
    0,
    0, 0,
    180, 150,
    0, 0,
    ColorUtility.ColorFromRGB(255, 0, 0), 0, 0,
    ColorUtility.ColorFromRGB(255, 0, 0), 300, 220,
    128); //%50 Saydamlık efekti
 
//Sol alttaki dikdörtgen:
bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
    0,
    0, 100,
    180, 140,
    0, 0,
    ColorUtility.ColorFromRGB(0, 255, 0), 0, 0,
    ColorUtility.ColorFromRGB(0, 255, 0), 300, 220,
    128); //%50 Saydamlık efekti
 
//Sağdaki dikdörtgen:
bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
    0,
    140, 0,
    200, 240,
    0, 0,
    ColorUtility.ColorFromRGB(0, 0, 255), 0, 0,
    ColorUtility.ColorFromRGB(0, 0, 255), 300, 220,
    128); //%50 Saydamlık efekti
 
bmp.Flush(); //bitmap'i ekrana yansıtalım

Tek Noktanın Rengini Belirlemek

- Şekil çizdirmenin yanı sıra, tek bir noktanın rengini de belirlememiz mümkündür. Pikselin X ve Y koordinatları ve RGB renk parametrelerine göre boyama işlemi gerçekleşir.

//X:100, Y:100 noktasını beyaza boyayalım:
bmp.SetPixel(100, 100, ColorUtility.ColorFromRGB(255, 255, 255));
bmp.Flush(); //bitmap'i ekrana yansıtalım

Tek Noktanın Rengini Almak

Bitmap üzerindeki bir noktanın hangi renkte olduğunu öğrenmek için GetPixel komutu kullanılır. Bu komut Color türünde değer döndürür.

//X:100, Y:100 noktasının rengini debug mesajı olarak alalım:
Debug.Print(bmp.GetPixel(100, 100).ToString());
//Visual Studio Immediate Window'da görünecek değer: 16777215

Uygulama Kodları

Yukarıda söz ettiğimiz tüm çizimleri dörder saniye arayla gösterecek olan örnek uygulamayı simulatörde çalıştırıp sonuçları görebilirsiniz.

using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation.Media;
 
namespace MFGraphics1
{
    public class Program
    {
        public static void Main()
        {
            //Simulatörün ekran çözünürlüğünde bir bitmap oluşturalım:
            Bitmap bmp = new Bitmap(320, 240);
 
            #region Çizgi Çizimi
            bmp.DrawLine(ColorUtility.ColorFromRGB(255, 0, 0), //Kırmızı renkte
                1,        //1 piksel kalınlığında
                10, 10,   //Bağlangıç koordinatları X:10, Y:10
                300, 10); //Bitiş koordinatları X:300, Y:10
 
            bmp.DrawLine(ColorUtility.ColorFromRGB(0, 255, 0), //Yeşil renkte
                1,        //1 piksel kalınlığında
                10, 20,   //Bağlangıç koordinatları X:10, Y:20
                200, 20); //Bitiş koordinatları X:200, Y:20
 
            bmp.DrawLine(ColorUtility.ColorFromRGB(0, 0, 255), //Mavi renkte
                1,        //1 piksel kalınlığında
                10, 30,   //Bağlangıç koordinatları X:10, Y:30
                100, 30); //Bitiş koordinatları X:100, Y:30
 
            bmp.Flush(); //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Elips ve Çember Çizimi
            bmp.DrawEllipse(ColorUtility.ColorFromRGB(255, 255, 255), //Beyaz renkte çizgi
                160, 120, //Merkez noktası X:160, Y:120
                150, 60); //Yatay:150 piksel genişliğinde, Dikey 60 piksel yüksekliğinde
 
            bmp.DrawEllipse(ColorUtility.ColorFromRGB(255, 255, 255), //Beyaz renkte çerçeve
                160, 120, //Merkez noktası X:160, Y:120
                40, 40);  //Yatay:40 piksel genişliğinde, Dikey 40 piksel yüksekliğinde
            bmp.Flush();  //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Dikdörtgen Çizimi
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 200, 0), //~Yeşil renkte çizgi
                1,        //1 piksel kalınlığında
                20, 20,   //Başlangıç koordinatları X:20, Y:20
                280, 200, //Genişliği:280, Yüksekliği:200 piksel
                5, 5,     //Kenarları Dikey:5, Yatay:5 piksel yuvarlatılmış
                Color.White, 0, 0, //Gradient başlangıç noktası: X:0, Y:0
                Color.White, 0, 0, //Gradient bitiş noktası: X:0, Y:0
                Bitmap.OpacityOpaque); //Saydamlık efekti katmadan (%100 görünür)
            bmp.Flush();               //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Dikdörtgen - Gradient
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 200, 0), //~Yeşil renkte çerçeve
                1,        //1 piksel kalınlığında
                10, 10,   //Başlangıç koordinatları X:10, Y:10
                300, 220, //Genişliği:200, Yüksekliği:220 piksel
                0, 0,     //Kenarları yuvarlatılmamış
                ColorUtility.ColorFromRGB(255, 0, 0), 10, 10,   //X:10, Y:10 noktasından
                ColorUtility.ColorFromRGB(0, 255, 0), 300, 220, //X:300, Y:220 noktasına gradient
                Bitmap.OpacityOpaque); //Saydamlık efekti katmadan (%100 görünür)
            bmp.Flush();               //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Dikdörtgende Saydamlık
            //Bitmap'in tamamını beyaza boyayalım:
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
                0,
                0, 0,
                320, 240,
                0, 0,
                ColorUtility.ColorFromRGB(255, 255, 255), 0, 0,
                ColorUtility.ColorFromRGB(255, 255, 255), 320, 240,
                Bitmap.OpacityOpaque);
 
            //Sol üstteki dikdörtgen:
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
                0,
                0, 0,
                180, 150,
                0, 0,
                ColorUtility.ColorFromRGB(255, 0, 0), 0, 0,
                ColorUtility.ColorFromRGB(255, 0, 0), 300, 220,
                128); //%50 Saydamlık efekti
 
            //Sol alttaki dikdörtgen:
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
                0,
                0, 100,
                180, 140,
                0, 0,
                ColorUtility.ColorFromRGB(0, 255, 0), 0, 0,
                ColorUtility.ColorFromRGB(0, 255, 0), 300, 220,
                128); //%50 Saydamlık efekti
 
            //Sağdaki dikdörtgen:
            bmp.DrawRectangle(ColorUtility.ColorFromRGB(0, 0, 0),
                0,
                140, 0,
                200, 240,
                0, 0,
                ColorUtility.ColorFromRGB(0, 0, 255), 0, 0,
                ColorUtility.ColorFromRGB(0, 0, 255), 300, 220,
                128); //%50 Saydamlık efekti
 
            bmp.Flush(); //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Tek Noktanın Rengini Belirlemek
            //X:100, Y:100 noktasını beyaza boyayalım:
            bmp.SetPixel(100, 100, ColorUtility.ColorFromRGB(255, 255, 255));
            bmp.Flush(); //bitmap'i ekrana yansıtalım
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
 
            #region Noktanın Rengini Almak
            //X:100, Y:100 noktasının rengini debug mesajı olarak alalım:
            Debug.Print(bmp.GetPixel(100, 100).ToString());
            //Visual Studio Immediate Window'da görünecek değer: 16777215
            #endregion
 
            Thread.Sleep(4000); //4 Saniye ara
            bmp.Clear();        //bmp'yi temizleyelim
 
            #region Renk çizgileri uygulaması
            Random rnd = new Random();
            while (true)
            {
                for (int i = 0; i < 239; i++)
                {
                    bmp.DrawLine(ColorUtility.ColorFromRGB((byte)rnd.Next(256), //Kırmızı değeri
                        (byte)rnd.Next(256),  //Yeşil değeri (1-256)
                        (byte)rnd.Next(256)), //Mavi değeri (1-256)
                        1,       //1 piksel kalınlığında
                        0, i,    //X:0, Y:i noktasından başlayan
                        320, i); //X:320, Y:i noktasında biten
                }
                bmp.Flush(); //bitmap'i ekrana yansıtalım
                Thread.Sleep(100);
            }
            #endregion
        }
    }
}

Debug Zamanı

Uygulamayı simulatör üzerinde çalıştırdığınızda dörder saniye arayla çizimlerin yapıldığını ve en sonunda sürekli olarak random renklerde çizgilerin çizildiğini göreceksiniz.

Visual Studio 2010 için kaynak kodları 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