Grafika Komputer untuk Resize Object Secara Dinamis
Kita akan belajar bermain-main dengan grafika komputer yaitu membuat image viewer menggunakan wadah JFrame dengan bantuan component JButton serta melakukan drawing rectangle on the fly. Grafik Komputer disini hanya fokus 2D yang simple dengan memanfaatkan listener berupa mouse serta menggunakan bahasa Java Swing sebagai GUI nya nanti. Demo ini untuk mempermudah ukuran gambar akan menyesuaikan ukuran JFrame secara dinamis. Seperti yang kita tahu bahwa setiap SWING GUI mempunyai methode paint() yang akan dipanggil terus menerus by system untuk menggambar component GUI. Ada banyak sih component SWING GUI yang bisa kita gambar seperti JLabel, Canvas, JPanel, JButton.
Hal yang paling mudah kita bisa extends component tersebut kemudian lakukan overide method paint(). Saya akan mulai langkah sederhana untuk membuat image viewer dengan JFrame dengan terlebih dahulu membuat class Button yang merupakan extends dari JButton yang belum dilakukan overide method paint(). Kita akan membuat Button dengan tuliasn Button yang akan ditempel pada JFrame.
class Button extends JButton{
public Button(){
super();
setSize(100,100);
setText("Button");
}
};
Untuk memanggilnya component agar tampil di GUI maka kita butuh wadah berupa JFrame
public class NewMain {
public static void main(String[] args) {
// TODO code application logic here
JFrame frame = new JFrame();
frame.setSize(new Dimension(100,100));
Button button = new Button();
frame.add(button);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Bila class NewMain tersebut di run, maka akan tampil GUI JFrame dengan Button. Membuat Image Viewer dengan JFrame kita butuh gambar serta harus overide methode paint() seperti berikut
class Button extends JButton{
Image IMAGE;
File FILE;
Dimension DIMENSION;
public Button(){
super();
setSize(100,100);
setText("Button");
FILE = new File("D:/sawit.jpg");
}
public void paint(Graphics g){
IMAGE = new ImageIcon(FILE.getAbsolutePath()).getImage();
DIMENSION = new Dimension(IMAGE.getWidth(null),IMAGE.getHeight(null));
g.drawImage(IMAGE,
0,
0,
DIMENSION.width,DIMENSION.height,
null);
}
};
Apa yang terjadi? button tersebut langsung berisi gambar serta tidak ada tulisan lagi button. Namun demikian ukuran gambar tidak bisa menyesuaikan dengan ukuran frame.
Hal menarik pada component GUI SWING java yaitu berlimpahnya action listener untuk menghandle event seperti klik mouse, key, dan banyak macam lainnya. Event yang dibutuhkan ketika ada resize JFrame yaitu
oleh sebab itu ketika event resize() pada JFrame maka akan ada update di paint dengan passing dimension Frame menjadi size nya Button tersebut. Sehingga kita butuh listener ketika terjadi event pada JFrame yaitu addComponentListener. Perhatikan kode berikut yang telah ditambahkan listener. Jadi ketika terjadi listener tersebut maka akan ada update DIMENSION ke button.
public class NewMain {
public static void main(String[] args) {
// TODO code application logic here
JFrame frame = new JFrame();
frame.setSize(new Dimension(100,100));
Button button = new Button();
frame.add(button);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
frame.addComponentListener(new ComponentAdapter(){
@Override
public void componentResized(ComponentEvent evt) {
Dimension actualSize = frame.getContentPane().getSize();
button.DIMENSION = actualSize;
}
});
frame.setVisible(true);
}
}
Kita aka mengubah kode pada paint() dan membuat initial DIMENSION biar nggak error ketika constructor dipanggil.
class Button extends JButton{
Image IMAGE;
File FILE;
Dimension DIMENSION;
public Button(){
super();
setSize(100,100);
setText("Button");
FILE = new File("D:/sawit.jpg");
DIMENSION = new Dimension(100,100);//sebagai awalan saja
}
@Override
public void paint(Graphics g){
IMAGE = new ImageIcon(FILE.getAbsolutePath()).getImage();
//DIMENSION = new Dimension(IMAGE.getWidth(null),IMAGE.getHeight(null));
g.drawImage(IMAGE,
0,
0,
DIMENSION.width,DIMENSION.height,
null);
}
};
Jadi ketika terjadi resize, maka ukuran gambar pun akan mengikuti ukuran Frame nya.
Sekarang kita melangkah lebih jauh lagi, untuk membuat gambar overlay croping di atas gambar tersebut dengan memanfaatkan action listener yaitu
- addMouseListener ketika mousePressed
- addMouseMotionListener ketika mouseDragged
Jadi ketika mouse di klik dan drag maka akan ada kotak yang mengikutinya
Yuk kita modifikasi menjadi seperi berikut jadi kita butuh Point A, B sebagai titik awal dan akhir. Setiap akan update akan ada cek terlebih dahulu apakah A dan B !=null?
class Button extends JButton{
Image IMAGE;
File FILE;
Dimension DIMENSION;
Point A,B;
public Button(){
super();
setSize(100,100);
setText("Button");
FILE = new File("D:/sawit.jpg");
DIMENSION = new Dimension(100,100);//sebagai awalan saja
this.addMouseListener(new MouseAdapter(){
@Override
public void mousePressed(MouseEvent e){
System.out.println("aku sedang di klik");
A = new Point(e.getX(),e.getY());
}
});
this.addMouseMotionListener(new MouseAdapter() {
@Override
public void mouseDragged(MouseEvent e){
System.out.println("aku sedang di geser");
B = new Point(e.getX(),e.getY());
repaint();
}
});
}
@Override
public void paint(Graphics g){
IMAGE = new ImageIcon(FILE.getAbsolutePath()).getImage();
g.drawImage(IMAGE,
0,
0,
DIMENSION.width,DIMENSION.height,
null);
g.setColor(Color.white);
int diameter = 10;
if(A!=null){
g.fillOval(A.x-diameter/2,A.y-diameter/2,diameter,diameter);
}
if(B!=null){
g.fillOval(B.x-diameter/2,B.y-diameter/2,diameter,diameter);
}
if(A!=null && B!=null){
g.drawRect(A.x,A.y,B.x-A.x,B.y-A.y);
}
}
};
Biar lebih keren, kita tambahkan bulatan kecil sebagai penanda g.fillOval(A.x-diameter/2,A.y-diameter/2,diameter,diameter); sedangkan rectangle nya dihandle oleh g.drawRect(A.x,A.y,B.x-A.x,B.y-A.y);
Aplikasi diatas masih sangat sederhana, kalian bisa kembangkan lebih lanjut. Ini nanti sebagai dasar untuk membuat aplikasi deskewing lho!. Grafika Komputer pada Java yang wajib kalian pahami yaitu class Graphics dan Graphics2D serta event handling berupa mouse sebagai trigger nya.
Menggunakan Java karena saya pikir lebih mudah saja selain class built nya sudah sangat bagus, tapi kalau mau coba kalian bisa menggunakan C# (net framework kepunyaan windows) serta satu hal lagi lebih mudah membuat code secara manual daripada drag and drop di Netbeans.
