GÖRSEL PROGRAMLAMA (BİP215)

Transkript

1 GÖRSEL PROGRAMLAMA (BİP215) Yazar: Doç.Dr.Ümit Kocabıçak S1

2 SAKARYA ÜNİVERSİTESİ Adapazarı Meslek Yüksekokulu Bu ders içeriğinin basım, yayım ve satış hakları Sakarya Üniversitesi ne aittir. Uzaktan Öğretim tekniğine uygun olarak hazırlanan bu ders içeriğinin bütün hakları saklıdır. İlgili kuruluştan izin almadan ders içeriğinin tümü ya da bölümleri mekanik, elektronik, fotokopi, manyetik kayıt veya başka şekillerde çoğaltılamaz, basılamaz ve dağıtılamaz. Copyright 2004 by Sakarya University All rights reserved No part of this course content may be reproduced or stored in a retrieval system, or transmitted in any form or by any means mechanical, electronic, photocopy, magnetic, tape or otherwise, without permission in writing from the University. Sürüm 1 Sakarya S 1

3 GRAFİKLER VE ANİMASYON Bu Haftanın Hedefi: Grafiklerin öğretilmesi. Bu Haftanın Materyalleri Bu haftaki dersimizde kullanacağımız bir materyal bulunmamaktadır. Kullanılan semboller Animasyon Soru Veritabanı Bağlantılı Soru Simülasyon Püf Noktası 1

4 Grafikler Grafik yöntemleri, eski versiyonlara göre daha da iyileştirilmiş olan GDI+ (Graphical Device Interface) Grafik Arayüzü ile sağlanmaktadır. Grafik yöntemleri,.net Framework'deki System.Drawing sınıfı altında desteklenmektedir. Visual Basic.NET'te grafik nesnelerle çizim aşamaları aşağıdaki gibi sıralanabilir : Grafik nesnesinin oluşturulması Pen (Kalem) ve Brush (Fırça) nesnelerinin oluşturulması Çizim yöntemleri ile grafikleri çizmek Çizim bittikten sonra Pen, Brush ve Grafik nesnelerini bellekten Dispose yöntemiyle temizlemek. Çizim işlemi aslında kağıda çizmeye çok benzer. Çizim için ilk önce bir kağıt alırız. Bu grafik nesnesidir. Kağıda kalem (Pen) ile çizeriz, boya kalemleri veya fırça (Brush) ile boyarız. İşimiz bitince, malzemelerimizi uzaklaştırırız. Grafik Nesnesinin Oluşturulması Çizim fonksiyonları grafik nesnelerine uygulanır. Grafik nesneleri çizim yöntemleri için bir yüzey sağlar. Bu, Visual Basic.NET'te 2 adımda oluşturulur.birinci adımda Drawing namespace'sındaki örneğin Grafik isimli nesne Dim deyimi kullanılarak aşağıdaki şekilde deklare edilir. Dim Grafik As Drawing.Graphics İkinci adımda grafik nesnesi oluşturulacaktır.bunun için CreateGraphics metodundan yararlanılır. Grafik nesnesi Visual Basic.NET iki kontrol kullanılarak oluşturulabilir. Form veya PictureBox kontrolu. Form için Grafik = Me.CreateGraphics() PictureBox Kontrolu (PicGraf1 isimli) İçin Grafik = PicGraf1.CreateGraphics() Grafik nesnesi oluşturulduktan sonra, tüm grafik yöntemleri bu nesneye uygulanabilir. İşi bitip kullanılmayacak grafik nesneleri, Dispose yöntemiyle sistem kaynaklarından silinir : Grafik.Dispose() 2

5 Pen (Kalem) Nesnesinin Oluşturulması Grafik yöntemlerinin birçoğu Pen (Kalem) nesnesine gereksinim duyar. Pen (Kalem) nesnesinin rengi ve çizgi kalınlığı seçilebilir. Eğer kendi Pen nesnemizi oluşturmak istersek, (örneğin Kalem isimli) deklarasyon ve tanımlama aşağıdaki gibi olmalıdır : Dim Kalem As Drawing.Pen Kalem = New Drawing.Pen (Renk, Çizgi Kalınlığı) Veya tek satırda; Dim Kalem As New Pen (Renk, Çizgi Kalınlığı) Brush (Fırça) Nesnesinin Oluşturulması Visual Basic.NET'te bölgelerin belirli renk, desen ve resimlerle doldurulması için Brush (Fırça) nesnesinden yararlanılır.eğer kendi Brush nesnemizi (örneğin Firca isimli) oluşturmak istersek, tanımlama aşağıdaki gibi olmalıdır : Dim Firca As New SolidBrush (Renk) Burada Renk, boyama rengini göstermektedir. Örneğin kırmızı için buraya Color.Red yazılır. Program içinde Brush nesnesinin Renk özelliği değiştirilebilir. Firca.Color = Yeni_Renk Brush nesnesi ile çizim yapıldıktan sonra, nesne Dispose yöntemi ile bellekten silinir. Firca.Dispose() Colors (Renkler) Color farklı renkleri göstermek için kullanılır. Pen ve Brush nesnelerinde renkleri tanımlamak için kullanılır.tanımı (Renk değişkeni için): Dim Renk As Color Bu değişkene system tarafından tanımlanmış renkleri atamak için Renk = Color.Blue Mavi 3

6 Renk = Color.Red Kırmızı İfadeleri kullanılır Grafik Yöntemleri Formun genişliğini daha önceden gördüğümüz gibi Width özelliği ile, yüksekliğini Height özelliği ile belirliyorduk. Bu genişlik ve yükseklik, formun başlık kısmı ile çerçeveyi de içine alıyordu. Grafik çizilecek alanı belirleyecek genişlik ClientRectangle.Width özelliği ile, yükseklik ise ClientRectangle.Height özelliği ile tam olarak belirlenir. Grafiklerde noktalar (X, Y) koordinat çifti ile belirlenir. Grafik çizilecek alanın sol üst köşenin koordinatı (0, 0)'dır. Koordiantların 0'dan başlaması sebebiyle, ClientRectangle.Width ve ClientRectangle.Height elde edilen genişlik ve yükseklik değerlerinin grafik alanın dışına çıkmaması için birer eksiltilmesi (yani CientRectangle.Width - 1, ClientRectangle.Height - 1) gerekir. Bütün ölçüler tamsayı ve pikseldir. DrawLine Yöntemi (Çizgi Çizmek) Bu grafik yöntemi iki nokta arasında çizgi çizmek için kullanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Kalem Pen nesnesini göstermektedir); Grafik.DrawLine (Kalem, x1, y1, x2, y2) (X1,Y1) : Çizilecek doğrunun başlangıç noktası (X2,Y2) : Çizilecek doğrunun bitiş noktası 4

7 DrawRectangle Yöntemi (Dikdörtgen Çizmek) DrawRectangle yöntemi, bir grafik nesnesi içinde dikdörtgen çizmek için kullanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Kalem Pen nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.DrawRectangle (Kalem, x, y, Genişlik, Yükseklik) FillRectangle Yöntemi (İçi Dolu Dikdörtgen Çizmek) FillRectangle yöntemi, bir grafik nesnesi içinde içi dolu dikdörtgen çizmek için kullanılır. Dikdörtgenin içini doldurmak için, Brush (Fırça) nesnesinden yararlanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Firca Brush nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.FillRectangle (Firca, x, y, Genişlik, Yükseklik) DrawEllipse Yöntemi (Elips/Daire Çizmek) DrawEllipse yöntemi, bir grafik nesnesi içinde elips/daire çizmek için kullanılır. Bu yöntem dikdörtgen çizmeye çok benzerdir. Tanımlanan dikdörtgen içine elips/daire çizilir. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Kalem Pen nesnesini göstermektedir) aşağıdaki şekildedir; Grafik.DrawEllipse (Kalem, x, y, Genişlik, Yükseklik) FillEllipse Yöntemi (İçi Dolu Elips/Daire Çizmek) FillEllipse yöntemi, bir grafik nesnesi içinde içi dolu elips/daire çizmek için kullanılır. İçi dolu dikdörtgen çizme yöntemine çok benzer. Elipsin içini doldurmak için, Brush (Fırça) nesnesinden 5

8 yararlanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Firca Brush nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.FillEllipse (Firca, x, y, Genişlik, Yükseklik) DrawPie Yöntemi (Elips/Daire Dilimi Çizmek) DrawPie yöntemi, bir grafik nesnesi içinde bir elips/dairenin belli bir dilimini çizmek için kullanılır. Tanımlanan dikdörtgen içine elips/daire dilimi çizilir. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Kalem Pen nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.DrawPie (Kalem, x, y, Genişlik, Yükseklik, Başlangıç Açısı, Süpürme Açısı) FillPie Yöntemi (İçi Dolu Elips/Daire Dilimi Çizmek) FillPie yöntemi, bir grafik nesnesi içinde içi dolu elips/daire dilimi çizmek için kullanılır. İçi dolu dikdörtgen veya elips çizme yöntemine çok benzer. Dilimin içini doldurmak için, Brush (Fırça) nesnesinden yararlanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Firca Brush nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.FillPie (Firca, x, y, Genişlik, Yükseklik, Başlangıç Açısı, Süpürme Açısı) DrawArc Yöntemi (Elips/Daire Yay Parçası Çizmek) DrawArc yöntemi, bir grafik nesnesi içinde bir elips/dairenin belli bir parçasını çizmek için kullanılır. DrawPie yöntemi ile aynı özelliklere sahiptir. Bu yöntemin yazılımı (Grafik Graphics nesnesini ve Kalem Pen nesnesini göstermektedir) aşağıdaki şekildedir : Grafik.DrawArc (Kalem, x, y, Genişlik, Yükseklik, Başlangıç Açısı, Süpürme Açısı) Point (Nokta) Grafik yöntemleri, doğru ve eğrileri çizerken noktaları kullanır. Point (Nokta) tanımlaması aşağıdaki gibi yapılır : Dim Nokta As New Drawing.Point (X,Y) Burada X,Y piksel olarak istenilen koordinatlardır. Gerektiğinde program içinde özellikler değiştirilebilir. Point.X = Yeni_X : Point.Y = Yeni_Y Point yapıları dizi olarak da tanımlanabilir. Örneğin 20 elemanlı bir nokta dizisi tanımlamak için, 6

9 Dim P (30) As Drawing.Point Yazılır. Dizinin 12. elemanının koordinatlarını değiştirmek için, aşağıdaki ifadeler yazılmalıdır. P(12).X = Yeni_X : P(12).Y = Yeni_Y DrawLines Yöntemi (Çizgiler Çizmek) DrawLine yöntemi ile iki nokta arasında çizgi çiziliyordu. DrawLines yöntemi ile ise nokt dizisi kullanılarak, birden fazla çizgi aynı anda çizilebiliyor. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Kalem Pen nesnesini ve Noktalar ise Point dizisini göstermektedir); Grafik.DrawLines (Kalem, Noktalar) DrawPolygon Yöntemi (Çokgen Çizmek) DrawPolygon yöntemi DrawLines yöntemine çok benzer. İkisi de nokta dizisi kullanarak, noktaları birbirine bağlayarak çizgi çiziyorlar. Aralarındaki tek fark, DrawPolygon yöntemi, son nokta ile ilk noktayı birleştirerek kapalı bir çokgen elde ediyor. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Kalem Pen nesnesini ve Noktalar ise Point dizisini göstermektedir); Grafik.DrawPolygon (Kalem, Noktalar) FillPolygon Yöntemi (İçi Dolu Çokgen Çizmek) FillPolygon yöntemi içi dolu çokgen çizmek için kullanılır. Bu yöntemin yazılımı (Grafik nesnesini, Firca Brush nesnesini ve Noktalar ise Point dizisini göstermektedir); Graphics Grafik.FillPolygon (Firca, Noktalar) DrawCurve Yöntemi (Eğri Çizmek) DrawLines yöntemi ile ise nokta dizisi kullanılarak, birden fazla çizgi aynı anda çizilebiliyordu. Benzer şekilde DrawCurve yöntemi de nokta dizisini kullanarak çizim gerçekleştiriyor. Bu yöntemin DrawLines yönteminden farklı tarafı, noktaları doğrularla değil, Spline eğrilerle birleştirmektedir. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Kalem Pen nesnesini ve Noktalar ise Point dizisini göstermektedir). DrawClosedCurve Yöntemi (Kapalı Eğriler Çizmek) Bu yöntem DrawCurve yöntemine çok benzer. Tek farkı, son nokta ile ilk noktayı da birleştirerek, kapalı bir eğri elde edilmesidir. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Kalem Pen nesnesini ve Noktalar ise Point dizisini göstermektedir); 7

10 Grafik.DrawClosedCurve (Kalem, Noktalar) FillClosedCurve Yöntemi (İçi Dolu Kapalı Eğri Çizmek) Bu yöntem ile içi dolu kapalı eğriler çizilir. Bu yöntemin yazılımı (Grafik Brush nesnesini ve Noktalar ise Point dizisini göstermektedir); Graphics nesnesini, Firca Grafik.FillClosedCurve (Firca, Noktalar) DrawBezier Yöntemi (Bezier Eğrisi Çizmek DrawBezier yöntemi ile Bezier eğrisi çizilir. Bezier egrileri, aşağıdaki şekilde gösterildigi gibi, dört noktayla tanımlanırlar. Eğri birinci (P 0) ve son noktadan (P 3) geçmekte, ikinci (P 1) ve üçüncü (P 2) noktaları eğrinin kontrol edilmesini sağlamaktadır. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Kalem Pen nesnesini ve Noktalar ise Point dizisini göstermektedir); Grafik.DrawBezier (Kalem, Noktalar) HatchBrush Nesnesi (Bölgeyi Belli Bir Desenle Doldurmak) Şu ana kadar Brush ile yapılan boyalamalar/doldurmalar, SolidBrush nesnesi ile tek renk ile gerçekleştirildi. HatchBrush nesnesi ile bölgeyi değişik desenlerle doldurmak mümkündür.solidbrush dışındaki Brush nesneleri Drawing.Drawing2D namesapase'nın bir parçasıdır. Bu yöntemin yazılımı; Drawing.Drawing2D.HatchBrush (Tarama Stili, Tarama Rengi, Zemin Rengi) Burada Tarama stili için Visual Basic.NET tarafından belirlenmiş stillerden biri seçilebilir. Aşağıda tarama stillerinden bazıları listelenmiştir : Cross DiagonalBrick DiagonalCross HorizantalBrick LargeConfetti LargeGrid OutlineDiamond Plaid Shingle SolidDiamond Sphere Trellis Vertical Wave ZigZag Tarama Rengi ve Zemin Rengi için Color nesnesinde anlatılan renk tanımlamaları yapılır. 8

11 LinearGradientBrush Nesnesi (Bölgeyi İki Rengin Karşımı İle Doldurmak) LinearGradientBrush nesnesi ile bölge iki değişik rengin karşımı ile doldurulur..bu nesne de Drawing.Drawing2D namesapase'nın bir parçasıdır. Bu yöntemin yazılımı; Drawing.Drawing2D.LinearGradientBrush (Dikdörtgen, 1. Renk, 2. Renk, LinearGradientMode) Burada Dikdörtgen, eğimin başladığı ve bittiği bölgeyi tanımlamayaı sağlar. LinearGradientMode ise eğim yönünü belirtmektedir. 4 değeri vardır : BackwardDiagonal ForwardDiagonal Horizontal Vertical TextureBrush Nesnesi (Bölgeyi Belli Bir Resimle Doldurmak) TextureBrush nesnesi ile bölgeyi değişik image'larla (resim) doldurmak mümkündür. SolidBrush dışındaki Brush nesneleri Drawing.Drawing2D namesapase'nın bir parçasıdır. Bu yöntemin yazılımı; Drawing.Drawing2D.TextureBrush (Resim) DrawString Yöntemi (Grafik Nesnesine Yazı Yazmak) DrawString yöntemi ile grafik nesnelerine yazı yazılır. Grafiklere etiketler ve başlıklar eklemek için oldukça faydalı bir yöntemdir. Bu yöntemin yazılımı (Grafik Graphics nesnesini, Firca Brush nesnesini ve Yazi_tipi Font nesnesini göstermektedir); Grafik.DrawString (Yazilacak_ifade, Yazi_tipi, Firca, X, Y) Burada X, Y koordinatları yazının başlangıç koordinatlarının sol üst köşesini belirlemektedir. DrawImage Yöntemi (Resim Çizdirir) DrawImage yöntemi ile herhangi bir resim dosyasını grafik ortamda kullanmak için kullanılır. Özellikle animasyon ve oyun programlarında çok kullanılır. Bu yöntemin yazılımı (Grafik Graphics nesnesini ); Grafik.DrawImage (Resim_dosyasi,, x, y, Genişlik, Yükseklik) Burada X, Y koordinatları resmin başlangıç koordinatlarının sol üst köşesini belirlemektedir. Image nesnesi genellikle bir grafik dosyasından oluşturulur : 9

12 Dim Resim As Drawing.Image Resim = Drawing.Image.FromFile(Dosya_ismi) e.graphic.drawimage (Resim, New rectangle(10,10,100,100)) Image nesnesi Save metodu ile istenilen resim formatında (jpg, bmp, gif gibi) kaydedilir. Örnek uygulamalarda DrawImage yöntemini kullanacağız. Bu uygulamalarda DrawImage çok daha iyi anlaşılacaktır. Çalışma Ödevi Visual Basic.NET 2003 ders kitabınızdaki Bölüm 11 Grafikler ve Animasyon bölümünde Sayfa 348'deki Uygulama : Satış Grafikleri Projesini kitaptaki adım adım uygulamadan yararlanarak yapınız. 10

13 11