Tajuk: Grafik 2D dengan Java

Genius Corner Siri 43

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan Java bahagian yang ke sebelas. Di dalam latihan kali ini, kita akan bina aplikasi ringkas yang membolehkan pengguna melukis segiempat menggunakan tetikus.

 

Selaku bahasa pengaturcaraan paling popular di dunia, Java menyediakan library grafik 2D dan 3D yang sangat luas dan berdaya tinggi. Sukacita dimaklumkan, ruangan Java akan diganti dengan ruangan “Java for Native Android” bermula Januari 2018.

 

Tanpa membuang masa, mari kita mulakan latihan kali ini.

 

Latihan

 

Langkah 1: Buka mana-mana perisian editor teks seperti Notepad atau Sublime dan tuliskan kod aturcara berikut di dalam ruangan editor.

 

import java.awt.AlphaComposite;

import java.awt.BasicStroke;

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Point;

import java.awt.RenderingHints;

import java.awt.Shape;

import java.awt.event.MouseAdapter;

import java.awt.event.MouseEvent;

import java.awt.event.MouseMotionAdapter;

import java.awt.geom.Line2D;

import java.awt.geom.Rectangle2D;

import java.util.ArrayList;

import javax.swing.JComponent;

import javax.swing.JFrame;

public class DrawingBoardWithMatrix extends JFrame {

 public static void main(String[] args) {

   new DrawingBoardWithMatrix();

 }

 public DrawingBoardWithMatrix() {

   this.setSize(300, 300);

   this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

   this.add(new PaintSurface(), BorderLayout.CENTER);

   this.setVisible(true);

 }

 private class PaintSurface extends JComponent {

   ArrayList<Shape> shapes = new ArrayList<Shape>();

   Point startDrag, endDrag;

   public PaintSurface() {

     this.addMouseListener(new MouseAdapter() {

       public void mousePressed(MouseEvent e) {

         startDrag = new Point(e.getX(), e.getY());

         endDrag = startDrag;

         repaint();

       }

       public void mouseReleased(MouseEvent e) {

         Shape r = makeRectangle(startDrag.x, startDrag.y, e.getX(), e.getY());

         shapes.add(r);

         startDrag = null;

         endDrag = null;

         repaint();

       }

     });

     this.addMouseMotionListener(new MouseMotionAdapter() {

       public void mouseDragged(MouseEvent e) {

         endDrag = new Point(e.getX(), e.getY());

         repaint();

       }

     });

   }

   private void paintBackground(Graphics2D g2){

     g2.setPaint(Color.LIGHT_GRAY);

     for (int i = 0; i < getSize().width; i += 10) {

       Shape line = new Line2D.Float(i, 0, i, getSize().height);

       g2.draw(line);

     }

     for (int i = 0; i < getSize().height; i += 10) {

       Shape line = new Line2D.Float(0, i, getSize().width, i);

       g2.draw(line);

     }

     

   }

   public void paint(Graphics g) {

     Graphics2D g2 = (Graphics2D) g;

     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

     paintBackground(g2);

     Color[] colors = { Color.YELLOW, Color.MAGENTA, Color.CYAN , Color.RED, Color.BLUE, Color.PINK};

     int colorIndex = 0;

     g2.setStroke(new BasicStroke(2));

     g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.50f));

     for (Shape s : shapes) {

       g2.setPaint(Color.BLACK);

       g2.draw(s);

       g2.setPaint(colors[(colorIndex++) % 6]);

       g2.fill(s);

     }

     if (startDrag != null && endDrag != null) {

       g2.setPaint(Color.LIGHT_GRAY);

       Shape r = makeRectangle(startDrag.x, startDrag.y, endDrag.x, endDrag.y);

       g2.draw(r);

     }

   }

   private Rectangle2D.Float makeRectangle(int x1, int y1, int x2, int y2) {

     return new Rectangle2D.Float(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x1 – x2), Math.abs(y1 – y2));

   }

 }

}

 

Langkah 2: Save hasil kerja anda dengan nama DrawingBoardWithMatrix.java di dalam direktori Genius Corner.

 

Langkah 3: Buka Command Prompt (Windows) atau Terminal (Mac) dan taipkan arahan-arahan berikut

 

javac DrawingBoardWithMatrix.java

java DrawingBoardWithMatrix

 

Langkah 4: Untuk mencuba, gerakkan tetikus di dalam ruang yang disediakan dan lukiskan segiempat anda

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan aplikasi Java yang membolehkan pengguna melukis imej segiempat di dalam tetingkap yang disediakan. Ketika aplikasi mula dihidupkan, fungsi paintBackground() ditugaskan melukis latar tetingkap.

 

Seterusnya, tiga komponen utama iaitu fungsi makeRectangle(), paint() dan PaintSurface() dipanggil untuk melukis objek berbentuk segiempat setiap kali pengguna melukis menggunakan tetikus.

Para pensyarah dari sekitar Kuala Lumpur sedang mengikuti bengkel Android

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Semua segiempat dihasilkan dengan warna yang sama.
  2. Besarkan ruangan tetingkap yang dihasilkan.
  3. Gantikan segiempat dengan segitiga.

 

Jika anda ingin mendapatkan khidmat nasihat percuma berkenaan pengaturcaraan Java, sila emailkan kepada farizgaskin@gmail.com dan kami akan jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!