görsel programlama

"
"
"
"
"
"
GÖRSEL PROGRAMLAMA
(BİP215)
Yazar:
Doç.Dr.Ümit Kocabıçak
S1
"
"
"
BİP215-H13-1
"
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........ 2004
S
1
BİP215-H13-1
GRAFİKLER VE
ANİMASYON
Bu Haftanın H e d e fi:
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
BİP215-H13-1
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.
G rafik 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
PicGraf1.CreateGraphics()
Grafik =
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
BİP215-H13-1
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
BİP215-H13-1
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.
Draw Line Y ö n temi (Ç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
BİP215-H13-1
Draw Rectangle Y ö n temi (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)
Draw Ellipse 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)
FillE l l ipse Y ö n temi (İç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
BİP215-H13-1
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 Dil imi Ç iz mek)
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
nesnesini ve Kalem
Graphics
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 ö n t e mi (İç 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ı)
Draw A rc Y ö n temi (Elips/Daire Y ay Parçası Ç iz mek)
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
Kalem
Graphics nesnesini ve
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 (No kta)
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
BİP215-H13-1
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
Draw Lines Yöntemi (Çizgiler Çiz mek)
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
nesnesini , Kalem
Graphics
Pen nesnesini ve Noktalar ise Point dizisini göstermektedir);
Grafik.DrawLines (Kalem, Noktalar)
DrawPolygon Y öntemi (Çokgen Çiz mek)
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
nesnesini , Kalem
Graphics
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
Graphics
Brush nesnesini ve Noktalar ise Point dizisini göstermektedir);
Grafik.FillPolygon (Firca, Noktalar)
Draw Curve Y öntemi (Eğri Çiz mek)
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).
Draw ClosedCurve Y öntemi (Kapalı Eğriler Ç iz mek)
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
BİP215-H13-1
Grafik.DrawClosedCurve (Kalem, Noktalar)
FillClosedCurve Y ö n temi (İçi Dolu Kapal ı Eğri Ç iz m e k)
Bu yöntem ile içi dolu kapalı eğriler çizilir. Bu yöntemin yazılımı (Grafik
Graphics nesnesini , Firca
Brush nesnesini ve Noktalar ise Point dizisini göstermektedir);
Grafik.FillClosedCurve (Firca, Noktalar)
Draw Bezier Y ö n temi (Bezier Eğr isi Ç 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 (P0) ve son noktadan (P3) geçmekte, ikinci (P 1) ve üçüncü (P2)
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
BİP215-H13-1
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)
Draw String Y ö n t emi (G ra fik Nesnesine Y azı Y azmak)
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
nesnesini ve Yazi_tipi
Graphics nesnesini , Firca
Brush
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.
Draw I mage Y ö n temi (Resim Ç iz d irir)
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
BİP215-H13-1
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
BİP215-H13-1
11