Alpha Blending (Yarı Saydamlık)
GDI+ bir çok yeniliklere sahip. Bunlardan biri de Alpha Blending. Çok kolay bir şekilde renklerle kantmanlar oluşturabilir ve efekler tasarlayabiliriz. Hemen küçük bir örnek yapalım. Örnegimizde belirli bir alanı kırmızıya boyayıp, alttakı kırmızı alanı ezmeden üzerine sarıya boyanmış bir alan daha ekleyelim. Uygulamamızın OnPaint olayına aşağıdaki kodu yazalım :
Graphics g = e.Graphics;g.FillRectangle(new SolidBrush(Color.Red), 10, 10, 100, 100);g.FillRectangle(new SolidBrush(Color.FromArgb(180, Color.Yellow)), 40,40, 100, 100);
Örneğimizi inleyecek olursak, ilk adımda daha önce bahsettiğimiz gibi Graphics nesnesini alıyoruz. Sonraki adımda belirtilen alanı kırmızıya boyuyoruz. Şimdi ise katman efekti oluşturmaya geldi. Son satırda belirli alanı sarıya boyuyoruz ama diğerinden farklı olarak fırça (Brush) rengimizi saydam olarak belirtiyoruz. Bunu ise Color yapısının (struct) FromArgb(…) fonksiyonu ile sağlıyoruz. Bu fonksiyonun ilk parametresi renklerimizin saydamlık özelliğini belirtir. Bu parametre 0 ile 255 arasında değerler alabilir. 0 a doğru yaklaştıkca saydamlık artar 255 doğru yaklaştıkça saydamlık azalır.
Sonuç :
Fırçalar (Brushes)
Fırçamızla istersek şekilleri yada belirlediğimiz alanları boyayabiliriz. Fırçmızın ucunda boya, desen yada bir resim olabilir ve bunlarla şekilllerimizi boyayabiliriz (Yavaş yavaş Picasso'ya benzemeye başladık). İlk örneğimizde fırçamızın ucunu bir boya kutusuna batırıyoruz ve başlıyoruz belirli bir alanı boyamaya:
Graphics g = e.Graphics;g.FillRectangle(new SolidBrush(Color.Red), 0, 0, 100, 100);
Sonuç :
Şimdi biraz değişik fırçalarla çalışalım. Örneğin hatched brush. Çizgili desenlerden oluşan bu fırçamızla şimdi basit bir boyama yapalım. Ama öncelikle yeni bir fırça almamız gerekli(yani oluşturacağız). Bunu için uyulamamıza using System.Drawing.Drawing2D; satırını ekleyelim.Çünkü kullanacağımız özel fırçalarımız bu isim uzaylarını içindeler. Bu örneğimizde bir dairenin içini çizgili fırçamızla boyayalım.
Graphics g = e.Graphics;HatchBrush hb = new HatchBrush(HatchStyle.ForwardDiagonal, Color.Yellow,Color.FromArgb(100, Color.Blue));g.FillEllipse(hb, 0, 0, 100, 100);
Şimdi kodumuzu inceleyelim: 2. satırda yeni bir fırça oluşturuyoruz. İlk paremetremiz fırçamızın çizgi şeklini belirtir. 10 larca seçeneğimiz var stil olarak. Bu örnekteki seçeneğimiz HathchStyle.ForwardDiagonal. Çizgilerimiz sol üst köşeden sağ alt köşeye dogru çizilecektir. HathchStyle' a birkaç örnek verecek olursak DashedVertical (Yukardan aşağı kesik kesik çizgiler), Divot(çim görünümlü küçük çizgiler), DiagonalCross (baklava dilimleri oluşturacak şelikde çapraz çizgiler) vs. İkinci parametre fırçadaki çizgi rengini ve son parametre de fırçamızın zemin rengini belirtir.Dikkat ederseniz zemin rengine de yarı saydam (Alpha Blending) özelliği verebiliyoruz. Son adımda ise boyanacak dairesel alanımızı belirlemek için FillEllipse fonksiyonunda yararlanacağız. Bu fonksiyonun ilk parametresi fırçamızı belirtir. İkinci ve üçüncü parametre şeklimizi çizilmeye başlanacağı koordinatı, 3. parametre şeklimizin genişliği ve son parametre ise şeklin yüksekliğini belirtir(3. ve 4. parametreleri değiştirerek eliptik şekiller oluşturabiliriz).
Sonuç :
Diğer fırça türü olan TextureBrush, belirlediğimiz alanı herhangi bir resim dosyası ile boyamızda kullalırız. Örneğin bir alan belirleyelim ve bu alanı herhangi bir bmp dosyası ile boyayalım. (Şöyle düşünelim, boya kutumuzda boya olmasında bizim belirlediğimiz bir resim dosyası olsun.)
Graphics g = e.Graphics;Image img = new Bitmap("group.bmp");Brush brush = new TextureBrush(img);g.FillRectangle(brush, 0, 0, 100, 100);
Kodumuzu inceleyecek olursak, ilk olarak Graphics nesnesi elde ettik. Sonra Image sınıfını kullanarak boyamada kullanılacak resmimizi belirliyoruz. "group.bmp" dosyanın yolunu verir. Bu "C:\\windows\\xx.bmp" seklinde de olabilir. 3. adımda brush isimli bir fırça oluşturuyoruz. Fırçamızı TextureBrush sınıfını kullanarak elde ediyoruz. Artık fırçamız belirlediğimiz resim dosyasıyla boyamak için hazır. Son adımda boyanacak alanı belirleyip FillRectagle(…) ile bu alanı resim dosyamızla boyuyoruz.
Sonuç :
Kullanışlı diğer bir fırça türümüz de LinearGradientBrush'dır. Bu fırça iki renk alır ve kademeli olarak bir renkten diğer renge yumuşak bir geçiş yapar. Hemen bir örnekle görelim.
Graphics g = e.Graphics;Rectangle r = new Rectangle(0,0, 230, 100);LinearGradientBrush lb = new LinearGradientBrush(r, Color.Red, Color.Yellow,LinearGradientMode.Horizontal);g.FillRectangle(lb, r);
Bu örnekte, belirlediğimiz alanı yumuşak bir geçişle (kırmızıdan sarıya) boyamış oluyoruz. Bu fırçamızı LinearGradientBrush sınıfından yararlanarak oluşturuyoruz. İlk parametremiz olan r, fırçamızın sınırlarını belirler. Daha pratik olarak şöyle de düşünebiliriz. Fırçamızı duvara sürdüğümüzde ne kadarlık bir alan boyansın? İşte bu alanı ilk parametre ile veriyoruz. İkinci ve üçüncü parametreler kullanacağımız renkleri belirtir. Son parametre ise renkler arasındaki geçişin doğrultusunu belirtir. 4 değer alabilir :
Kalemler (Pens)
Programlarımızda da kalemleri kullarak doğrular, eğriler çizebiliriz. Kalemimizin PenType, DashStyle, Width, Color, ve EndCap özelliklerini değiştirerek kalemimizi özelleştirebiliriz. Kısa bir örnek yapalım. Amacımız formumuza noktalarla eğri çizdirmek olsun. Kalem rengimiz de mor olsun. Kalem ucumuzu 5 olsun. Hatta çizdiğimiz eğrinin başlangıç ucunda bir üçgen sonunda ise bir ok olsun. Hemen kodumuzu yazmaya başlayalım(Formumuzun OnPaint olayına aşağıdaki kodu yazalım).
Graphics g = e.Graphics;Pen penExample = new Pen(Color.FromArgb(150, Color.Purple), 15);penExample.DashStyle = DashStyle.Dot;penExample.StartCap = LineCap.Triangle;penExample.EndCap = LineCap.ArrowAnchor;g.DrawCurve(penExample, new Point[] {new Point(10, 100), new Point(40,10), new Point(70, 100), new Point(110, 100), new Point(140, 10), new Point(170, 100),});
İlk adımda her zamanki gibi işlemlerimizi yapmak için Graphics nesnesi elde ediyoruz. Daha sonra ise eğri çiziminde kullanacağımız kalemimizi oluşturuyoruz. Bunun için Pen sınıfında yararlanıyoruz. İlk parametremiz kalmemizin rengi, ikinci parametresi ise kalemimizin kalınlığını belirtir. Sonraki adımda kalemimizin stilini DashStyle özelliğine DahStyle.Dot değerini atayarak belirleyelim. Bu özellik eğrimizin noktalı olarak görünmesini sağlayacaktır. Sonraki adında StartCap özeliğine LineCap.Triangle değerini atayarak eğrimizin başlangıç noktasının üçgen olmasını ve EndCap özelliğine de LineCap.ArrowAnchor değerini atayarak eğrimizin bittiği noktada ok işaretinin olmasını sağlıyoruz. Sıra eğrimizi çizmeye geldi. Bunun için DrawCurve fonksiyonundan faydalanağız. Bu fonksiyonun ilk parametresi eğrinin hangi kalemle çizileceği, ikinci parametre ise eğrimizin geçtiği noktalardan oluşan bir Point dizisidir.
Sonuç :
Son bir örnekle makalemizi bitirelim. Uygulamamızda bir doğru çizelim ve bu doğruyu, bir resim dosyası kullanrak dokuyla kaplayalım.
Graphics g = e.Graphics;Brush brush = new TextureBrush(new Bitmap("group.bmp"));Pen pen = new Pen(brush, 25);pen.DashStyle = DashStyle.Solid;pen.StartCap = LineCap.Round;pen.EndCap = LineCap.ArrowAnchor;g.DrawLine(pen, 20,30,400,30);
Daha önceki örneklerimizde TextureBrush kullanmayı görmüştük. Yine bu örnekte TextureBrush oluşturuyoruz.Kalem nesnemizi oluştururken bu defa çizeğimiz doğrunun hangi fırça ile doldurulacağını belirliyoruz (Örneğimizde kalemle çizilecek doğrumuz brush adlı fırça ile doldurulacaktır). Son olarak, DrawLine(…) fonksiyonunu kullanarak başlangıç ve bitiş koordinatları verilen doğrumuzu çiziyoruz.
GDI+ bir çok yeniliklere sahip. Bunlardan biri de Alpha Blending. Çok kolay bir şekilde renklerle kantmanlar oluşturabilir ve efekler tasarlayabiliriz. Hemen küçük bir örnek yapalım. Örnegimizde belirli bir alanı kırmızıya boyayıp, alttakı kırmızı alanı ezmeden üzerine sarıya boyanmış bir alan daha ekleyelim. Uygulamamızın OnPaint olayına aşağıdaki kodu yazalım :
Graphics g = e.Graphics;g.FillRectangle(new SolidBrush(Color.Red), 10, 10, 100, 100);g.FillRectangle(new SolidBrush(Color.FromArgb(180, Color.Yellow)), 40,40, 100, 100);
Örneğimizi inleyecek olursak, ilk adımda daha önce bahsettiğimiz gibi Graphics nesnesini alıyoruz. Sonraki adımda belirtilen alanı kırmızıya boyuyoruz. Şimdi ise katman efekti oluşturmaya geldi. Son satırda belirli alanı sarıya boyuyoruz ama diğerinden farklı olarak fırça (Brush) rengimizi saydam olarak belirtiyoruz. Bunu ise Color yapısının (struct) FromArgb(…) fonksiyonu ile sağlıyoruz. Bu fonksiyonun ilk parametresi renklerimizin saydamlık özelliğini belirtir. Bu parametre 0 ile 255 arasında değerler alabilir. 0 a doğru yaklaştıkca saydamlık artar 255 doğru yaklaştıkça saydamlık azalır.
Sonuç :
Fırçalar (Brushes)
Fırçamızla istersek şekilleri yada belirlediğimiz alanları boyayabiliriz. Fırçmızın ucunda boya, desen yada bir resim olabilir ve bunlarla şekilllerimizi boyayabiliriz (Yavaş yavaş Picasso'ya benzemeye başladık). İlk örneğimizde fırçamızın ucunu bir boya kutusuna batırıyoruz ve başlıyoruz belirli bir alanı boyamaya:
Graphics g = e.Graphics;g.FillRectangle(new SolidBrush(Color.Red), 0, 0, 100, 100);
Sonuç :
Şimdi biraz değişik fırçalarla çalışalım. Örneğin hatched brush. Çizgili desenlerden oluşan bu fırçamızla şimdi basit bir boyama yapalım. Ama öncelikle yeni bir fırça almamız gerekli(yani oluşturacağız). Bunu için uyulamamıza using System.Drawing.Drawing2D; satırını ekleyelim.Çünkü kullanacağımız özel fırçalarımız bu isim uzaylarını içindeler. Bu örneğimizde bir dairenin içini çizgili fırçamızla boyayalım.
Graphics g = e.Graphics;HatchBrush hb = new HatchBrush(HatchStyle.ForwardDiagonal, Color.Yellow,Color.FromArgb(100, Color.Blue));g.FillEllipse(hb, 0, 0, 100, 100);
Şimdi kodumuzu inceleyelim: 2. satırda yeni bir fırça oluşturuyoruz. İlk paremetremiz fırçamızın çizgi şeklini belirtir. 10 larca seçeneğimiz var stil olarak. Bu örnekteki seçeneğimiz HathchStyle.ForwardDiagonal. Çizgilerimiz sol üst köşeden sağ alt köşeye dogru çizilecektir. HathchStyle' a birkaç örnek verecek olursak DashedVertical (Yukardan aşağı kesik kesik çizgiler), Divot(çim görünümlü küçük çizgiler), DiagonalCross (baklava dilimleri oluşturacak şelikde çapraz çizgiler) vs. İkinci parametre fırçadaki çizgi rengini ve son parametre de fırçamızın zemin rengini belirtir.Dikkat ederseniz zemin rengine de yarı saydam (Alpha Blending) özelliği verebiliyoruz. Son adımda ise boyanacak dairesel alanımızı belirlemek için FillEllipse fonksiyonunda yararlanacağız. Bu fonksiyonun ilk parametresi fırçamızı belirtir. İkinci ve üçüncü parametre şeklimizi çizilmeye başlanacağı koordinatı, 3. parametre şeklimizin genişliği ve son parametre ise şeklin yüksekliğini belirtir(3. ve 4. parametreleri değiştirerek eliptik şekiller oluşturabiliriz).
Sonuç :
Diğer fırça türü olan TextureBrush, belirlediğimiz alanı herhangi bir resim dosyası ile boyamızda kullalırız. Örneğin bir alan belirleyelim ve bu alanı herhangi bir bmp dosyası ile boyayalım. (Şöyle düşünelim, boya kutumuzda boya olmasında bizim belirlediğimiz bir resim dosyası olsun.)
Graphics g = e.Graphics;Image img = new Bitmap("group.bmp");Brush brush = new TextureBrush(img);g.FillRectangle(brush, 0, 0, 100, 100);
Kodumuzu inceleyecek olursak, ilk olarak Graphics nesnesi elde ettik. Sonra Image sınıfını kullanarak boyamada kullanılacak resmimizi belirliyoruz. "group.bmp" dosyanın yolunu verir. Bu "C:\\windows\\xx.bmp" seklinde de olabilir. 3. adımda brush isimli bir fırça oluşturuyoruz. Fırçamızı TextureBrush sınıfını kullanarak elde ediyoruz. Artık fırçamız belirlediğimiz resim dosyasıyla boyamak için hazır. Son adımda boyanacak alanı belirleyip FillRectagle(…) ile bu alanı resim dosyamızla boyuyoruz.
Sonuç :
Graphics g = e.Graphics;Rectangle r = new Rectangle(0,0, 230, 100);LinearGradientBrush lb = new LinearGradientBrush(r, Color.Red, Color.Yellow,LinearGradientMode.Horizontal);g.FillRectangle(lb, r);
Bu örnekte, belirlediğimiz alanı yumuşak bir geçişle (kırmızıdan sarıya) boyamış oluyoruz. Bu fırçamızı LinearGradientBrush sınıfından yararlanarak oluşturuyoruz. İlk parametremiz olan r, fırçamızın sınırlarını belirler. Daha pratik olarak şöyle de düşünebiliriz. Fırçamızı duvara sürdüğümüzde ne kadarlık bir alan boyansın? İşte bu alanı ilk parametre ile veriyoruz. İkinci ve üçüncü parametreler kullanacağımız renkleri belirtir. Son parametre ise renkler arasındaki geçişin doğrultusunu belirtir. 4 değer alabilir :
- LinearGradientMode.Vertical, renkler arasındaki geçişin yukardan aşağıya doğru olmasını,
- LinearGradientMode.Horizontal, renkler arasındaki geçişin soldan sağa doğru olmasını,
- LinearGradientMode.BackwardDiagonal, renkler arasındaki geçişin sağ üsten sol alta doğru olmasını
- LinearGradientMode.ForwardDiagonal, renkler arasındaki geçişin sol üstten sağ alta dosğru olmasını sağlar.
Kalemler (Pens)
Programlarımızda da kalemleri kullarak doğrular, eğriler çizebiliriz. Kalemimizin PenType, DashStyle, Width, Color, ve EndCap özelliklerini değiştirerek kalemimizi özelleştirebiliriz. Kısa bir örnek yapalım. Amacımız formumuza noktalarla eğri çizdirmek olsun. Kalem rengimiz de mor olsun. Kalem ucumuzu 5 olsun. Hatta çizdiğimiz eğrinin başlangıç ucunda bir üçgen sonunda ise bir ok olsun. Hemen kodumuzu yazmaya başlayalım(Formumuzun OnPaint olayına aşağıdaki kodu yazalım).
Graphics g = e.Graphics;Pen penExample = new Pen(Color.FromArgb(150, Color.Purple), 15);penExample.DashStyle = DashStyle.Dot;penExample.StartCap = LineCap.Triangle;penExample.EndCap = LineCap.ArrowAnchor;g.DrawCurve(penExample, new Point[] {new Point(10, 100), new Point(40,10), new Point(70, 100), new Point(110, 100), new Point(140, 10), new Point(170, 100),});
İlk adımda her zamanki gibi işlemlerimizi yapmak için Graphics nesnesi elde ediyoruz. Daha sonra ise eğri çiziminde kullanacağımız kalemimizi oluşturuyoruz. Bunun için Pen sınıfında yararlanıyoruz. İlk parametremiz kalmemizin rengi, ikinci parametresi ise kalemimizin kalınlığını belirtir. Sonraki adımda kalemimizin stilini DashStyle özelliğine DahStyle.Dot değerini atayarak belirleyelim. Bu özellik eğrimizin noktalı olarak görünmesini sağlayacaktır. Sonraki adında StartCap özeliğine LineCap.Triangle değerini atayarak eğrimizin başlangıç noktasının üçgen olmasını ve EndCap özelliğine de LineCap.ArrowAnchor değerini atayarak eğrimizin bittiği noktada ok işaretinin olmasını sağlıyoruz. Sıra eğrimizi çizmeye geldi. Bunun için DrawCurve fonksiyonundan faydalanağız. Bu fonksiyonun ilk parametresi eğrinin hangi kalemle çizileceği, ikinci parametre ise eğrimizin geçtiği noktalardan oluşan bir Point dizisidir.
Sonuç :
Graphics g = e.Graphics;Brush brush = new TextureBrush(new Bitmap("group.bmp"));Pen pen = new Pen(brush, 25);pen.DashStyle = DashStyle.Solid;pen.StartCap = LineCap.Round;pen.EndCap = LineCap.ArrowAnchor;g.DrawLine(pen, 20,30,400,30);
Daha önceki örneklerimizde TextureBrush kullanmayı görmüştük. Yine bu örnekte TextureBrush oluşturuyoruz.Kalem nesnemizi oluştururken bu defa çizeğimiz doğrunun hangi fırça ile doldurulacağını belirliyoruz (Örneğimizde kalemle çizilecek doğrumuz brush adlı fırça ile doldurulacaktır). Son olarak, DrawLine(…) fonksiyonunu kullanarak başlangıç ve bitiş koordinatları verilen doğrumuzu çiziyoruz.
