"""""

"

GÖRSEL PROGRAMLAMA (BİP215)

Yazar:

Doç.Dr.Ümit Kocabıçak

S1

"""

BİP215-H13-1

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

BİP215-H13-1

1

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ı

BİP215-H13-1

2

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()

BİP215-H13-1

3

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"

BİP215-H13-1

4

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ı

BİP215-H13-1

5

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)

FillEl l ipse 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

BİP215-H13-1

6

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 Ç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,

BİP215-H13-1

7

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 Graphics

nesnesini , Firca Brush nesnesini ve Noktalar ise Point dizisini göstermektedir);

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);

BİP215-H13-1

8

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 Graphics nesnesini , Firca

Brush nesnesini ve Noktalar ise Point dizisini göstermektedir);

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 (P0) ve son noktadan (P3) geçmekte, ikinci (P1) 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.

BİP215-H13-1

9

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 :

BİP215-H13-1

10

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.

BİP215-H13-1

11