Java ile Resim Görüntüleyici (Grafik Uygulaması)

Bu projede bir grafik uygulaması tasarlandı ve Java ile kodlandı. Uygulamanın amacı bir resim dosyasından resim yüklemek (şimdilik Jpeg, Gif ve Windows BMP formatları desteklenmektedir), resmi ekranda göstermek ve son olarak da kullanıcının resim üzerine değişik renk ve boyutlarda dikdörtgenler çizebilmesini sağlamaktır (bu dikdörtgenler aslında resmin içinde olmayan ve resme iliştirilen not kutucukları olarak düşünülmelidir).

Dikdörtgenler resim üzerinde saydam olarak görünmektedir. Ek olarak, kullanıcı fare kullanarak bu dikdörtgenleri resim üzerinde taşıyabilmektedir. Uygulamanın anahtar noktası şudur: dikdörtgenlerin resim üzerindeki hareketi resmin yeniden çizilmesini (repaint) gerektirmemelidir. Yani, dikdörtgenin hareketi sırasında yeniden çizilmenin neden olduğu titreşim (flicker) görülmemelidir. Bu hem performans için hem de etkin kullanım için gereklidir. Yeniden çizilmenin ve titreşimin oluşmasına izin verilen zamanlar sadece hareketin tam başladığı ve tam sona erdiği anlardır. Hareket süresince yeniden çizilme olmamalıdır.

Kullanıcı çizilecek dikdörtgenin rengini seçebilir ya da resim üzerinde yer alan bir dikdörtgenin rengini değiştirebilir. Ayrıca, dikdörtgenler istenilirse resim üzerinden kaldırılabilir. Kullanıcı ayrıca resmi ve tabi ki üzerindeki dikdörtgenleri %10 ila %400 arasında bir zum faktörüyle yeniden boyutlandırabilir. Resim üzerindeki bütün işlemler herhangi bir zum faktöründe de aynı şekilde gerçekleştirilebilmektedir.

TASARIM & KODLAMA

Genel Görünüm

Uygulama temel olarak iki kısımdan oluşan tek formlu bir kullanıcı arayüzüne sahiptir. İlk kısım yüklenen resmin gösterildiği ve kullanıcının üzerinde işlemler yapabildiği çizim alanı yani kanvastır. Bu kanvas herhangi bir zum faktöründe resmi nasıl görüntüleyeceğini ve tabi ki üzerindeki dikdörtgenleri orantılı biçimde çizeceğini bilmektedir.

Uygulamanın diğer görsel kısmı ise kullanıcının kullanabileceği araçların yer aldığı bir araç çubuğu ve renk seçimi için bir renk paletinin bulunduğu kısımdır. Şu anda 4 temel araç bulunmaktadır: Seçim aracı (varsayılan araç olan bu araç dikdörtgenlerin hareket ettirilmesini sağlar), Dikdörtgen aracı (resim üzerine yeni bir dikdörtgen çizmek için), Renk Değiştirme aracı (herhangi bir dikdörtgenin rengini değiştirmek için), Silme aracı (resim üzerinde görüntülenen herhangi bir dikdörtgeni silmek için). Ek olarak %10 ila %400 arasında bir zum faktörü seçilebilmesi için bir zum aracı da araç çubuğunda yer almaktadır.

Model – View – Controller Yaklaşımı

Uygulamanın tasarımında mümkün olduğunca MVC yaklaşımı esas alınmıştır. Uygulamanın doğası gereği Model, View ve Controller belli ölçüde iç içe geçmektedir. Şekil 1'de tasarımın UML şeması görülmektedir.

Figure 1. UML diagram of the design.

Şekil 1'de MainFrame sınıfının yalnızca en önemli alanları ve metodları gösterilmiştir. MainFrame, uygulamanın merkezî sınıfıdır ve tasarımın Model kısmıdır. MainFrame ayrıca uygulamanın Control mantığını da içermektedir çünkü MainFrameEar sınıfı sadece gerekli olayları dinlemekle ve bunları gerçekte işlemlerin gerçekleştiği MainFrame yönlendirmektedir.

En önemli iş tasarımın View kısmı olan EnhCanvas tarafından yapılmaktadır. Resim dosyalarının yüklenmesinden, seçilen zum faktörüne göre resmin görüntülenmesinden EnhCanvas sorumludur. Resim üzerindeki dikdörtgenlerin yönetimi de ayrıca EnhCanvas'ın sorumluluğundadır. Dikdörtgenlerin titreşimsiz bir biçimde hareket ettirilmesi MainFrame'den gelen çağrıların EnhCanvas tarafından yanıtlanması şeklinde gerçekleşmektedir. EnhCanvas sınıfı ayrıca PictureAnnotation sınıfından örneklerin de bir listesini barındırmaktadır.

PictureAnnotation sınıfı bütün annotation (resime iliştirilen not kutucuğu) sınıflarının soyut sınıfıdır (abstract class). Şimdilik bu sınıftan türeyen RectangleAnnotation sınıfı gerçeklenmiştir. Tasarımda bu şekilde bir sınıf hiyerarşisinin kullanılmasının sebebi ileride değişik türde annotation'ların da eklenebilmesine olanak sağlanmasıdır; örneğin oval not kutucukları ya da sadece metin olarak eklenen notlar vs. Her PictureAnnotation iki Rectangle alan içermektedir. Bir tanesi annotation'ın resim üzerindeki orijinal konumunu saklamak için (yani %100 zum faktöründeki konum) ve diğeri de gösterimdeki zum faktörüne göre resim üzerindeki görüntülenen konumu saklamak için kullanılmaktadır.

Dikdörtgenler Titreşimsiz Olarak (Flicker-free) Nasıl Hareket Ettirilir

Kanvas üzerinde fare sürükleme hareketi (drag) başlatıldığında kanvasa ilgili zum faktörüne göre hareketin başladığı konumda hangi dikdörtgenin bulunduğu sorulur. Eğer geçerli bir dikdörtgen bulunursa EnhCanvas'ın pickUpAnnotation metodu çağrılır. Bu metod dikdörtgenin altında kalan alanın derhal yeniden çizilmesine neden olur. Hemen ardından ise XOR tekniği ile dikdörtgenin hareketi başlar. Dikdörtgen ilk olarak XOR tekniği ile resim üzerine çizilir. Hareket ettirildiğinde ise önceki konumuna yeniden XOR tekniği ile çizilir. Böylece önceki konum için resmin yeniden çizilmesine gerek kalmadan yani repaint edilmesine gerek kalmadan önceki kısım orijinal haline dönmüş olur. Bu yöntem bir dikdörtgenin titreşime neden olmaksızın hareket ettirilebilmesi için en uygun yöntemdir. Ardından dikdörtgen yeni konumuna çizilir. Bu işlemler dizisi sürüklenme yani hareket bitene kadar tekrarlanır. Son olarak EnhCanvas'ın dropAnnotation metodu çağrılır. Bu çağrı ile dikdörtgenin altındaki alan dikdörtgenin rengi ve saydamlığı ile yeniden çizilir.

SONUÇ

Bu dokümanda sınıflar arası ilişkilerin gösterildiği bir UML şeması da verilerek bir grafik uygulamasının tasarımından bahsedilmektedir. Ek olarak kısaca tasarımın nasıl gerçeklendiğine de değinilmektedir. Uygulamanın tasarımında Model-View-Controller yaklaşımı model alınmış ve uygulama belirli işlemleri gerçekleştiren ayrı sınıflara bölünmüştür. Dokümanın sonunda uygulamaya ait çeşitli ekran görüntüleri görülebilir.

UYGULAMADAN EKRAN GÖRÜNTÜLERİ

Şekil 2. Bir resim orijinal boyutlarıyla görüntüleniyor; görünüm alanına sığmıyor.

Şekil 3. Aynı resim %50 zum faktörüyle görüntüleniyor; şimdi görünüm alanına sığıyor.

Şekil 4. Resim üzerinde üç saydam dikdörtgen; kırmızı, yeşil ve mavi.

Şekil 5. Yeşil dikdörtgen hareket ettirilirken.

KAYNAK KODUNU İNDİRİN

Projenin kaynak kodunu indirmek için tıklayın (75KB zip dosyası)