Grafik ve Resimler
Java applet'leri için tanımlanmış olan grafik koordinat sistemi diğer grafik koordinat sistemlerinden biraz farklıdır. Aşağıdaki şekilde java koordinat sistemi pixel birimi ile verilmiştir.
Applet penceresinin en üst sol noktası x=0 ve y=0, başka bir deyişle 0,0 koordinatlarına sahiptir. Pencerenin sağ tarafına ilerledikçe x koordinatının, alt tarafına ilerledikçe de y koordinatının değeri artar. Koordinatları ayarlarken önce x sonra y koordinat değerleri verilmelidir.
Resim Dosyaları
Internet dünyasında browserları ile geziye çıkanlara en cazip gelen nokta şüpheziz ki eriştiği yazısal bilgilerin yanında gördüğü resimlerdir. Resimler genelde web sayfalarının estetiğini arttırdıkları gibi çeşitli bilgiler ve grafikleri içerebilirler. Bilgisayarda bir resim dosyası oluşturmanın birden fazla yolu vardır. Örneğin windows'un Paint programı ile herkes resim oluşturabilir. Fakat her program farklı tiplerde veya uzantılarda resim oluşturmaktadır. Paint programı ise .BMP uzanılı dosyalar hazırlanmaktadır. Bu tür dosyaların en büyük dezavantajları çok fazla yer kaplamaları ve internet üzerinden erişimleri sırasında erişim süresini uzatmalarıdır. İşte bu nedenle web sayfalarında .JPG ve .GIF uzantılı resim dosyaları kullanılmaktadır. Değişik grafik programları ile .BMP uzantılı dosyalar .JPG veya .GIF dosyalarına çevrilebilir.
Normal bir fotağrafı bilgisayara aktarabilmak için tarayıcı (scanner) kullanılabilir. Tarayıcı programları tarama işlemi bittikten sonra, kullanıcının istekleri doğrultusunda istenilen tür ve özelliklerde resim dosyası yaratabilir. Aynı zamanda digital fotoğraf makinaları ile çekilen fotoğraflar anında bilgisayara aktarılabilir.
Resimli Web Sayfası Örneği
Hazırlayacağımız yeni bir Html dosyası ve Java programı ile bir web sayfası üzerine yazı ve resim yerleştireceğiz. Aşağıda resim.html dosyasının kodu verilmiştir:
<html>
<title>resim.html </title>
<body>
<applet code="resim.class" width=300 height=400>
</applet>
</body>
</html>
<B>resim.java kaynak kodu</B>
import java.awt.*;
import java.applet.*;
public class resim extends Applet
{
Image resim1;
public **** init()
{
resim1=getImage(getCodeBase(), "./cindy.gif");
}
public **** paint(Graphics resim)
{
setBackground(Color.blue);
resim.drawImage(resim1,10,10,this);
}
}
Resim.class appleti
Program anlaşılır olması açısından oldukça kısa hazırlanmıştır. Önce resim (Image) türünden bir değişken olan resim1'i aşağıdaki şekilde
Image resim1;
tanımlanıyor, daha sonra
public **** init()
{
resim1=getImage(getCodeBase(), "/cindy.gif");
}
yöntemi ile programın resim dosyasını okumasını sağlıyoruz. Kullanılan resim programın bulunduğu dizinde bulunmak zorundadır.
Son olarakta:
public **** paint(Graphics resim);
{
setBackground(Color.blue);
resim.drawImage(resim1,10,10,this);
}
program satırları ile arka plan renginin mavi olmasını ve resmin ekranda belirmesini gerçekleştiriyoruz..
Yukarıdaki appleti biraz değiştirip, bir döngü ve bir resim daha eklersek nasıl bir görüntü elde ederdik acaba, şimdi bunu deniyelim. Aşağıdaki Java Kaynak koduna kayanresim.java adını verdim.
import java.awt.*;
import java.applet.*;
public class kayanresim extends Applet
{
Image resim1;
Image resim2;
public **** init()
{
resim1=getImage(getCodeBase(), "./cindy.gif");
resim2=getImage(getCodeBase(), "./claudia.gif");
}
public **** paint(Graphics resim)
{
int i;
setBackground(Color.blue);
for (i=10; i<700;i=i+10)
{
if(i<=530) resim.drawImage(resim1,i,10,this); resim.drawImage(resim2,700-i,10,this);
}
}
}
Bu applet derlenip appletviewer programı ile çalıştırılırsa aşağıdaki gibi bir görüntü elde ederiz.
kayanresim.class appletini kullanıyor.
Program çok kolay anlaşılır niteliktedir. Programda
Image resim1;
Image resim2;
Image tipinde iki adet değişken tanımlanmıştır. Daha sonra
public **** init()
{
resim1=getImage(getcodeBase(), "./cindy.gif");
resim2=getImage(getcodeBase(), "./claudia.gif");
}
yöntemi ile programın resim dosyalarını okuması sağlanmıştır.
Daha sonrada
public **** paint(Graphics resim)
int i;
{
setBackground(Color.blue);
for (i=10; i<700; i=i+10)
{
if(i<=530) resim.drawImage(resim1,i,10,this); resim.drawImage(resim2,700-i,10,this);
}
}
Program satırları ile resimlerin ekrana getirilmesi sağlanmış ve for döngüsü yardımıyla resimlerin applet penceresi sınırları içinde yer değiştirilerek çizilmesi sağlanmıştır. For döngüsündeki şartın (i<700) olmasının sebebi applet penceresinin genişliğinin 700 alınmış olması ve resimlerin applet penceresi dışına çıkmasını engellemek içindir. Resimler çizilirken y değişkeni sabit tutulmuş, x değişkeni ise i'ye bağlı olarak değiştirilmiştir.
Resim Boyutları Kontrolü
Applet içine yerleştirmek istediğimiz resimlerin boyutlarını Java programları içinden ayarlayabiliriz. Önce herhangi bir gif veya jpg türünden bir resim dosyası bulun, bulduğunuz bu resmi çalışmakta olduğunuz alana koyun ( programı kaydettiğiniz dizinin içi ) Benim bu bölümde kullandığım resim ana dizinde bulunan (C:/) demi.jpg dosyası. Bu resmin boyutları 297*480 boyutlarında ve 640*480 dpi çözünürlüğe sahip ve disk üzerinde 25240 byte yer kaplıyor. Eğer bu dosya gif formatında kaydedilseydi 96351 byte yer kaplayacaktı. Görüldüğü gibi JPG türü az yer kaplayan bir resim türüdür. Bu nedenle iletişim hızı diğer türlere göre daha fazladır bu nedenle internette en cok kullanılan türdür.
Şimdi aşağıdaki resimboyutlari.html dosyasını hazırlayalım.
<html>
<title>resimboyutlari.html</title>
<body>
<applet code=resimboyutlari.class width=500 height=450>
</applet>
<body>
</html>
Java programının kaynak kodu ise aşağıda verilmiştir:
import java.awt.*;
import java.applet.*;
public class resimboyutlari extends Applet
{
// TANIMLAMALAR---------------------------------------------------------------------------------------------
Image demi;
Font kalinfont12=new Font("TimesRoman",Font.BOLD,12);
Font kalinfont18=new Font("TimesRoman",Font.BOLD,18);
Font kalinfont24=new Font("TimesRoman",Font.BOLD,24);
// RESIM DOSYASINI OKU-----------------------------------------------------------------------------------
public **** init()
{
demi=getImage(getCodeBase(), "./demi.jpg");
}
// RESIM DOSYASINI EKRANA GETIR -------------------------------------------------------------------
public **** paint(Graphics resim)
{
// Bu Metodta Kullanılan Degiskenler
int xKoordinati;
int yKoordinati;
int resminEni;
int resminYuksekligi;
int resminYkoordinati;
//Yazi tipini belirle
resim.setFont(kalinfont18);
//Resmin Enini ve Yüksekligini Belirle
resminEni=demi.getWidth(this);
resminYuksekligi=demi.getHeight(this);
//Baslangıc Koordinatlarini Ayarla
xKoordinati=10;
resminYkoordinati=10;
yKoordinati=resminYkoordinati;
//Resmi Ekrana Yerlestir
resim.drawImage(demi,xKoordinati,yKoordinati,this);
//Mesajın y Koordinatını Belirle
yKoordinati=resminYkoordinati+resminYuksekligi+20;
//Mesaj yaz
resim.drawString("Orjinal Boyutlar", xKoordinati,yKoordinati);
//Ikinci Resmin Sol Ust Koordinatlarini Belirle
xKoordinati=xKoordinati+resminEni+10;
yKoordinati=resminYkoordinati;
//Resmi %50 ufalt
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/2,resminYuksekligi/2,this);
//Mesajin y Koordinatini belirle
yKoordinati=resminYkoordinati+resminYuksekligi/2+20;
//Mesaj Yaz
resim.drawString("%50 ufak",xKoordinati,yKoordinati);
//Ucuncu Resmin Sol ust Koordinatlarini belirle
xKoordinati=xKoordinati+(resminEni/2)+10;
yKoordinati=resminYkoordinati;
//Resmi %75 Ufalt
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/4,resminYuksekligi/4,this);
//Mesajin y Koordinatini Belirle
yKoordinati=resminYkoordinati+resminYuksekligi/4+20;
//Mesaj Yaz
resim.drawString("%75 ufak",xKoordinati,yKoordinati);
}
}
Programın sonucunu aşağıda görüyorsunuz.
<applet code="resimboyutlari.class" align="baseline" width="600" height="530"></applet>
İlk resmin orjinal boyutunda ve sol üst koordinatları
xKoordinati=10;
resminYkoordinati=10;
Ykoordinati=resminYkoordinati;
komutlari ile belirleniyor ve orjinal resim
resim.drawImage(demi,xKoordinati,yKoordinati,this);
komutu ile ekrandaki yerine yerleştiriliyor. Bu işlemden önce ise
resminEni=demi.getWidth(this);
resminYuksekligi=demi.getHeight(this);
komutları ile getWidth() ve getHeight() metotlarından yararlanılıyor, Orjinal resmin en ve yüksekliğini pixel olarak belirliyoruz.
Resmin altına
resim.draw.String("Orjinal boyutlar",xKoordinatı,yKoordinatı);
komutu ile bir bilgi satırı yolluyoruz.
Diğer iki resim için yine drawImage() metodunu kullanıyoruz, fakat bu kez parametre sayıları biraz değişik:
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/2,resminYuksekligi/2,this);
satırında görüldüğü gibi yKoordinatı değişkeni ile this sözcüğü arasında iki parametre daha bulunuyor ve bu parametrelerle x ve y yönlerinde resmi hangi oranda küçültmek istediğimizi belirtiyoruz. İkinci resimde bu oran /2 olduğundan, orjinal resmin eni ve boyu ikiye bölünüyor ve %50 oranında ufalmış oluyor. Üçüncü resimde oran /4 ve resim dolayısıyla %75 oranında ufalmış oluyor.
Eğer bir resmin iki misli büyümesini istersek yukarıdaki program satırını aşağıdaki şekilde değiştirmaniz gerekiyor.
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni*2,resminYuksekligi*2,this);
Resmin genel görüntüsünün bozulmaması için resmi küçültme veya büyültme işlemleri gerek x, gerekse y yönünde aynı olmalıdır. Aksi taktirde değişik görüntüler ortaya çıkabilir. Bu nedenle küçültme ve büyültme işlemlerine dikkat etmenizde yarar var.
Bu bölümde yapılan örneklerde yalnızca Internet'ten alınan çeşitli fotoğraflar kullanılmıştır.Tabii ki resim dosyaları çeşitli grafik ve çizim osyalarınıda içerebilmektedir. Sizde bu bölüme kadar öğrendiklerinizle bazı denemeler yaparak çok değişik görünümde applet'ler üretebilirsiniz.
Java applet'leri için tanımlanmış olan grafik koordinat sistemi diğer grafik koordinat sistemlerinden biraz farklıdır. Aşağıdaki şekilde java koordinat sistemi pixel birimi ile verilmiştir.
Applet penceresinin en üst sol noktası x=0 ve y=0, başka bir deyişle 0,0 koordinatlarına sahiptir. Pencerenin sağ tarafına ilerledikçe x koordinatının, alt tarafına ilerledikçe de y koordinatının değeri artar. Koordinatları ayarlarken önce x sonra y koordinat değerleri verilmelidir.
Resim Dosyaları
Internet dünyasında browserları ile geziye çıkanlara en cazip gelen nokta şüpheziz ki eriştiği yazısal bilgilerin yanında gördüğü resimlerdir. Resimler genelde web sayfalarının estetiğini arttırdıkları gibi çeşitli bilgiler ve grafikleri içerebilirler. Bilgisayarda bir resim dosyası oluşturmanın birden fazla yolu vardır. Örneğin windows'un Paint programı ile herkes resim oluşturabilir. Fakat her program farklı tiplerde veya uzantılarda resim oluşturmaktadır. Paint programı ise .BMP uzanılı dosyalar hazırlanmaktadır. Bu tür dosyaların en büyük dezavantajları çok fazla yer kaplamaları ve internet üzerinden erişimleri sırasında erişim süresini uzatmalarıdır. İşte bu nedenle web sayfalarında .JPG ve .GIF uzantılı resim dosyaları kullanılmaktadır. Değişik grafik programları ile .BMP uzantılı dosyalar .JPG veya .GIF dosyalarına çevrilebilir.
Normal bir fotağrafı bilgisayara aktarabilmak için tarayıcı (scanner) kullanılabilir. Tarayıcı programları tarama işlemi bittikten sonra, kullanıcının istekleri doğrultusunda istenilen tür ve özelliklerde resim dosyası yaratabilir. Aynı zamanda digital fotoğraf makinaları ile çekilen fotoğraflar anında bilgisayara aktarılabilir.
Resimli Web Sayfası Örneği
Hazırlayacağımız yeni bir Html dosyası ve Java programı ile bir web sayfası üzerine yazı ve resim yerleştireceğiz. Aşağıda resim.html dosyasının kodu verilmiştir:
<html>
<title>resim.html </title>
<body>
<applet code="resim.class" width=300 height=400>
</applet>
</body>
</html>
<B>resim.java kaynak kodu</B>
import java.awt.*;
import java.applet.*;
public class resim extends Applet
{
Image resim1;
public **** init()
{
resim1=getImage(getCodeBase(), "./cindy.gif");
}
public **** paint(Graphics resim)
{
setBackground(Color.blue);
resim.drawImage(resim1,10,10,this);
}
}
Resim.class appleti
Program anlaşılır olması açısından oldukça kısa hazırlanmıştır. Önce resim (Image) türünden bir değişken olan resim1'i aşağıdaki şekilde
Image resim1;
tanımlanıyor, daha sonra
public **** init()
{
resim1=getImage(getCodeBase(), "/cindy.gif");
}
yöntemi ile programın resim dosyasını okumasını sağlıyoruz. Kullanılan resim programın bulunduğu dizinde bulunmak zorundadır.
Son olarakta:
public **** paint(Graphics resim);
{
setBackground(Color.blue);
resim.drawImage(resim1,10,10,this);
}
program satırları ile arka plan renginin mavi olmasını ve resmin ekranda belirmesini gerçekleştiriyoruz..
Yukarıdaki appleti biraz değiştirip, bir döngü ve bir resim daha eklersek nasıl bir görüntü elde ederdik acaba, şimdi bunu deniyelim. Aşağıdaki Java Kaynak koduna kayanresim.java adını verdim.
import java.awt.*;
import java.applet.*;
public class kayanresim extends Applet
{
Image resim1;
Image resim2;
public **** init()
{
resim1=getImage(getCodeBase(), "./cindy.gif");
resim2=getImage(getCodeBase(), "./claudia.gif");
}
public **** paint(Graphics resim)
{
int i;
setBackground(Color.blue);
for (i=10; i<700;i=i+10)
{
if(i<=530) resim.drawImage(resim1,i,10,this); resim.drawImage(resim2,700-i,10,this);
}
}
}
Bu applet derlenip appletviewer programı ile çalıştırılırsa aşağıdaki gibi bir görüntü elde ederiz.
kayanresim.class appletini kullanıyor.
Program çok kolay anlaşılır niteliktedir. Programda
Image resim1;
Image resim2;
Image tipinde iki adet değişken tanımlanmıştır. Daha sonra
public **** init()
{
resim1=getImage(getcodeBase(), "./cindy.gif");
resim2=getImage(getcodeBase(), "./claudia.gif");
}
yöntemi ile programın resim dosyalarını okuması sağlanmıştır.
Daha sonrada
public **** paint(Graphics resim)
int i;
{
setBackground(Color.blue);
for (i=10; i<700; i=i+10)
{
if(i<=530) resim.drawImage(resim1,i,10,this); resim.drawImage(resim2,700-i,10,this);
}
}
Program satırları ile resimlerin ekrana getirilmesi sağlanmış ve for döngüsü yardımıyla resimlerin applet penceresi sınırları içinde yer değiştirilerek çizilmesi sağlanmıştır. For döngüsündeki şartın (i<700) olmasının sebebi applet penceresinin genişliğinin 700 alınmış olması ve resimlerin applet penceresi dışına çıkmasını engellemek içindir. Resimler çizilirken y değişkeni sabit tutulmuş, x değişkeni ise i'ye bağlı olarak değiştirilmiştir.
Resim Boyutları Kontrolü
Applet içine yerleştirmek istediğimiz resimlerin boyutlarını Java programları içinden ayarlayabiliriz. Önce herhangi bir gif veya jpg türünden bir resim dosyası bulun, bulduğunuz bu resmi çalışmakta olduğunuz alana koyun ( programı kaydettiğiniz dizinin içi ) Benim bu bölümde kullandığım resim ana dizinde bulunan (C:/) demi.jpg dosyası. Bu resmin boyutları 297*480 boyutlarında ve 640*480 dpi çözünürlüğe sahip ve disk üzerinde 25240 byte yer kaplıyor. Eğer bu dosya gif formatında kaydedilseydi 96351 byte yer kaplayacaktı. Görüldüğü gibi JPG türü az yer kaplayan bir resim türüdür. Bu nedenle iletişim hızı diğer türlere göre daha fazladır bu nedenle internette en cok kullanılan türdür.
Şimdi aşağıdaki resimboyutlari.html dosyasını hazırlayalım.
<html>
<title>resimboyutlari.html</title>
<body>
<applet code=resimboyutlari.class width=500 height=450>
</applet>
<body>
</html>
Java programının kaynak kodu ise aşağıda verilmiştir:
import java.awt.*;
import java.applet.*;
public class resimboyutlari extends Applet
{
// TANIMLAMALAR---------------------------------------------------------------------------------------------
Image demi;
Font kalinfont12=new Font("TimesRoman",Font.BOLD,12);
Font kalinfont18=new Font("TimesRoman",Font.BOLD,18);
Font kalinfont24=new Font("TimesRoman",Font.BOLD,24);
// RESIM DOSYASINI OKU-----------------------------------------------------------------------------------
public **** init()
{
demi=getImage(getCodeBase(), "./demi.jpg");
}
// RESIM DOSYASINI EKRANA GETIR -------------------------------------------------------------------
public **** paint(Graphics resim)
{
// Bu Metodta Kullanılan Degiskenler
int xKoordinati;
int yKoordinati;
int resminEni;
int resminYuksekligi;
int resminYkoordinati;
//Yazi tipini belirle
resim.setFont(kalinfont18);
//Resmin Enini ve Yüksekligini Belirle
resminEni=demi.getWidth(this);
resminYuksekligi=demi.getHeight(this);
//Baslangıc Koordinatlarini Ayarla
xKoordinati=10;
resminYkoordinati=10;
yKoordinati=resminYkoordinati;
//Resmi Ekrana Yerlestir
resim.drawImage(demi,xKoordinati,yKoordinati,this);
//Mesajın y Koordinatını Belirle
yKoordinati=resminYkoordinati+resminYuksekligi+20;
//Mesaj yaz
resim.drawString("Orjinal Boyutlar", xKoordinati,yKoordinati);
//Ikinci Resmin Sol Ust Koordinatlarini Belirle
xKoordinati=xKoordinati+resminEni+10;
yKoordinati=resminYkoordinati;
//Resmi %50 ufalt
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/2,resminYuksekligi/2,this);
//Mesajin y Koordinatini belirle
yKoordinati=resminYkoordinati+resminYuksekligi/2+20;
//Mesaj Yaz
resim.drawString("%50 ufak",xKoordinati,yKoordinati);
//Ucuncu Resmin Sol ust Koordinatlarini belirle
xKoordinati=xKoordinati+(resminEni/2)+10;
yKoordinati=resminYkoordinati;
//Resmi %75 Ufalt
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/4,resminYuksekligi/4,this);
//Mesajin y Koordinatini Belirle
yKoordinati=resminYkoordinati+resminYuksekligi/4+20;
//Mesaj Yaz
resim.drawString("%75 ufak",xKoordinati,yKoordinati);
}
}
Programın sonucunu aşağıda görüyorsunuz.
<applet code="resimboyutlari.class" align="baseline" width="600" height="530"></applet>
İlk resmin orjinal boyutunda ve sol üst koordinatları
xKoordinati=10;
resminYkoordinati=10;
Ykoordinati=resminYkoordinati;
komutlari ile belirleniyor ve orjinal resim
resim.drawImage(demi,xKoordinati,yKoordinati,this);
komutu ile ekrandaki yerine yerleştiriliyor. Bu işlemden önce ise
resminEni=demi.getWidth(this);
resminYuksekligi=demi.getHeight(this);
komutları ile getWidth() ve getHeight() metotlarından yararlanılıyor, Orjinal resmin en ve yüksekliğini pixel olarak belirliyoruz.
Resmin altına
resim.draw.String("Orjinal boyutlar",xKoordinatı,yKoordinatı);
komutu ile bir bilgi satırı yolluyoruz.
Diğer iki resim için yine drawImage() metodunu kullanıyoruz, fakat bu kez parametre sayıları biraz değişik:
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni/2,resminYuksekligi/2,this);
satırında görüldüğü gibi yKoordinatı değişkeni ile this sözcüğü arasında iki parametre daha bulunuyor ve bu parametrelerle x ve y yönlerinde resmi hangi oranda küçültmek istediğimizi belirtiyoruz. İkinci resimde bu oran /2 olduğundan, orjinal resmin eni ve boyu ikiye bölünüyor ve %50 oranında ufalmış oluyor. Üçüncü resimde oran /4 ve resim dolayısıyla %75 oranında ufalmış oluyor.
Eğer bir resmin iki misli büyümesini istersek yukarıdaki program satırını aşağıdaki şekilde değiştirmaniz gerekiyor.
resim.drawImage(demi,xKoordinati,yKoordinati,resminEni*2,resminYuksekligi*2,this);
Resmin genel görüntüsünün bozulmaması için resmi küçültme veya büyültme işlemleri gerek x, gerekse y yönünde aynı olmalıdır. Aksi taktirde değişik görüntüler ortaya çıkabilir. Bu nedenle küçültme ve büyültme işlemlerine dikkat etmenizde yarar var.
Bu bölümde yapılan örneklerde yalnızca Internet'ten alınan çeşitli fotoğraflar kullanılmıştır.Tabii ki resim dosyaları çeşitli grafik ve çizim osyalarınıda içerebilmektedir. Sizde bu bölüme kadar öğrendiklerinizle bazı denemeler yaparak çok değişik görünümde applet'ler üretebilirsiniz.
