Grid Canvas dengan Java Graphic 2D


Jika Anda pengguna image editor (e.g. photoshop) tentunya sering melihat kanvas kotak-kotak abuabu-putih seperti yang terlihat pada latar gambar di bawah ini :

 

 

 

 

 

 

Bagaimana memprogram tampilan tersebut pada Java Graphics 2D ?

Sekilas tentang Java Graphics 2D, itu merupakan library yang dimiliki oleh bahasa Java untuk menggambarkan segala macam bentuk objek 2 dimensi. Library tersebut terdapat pada kelas java.awt.Graphics yang meng-extend java.awt.Graphics2D. Kita dapat menggambarkan bentuk-bentuk 2 dimensi tersebut pada objek lain (berfungsi sebagai kanvas), yaitu objek-objek yang diinstansiasi dari kelas Component ataupun kelas anak-anaknya yang memiliki method paint(Graphics g). Untuk lebih jelasnya silakan baca tutorialnya di http://docs.oracle.com/javase/tutorial/2d/index.html.

Solusi yang paling gampang untuk mem-plot grid canvas adalah membuat gambar kotak-kotak pada image editor apapun, simpan dengan ekstensi format image (png, gif, jpg, bmp, dll), lalu membuat program membaca dan menampilkan gambar di java. Tentunya cara seperti ini tidak begitu asyik karena memerlukan file gambar eksternal yang bersifat statik. Agar lebih asyik, kita dapat memprogramnya dengan menggunakan objek TexturePaint. Berikut kode program grid canvas yang direpresentasikan dengan method drawGrid() :

/*
* @drawGrid(gd,tileWidth)
* Parameter : tileWidth --> ukuran sisi kotak persegi
*/
public void drawGrid(Graphics2D gd, int tileWidth)
{
Rectangle2D gridCanvas = new Rectangle2D.Double(0,0,this.getWidth(), this.getHeight());
BufferedImage bi = new BufferedImage(tileWidth * 2, tileWidth * 2,BufferedImage.TYPE_INT_RGB);
Graphics2D big = bi.createGraphics();
big.setColor(Color.white);
//kiri atas
big.fillRect(0, 0, tileWidth, tileWidth);
//kanan bawah
big.fillRect(tileWidth, tileWidth, tileWidth, tileWidth);
<p>big.setColor(Color.lightGray);
//kanan atas
big.fillRect(tileWidth, 0, tileWidth, tileWidth);
//kiri bawah
big.fillRect(0, tileWidth, tileWidth, tileWidth);
<p>Rectangle r = new Rectangle(0, 0, tileWidth * 2, tileWidth * 2);
gd.setPaint(new TexturePaint(bi, r));
gd.fill(gridCanvas);
}

Tulislah method di atas pada kelas yang Anda buat sendiri. Kelas tersebut harus meng-extend kelas Component ataupun salah satu anak dari kelas Component (e.g.: Container, JComponent, JFrame, JPanel, dll). Untuk menggunakan method tersebut, tinggal memanggilnya pada method paint(Graphics g) atau paintComponent(Graphics2D gd) yang di-override dari kelas parent. Berikut ini contoh pemanggilannya pada method paintComponent(Graphics g), menggambarkan grid dengan ukuran kotak persegi bersisi 10 pixel :

@Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D gd = (Graphics2D) g;
gd.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BICUBIC);
//draw canvas grid
this.drawGrid(gd, 10);
}

Selamat mencoba !šŸ™‚

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s