Grafika Komputer untuk Resize Object Secara Dinamis

By | April 24, 2022
Print Friendly, PDF & Email
254 Views

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.

See also  Croping Image dengan Mouse Event

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

  1. addMouseListener ketika mousePressed
  2. 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.

See also  Croping Image dengan Mouse Event

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.

Leave a Reply

Your email address will not be published.




Enter Captcha Here :