Drawing the Graphical Objects

Sufian Idris, Marini Abu Bakar, Norleyza Jailani

Pengenalan

• Keupayaan melaksanakan operasi grafik disediakan dalam pakej java.awt.

• Antara kemudahan yang disediakan: melukis berbagai jenis bentuk berwarna, memapar imej, animasi.

Kelas Graphics Dan Graphics2D

• Pakej java.awt menyediakan kelas Graphics. • Objek Graphics mengandungi maklumat yang

digunakan dalam melaksanakan operasi grafik. • Operasi grafik dilaksanakan dengan menghantar

mesej tertentu kepada objek ini, antaranya: – drawString(String, int, int) – drawRect(int, int, int, int) – setColor(Color) – setFont(Font)

Kelas Graphics2D

• Java 1.2 menyediakan kelas Graphics2D• merupakan subkelas di bawah kelas

Graphics. • mengandungi fitur tambahan yang lebih

canggih yang tidak terdapat dalam kelas induknya.

• metod paint() masih menerima objek Graphics sebagai parameter.

Kelas Graphics2D

Contoh: import javax.swing.*;import java.awt.*;

public class Grafik extends JApplet {

public void paint(Graphics g) {Graphics2D g2d = (Graphics2D) g;g2d.drawString("Menggunakan Kelas Graphics2d", 10, 20);

}}

Acukan objek g supaya kita boleh Menggunakan ciri-ciri Graphics2d

Bermula di lokasi (10,20)

Sistem Koordinat

• Setiap bekas (objek Container) mempunyai sistem koordinatnya sendiri.

• Sebarang titik pada bekas boleh diwakilkan sebagai koordinat (x, y).

• Dalam AWT, nilai x dan y bagi koordinat (x, y) mestilah berjenis integer.

Sistem Koordinat

Warna Dan Teks

• Untuk memapar suatu teks s pada koordinat (x, y), mesej : drawString(String s, int x, int y) boleh

dihantar kepada objek Graphics.

• g2d.drawString("Apa khabar?", 10, 50);

“Apa Khabar” di lokasi (10,50)

Warna Dan Teks

• Secara lalai, objek Graphics disetkan supaya melukis menggunakan warna hitam. Untuk warna lain, hantar mesej setPaint(Color) kepada objek itu dahulu. g2d.setPaint(Color.red); g2d.drawString("Apa khabar?", 10, 50);

Contoh lagi..

import java.awt.*;import javax.swing.*;public class WarnaTeks extends JApplet {public void paint(Graphics g) {

Graphics2D g2d = (Graphics2D) g;g2d.setPaint(Color.blue);g2d.drawString("Grafik Java", 20, 50);}

}

Contoh..

Bermula di lokasi (20,50)

Kelas Color

• Terdapat beberapa warna yang sedia tertakrif dalam pustaka:Color.white Color.lightGrayColor.gray Color.darkGray

Color.black Color.red Color.pink Color.blue Color.orange Color.yellow Color.green Color.magentaColor.cyan

Kelas FontMetrics • Kelas Component mempunyai metod getFontMetrics(Font) yang akan mengembalikan objek

FontMetrics untuk suatu fon.

Font fon = new Font("TimesRoman", Font.PLAIN, 14);FontMetrics fm = getFontMetrics(fon);

Kelas FontMetrics

e b k p tinggi ascent

baseline descent

leading

Kelas FontMetrics • Antara mesej yang boleh dihantar kepada objek FontMetrics:

– int stringWidth(String str) dapatkan lebar rentetan str bagi fon yang berkenaan int

– getAscent() dapatkan nilai ascent bagi fon yang berkenaan int

– getDescent() dapatkan nilai descent bagi fon yang berkenaan – int getHeight() dapatkan nilai tinggi fon yang berkenaan

e b k p tinggi ascent

baseline descent

leading

Kelas FontMetrics

– int getLeading() dapatkan nilai leading bagi fon yang berkenaan

– int getMaxAscent() dapatkan nilai maksimum ascent (iaitu ascent + leading) bagi fon yang berkenaan

– int getMaxDescent() dapatkan nilai maksimum descent (iaitu descent + leading)bagi fon yang berkenaan

e b k p tinggi ascent

baseline descent

leading

Contoh..import java.awt.*;import javax.swing.*;

public class FonMetrik extends JApplet {public void paint(Graphics g) {

Graphics g2d = (Graphics2D) g;

Font fon = new Font("SanSerif", Font.PLAIN, 14);FontMetrics metrik = getFontMetrics(fon);

String str1 = "Selamat ";int lebar_str1 = metrik.stringWidth(str1);g2d.setFont(fon);g2d.setPaint(Color.blue);g2d.drawString(str1, 50, 50);g2d.setFont(new Font("Serif", Font.BOLD+Font.ITALIC, 24));g2d.setPaint(Color.red);g2d.drawString("Maju Jaya", 50+lebar_str1, 50);

}}

Dapatkan lebar str1

Melukis maju jayadi lokasi selepas str1

Contoh

Melukis Objek Asas

• Java2D menyediakan hirarki kelas Shape yang mengandungi berbagai kelas untuk berbagai jenis bentuk. Antara subkelas di bawah kelas Shape: – Line2D, – Rectangle2D, RoundRectangle2D, – Ellipse2D, Arc2D, QuadCurve2D,– CubicCurve2D, GeneralPath.

Melukis Objek Asas

• Mesej berikut boleh dihantar kepada objek Graphics2D untuk melukis dan mewarna dalaman objek Shape:– void draw(Shape btk) melukis kerangka bentuk btk

– void fill(Shape btk) mewarnakan dalaman bentuk btk

Garis

• Suatu bentuk garis boleh diwakilkan sebagai suatu objek Line2D.Float atau Line2D.Double.

• Kedua-dua kelas Line2D.Float dan Line2D.Double adalah kelas dalaman (inner classes) bagi kelas Line2D.

• Bagi Line2D.Float, koordinat titik hujungnya berjenis float

• Manakala, bagi Line2D.Double, berjenis double.

Garis

• Untuk mencipta suatu objek Line2D yang titik hujungnya (5, 10) dan (25, 40):

•Objek Line2D boleh dicipta tanpa sebarang parameter. Untuk kes ini, koordinat titik hujungnya adalah (0,0) dan (0, 0)

new Line2D.Float(5, 10, 25, 40) ATAUATAUnew Line2D.Double(5, 10, 25, 40)

Garis

• Mesej berikut difahami oleh objek Line2D: – setLine(float x1, float y1, float x2, float y2) – setLine(double x1, double y1, double x2,

double y2)

• setkan koordinat titik hujung kepada (x1, y1) dan (x2, y2)

Contohimport java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoGaris2 extends JApplet {public void paint(Graphics g) {

Graphics2D g2d = (Graphics2D) g;Line2D.Double garis = new Line2D.Double(10, 10, 100, 10);g2d.draw(garis);

// atau g2d.draw(new Line2D.Double(10, 10, 100, 10));}

}

(10,10) (100,10)

Contoh..import java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoGaris1 extends JApplet {private static final int jarak = 10;public void paint(Graphics g) {

Line2D.Double garis = new Line2D.Double();Graphics2D g2d = (Graphics2D) g;g2d.setPaint(Color.blue);int lebarAplet = getSize().width;int tinggiAplet = getSize().height;

for (int i=0; i < tinggiAplet; i += jarak) {garis.setLine(0, i, lebarAplet, i);g2d.draw(garis);}

for (int i=0; i < lebarAplet; i += jarak) {garis.setLine(i, 0, i, tinggiAplet);g2d.draw(garis);}

}} Melukis garis

menegak

Melukis garis melintang

Contoh..

• Ketebalan garis yang dilukis boleh disetkan dengan menggantikan objek Stroke pada objek Graphics2D dengan objek Stroke yang berkenaan

• Contoh: Graphics2D g2d = (Graphics2D) g;Line2D.Double garis = new Line2D.Double(10, 10, 100, 10);g2d.draw(garis);g2d.setStroke(new BasicStroke(10));garis = new Line2D.Double(10, 30, 100, 30);g2d.draw(garis);

Ketebalan Garis

Contohimport java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoGaris2 extends JApplet {public void paint(Graphics g) {

Graphics2D g2d = (Graphics2D) g;Line2D.Double garis = new Line2D.Double(10,

10, 100, 10);g2d.draw(garis);g2d.setStroke(new BasicStroke(10));garis = new Line2D.Double(10, 30, 100, 30);g2d.draw(garis);garis = new Line2D.Double(0, 0,0, 0);g.setColor(Color.blue);g2d.draw(garis);

}}

Ketebalan Garis

Garis kedua dilukis menggunakan objek BasicStroke dengan ketebalan 10

g2d.setStroke(new BasicStroke(10));garis = new Line2D.Double(10, 30, 100,

30);g2d.draw(garis);

Garis ketiga sebagai titik di (0,0) dengan ketebalan 10, berwarna biru

garis = new Line2D.Double(0, 0,0,0);

g.setColor(Color.blue);g2d.draw(garis); Garis pertama

Line2D.Double garis = new Line2D.Double(10, 10, 100, 10);g2d.draw(garis);

Segiempat

• Kelas Rectangle2D disediakan untuk bentuk segiempat. Ia mengandungi dua kelas dalaman iaitu Rectangle2D.Float dan Rectangle2D.Double.

• Untuk mencipta objek Rectangle2D, sama ada :– new Rectangle2D.Float(x, y, lebar, tinggi)

ATAU ATAU – new Rectangle2D.Double(x, y, lebar, tinggi)

Segiempat

• Mesej berikut difahami oleh objek Rectangle2D: – setRect(float x, float y, float w, float h) – setRect(double x, double y, double w, double h)

setkan bucu atas kiri kepada (x, y) dan lebardan tinggi masing-masing kepada w dan h.

Segiempat

Contoh..import java.awt.*;import javax.swing.*;import java.awt.geom.*;public class DemoSegiempat1 extends JApplet {private static final int SAIZ = 30;private static final int SELANG = 5;private static final int X_AWAL = 20;private static final int Y_BARIS = 10;private static final int BILSEGI4 = 10;

public void paint(Graphics g) {Graphics2D g2d = (Graphics2D) g;int x = X_AWAL;Rectangle2D.Double segi4 = new Rectangle2D.Double();for (int i=1; i <= BILSEGI4; i++) {

segi4.setRect(x, Y_BARIS, SAIZ, SAIZ); g2d.draw(segi4);x += (SAIZ+SELANG);

}}}

Melukis segiempat

Menambah selang jarak

arah x

Output:

Latihan• Diberi bentuk dibawah:

• Tulis satu aturcara java bagi mendapatkan bentuk di atas.

20

20 60 100 140

60

100

Segiempat Bucu Melengkung

Segiempat Bucu Melengkung

• Kelas yang digunakan: RoundRectangle2D.

• Untuk mencipta objeknya: – new RoundRectangle2D.Float(x, y, lebar,

tinggi, lebarLengkuk, tinggiLengkuk)

ATAUATAU– new RoundRectangle2D.Float(x, y, lebar,

tinggi, lebarLengkuk, tinggiLengkuk)

Elips

Elips

• Boleh digunakan untuk melukis bulatan iaitu dengan setkan tinggi = lebar

• Untuk mencipta objeknya:– new Ellipse2D.Float(x, y, lebar, tinggi)

ATAUATAU – new Ellipse2D.Double(x, y, lebar,

tinggi)

Elipse

• Mesej berikut difahami oleh objek Ellipse2D: – setFrame(float x, float y, float w, float h) – setFrame(double x, double y, double w,

double h)

• setkan bucu atas kiri, lebar dan tinggi masing-masing kepada (x, y), w dan h.

Contoh

import java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoElips2 extends JApplet {private static final int SAIZ = 50;private static final int SELANG = 10;private static final int X_AWAL = 20;private static final int Y_BARIS = 10;private static final int BIL_ELIPS = 5;

public void paint(Graphics g) {Graphics2D g2d = (Graphics2D) g;int x = X_AWAL;Ellipse2D.Double elips = new Ellipse2D.Double();for (int i=1; i <= BIL_ELIPS; i++) {

elips.setFrame(x, Y_BARIS, SAIZ, SAIZ);g2d.setPaint(Color.red);g2d.setStroke(new BasicStroke(i));g2d.draw(elips);x += (SAIZ-SELANG); } } }

Melukis elips

Menambah selang jarak

arah x

Menambah ketebalan

Output:

Latihan• Diberi bentuk dibawah:

• Tulis satu aturcara java bagi mendapatkan bentuk di atas.

20

20 60 140

60

100

80

Lengkuk

• Lengkuk boleh diwakilkan sebagai objek Arc2D.

Lengkuk

• Untuk mencipta objeknya:– new Arc2D.Float(x, y, lebar, tinggi, sudutMula,

sudutLengkuk, jenis) ATAU

– new Arc2D.Double(x, y, lebar, tinggi, sudutMula, sudutLengkuk, jenis)

– jenis boleh dispesifikasikan sebagai Arc2D.OPEN, Arc2D.PIE atau Arc2D.CHORD

Lengkuk

Arc2D.OPENArc2D.OPEN Arc2D.PIE Arc2D.PIE Arc2D.CHORD Arc2D.CHORD

Mr Packmanimport java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoLengkuk3 extends JApplet {private static final int X_TT_KPL = 100;private static final int Y_TT_KPL = 100;private static final int X_TT_MATA = 100;private static final int Y_TT_MATA = 80;private static final int JEJARI_KPL = 50;private static final int JEJARI_MATA = 5;private static final int SUDUTMULA = 30;

Mr Packmanpublic void paint(Graphics g) {Graphics2D g2d = (Graphics2D) g;Arc2D kepala = new Arc2D.Double(

X_TT_KPL - JEJARI_KPL,,Y_TT_KPL - JEJARI_KPL,,2*JEJARI_KPL,, 2*JEJARI_KPL, , SUDUTMULA,,

360-2*SUDUTMULA,, Arc2D.PIE);g2d.setPaint(Color.magenta);g2d.fill(kepala);

Ellipse2D mata = new Ellipse2D.Double(X_TT_MATA - JEJARI_MATA, Y_TT_MATA - JEJARI_MATA, 2*JEJARI_MATA, 2*JEJARI_MATA);g2d.setPaint(Color.white);g2d.fill(mata); }

}

Melukis kepala

Melukis mata

Output: Mr Packman

Poligon Dan Poligaris

• Poligon : bentuk yang terdiri daripada segmen garis yang membentuk ruang tertutup

• Poligaris : bentuk yang terdiri daripada segmen garis tetapi bucu terakhir tidak bersambung dengan bucu pertama

• Objek GeneralPath digunakan untuk mewakilkan suatu poligon atau poligaris.

• Untuk mencipta objek GeneralPath – new GeneralPath()

Poligon Dan Poligaris

• Mesej yang difahami oleh objek GeneralPath:– moveTo(x, y) :tambah bucu (x, y) – lineTo(x, y): tambah bucu (x, y) yang

disambungkan kepada bucu semasa– closePath(): menutup ruang yang terbentuk

• Mesej closePath() hanya perlu dihantar jika objek GeneralPath mewakilkan bentuk poligon.

Contoh:import java.awt.*;import javax.swing.*;import java.awt.geom.*;

public class DemoPoligon extends JApplet {public void paint(Graphics g) {int[] x = {90, 85, 140, 185, 200, 200, 185, 140, 85};int[] y = {90, 85, 30, 75, 60, 120, 105, 150, 95};Graphics2D g2d = (Graphics2D) g;

GeneralPath poli = new GeneralPath();poli.moveTo(x[0], y[0]);for (int i=1; i < x.length; i++)

poli.lineTo(x[i], y[i]);poli.closePath();g2d.draw(poli);

}}

Tatasusunan x[] dan y[] menyimpan nilai-nilaix dan y bagi poligon

Pergi ke kedudukan(90,90)

Melukis poligon dengan menggunakan

koordinat x[] dan y[]

Kembali semula ke kedudukan mula (90,90)

Output:Koordinat mula

(90,90)

Contoh Butang Elips di klik

Contoh

public class Lukis extends JApplet implements ActionListener{private int x,y;private String s="";private int tinggi,lebar,jejari;PaparanGrafik grafik = new PaparanGrafik();

public void init(){Container pane = getContentPane();pane.setLayout(new BorderLayout());JPanel panel = new JPanel();

JButton garis = new JButton("Garis");garis.addActionListener(this);panel.add(garis);

JButton bulat = new JButton("Ellips");bulat.addActionListener(this);panel.add(bulat);pane.add(panel,"North");pane.add(grafik, "Center");

}

Mendaftarkan komponen

Menyediakan antaramuka

Kelas PaparanGrafik

public void actionPerformed(ActionEvent e){s = e.getActionCommand();if(s.equals("Garis")) {String inputDatax = JOptionPane.showInputDialog (null,"koordinat x");x = Integer.parseInt(inputDatax);

String inputDatay = JOptionPane.showInputDialog (null,"koordinat y");y = Integer.parseInt(inputDatay);

String inputx1 = JOptionPane.showInputDialog (null,"tinggi ");x1 = Integer.parseInt(inputx1);

String inputy1 = JOptionPane.showInputDialog (null,"lebar ");y1 = Integer.parseInt(inputy1);grafik.setBentuk(x, y, x1, y1, s);}

Jika butang garis diklik, dapatkan titik mula dan akhir

bagi garis

else{

String inputDatax = JOptionPane.showInputDialog (null,"koordinat x");

x = Integer.parseInt(inputDatax);

String inputDatay = JOptionPane.showInputDialog (null,"koordinat y");

y = Integer.parseInt(inputDatay);

String inputTinggi = JOptionPane.showInputDialog (null,"tinggi ");

tinggi = Integer.parseInt(inputTinggi);

String inputLebar = JOptionPane.showInputDialog (null,"lebar ");lebar = Integer.parseInt(inputLebar);grafik.setBentuk(x, y, tinggi, lebar, s);

}}}

Jika butang elips diklik, dapatkan (x,y,tinggi dan lebar)

bagi ellips

class PaparanGrafik extends JPanel {private int tinggi,lebar,jejari;private int x,y;private String s = "";

public void setBentuk(int xx, int yy, int l, int t, String bentuk) {x = xx;y = yy;lebar = l;tinggi = t;s = bentuk;repaint();}public void paint(Graphics g){super.paint(g);Graphics2D g2d = (Graphics2D) g;Ellipse2D.Double elips = new Ellipse2D.Double();if (s.equals("Garis")) {g2d.draw(new Line2D.Double(x, y, x+lebar, y+tinggi));}else{g2d.draw(new Ellipse2D.Double(x, y, lebar, tinggi));}

}}

kembali

Kelas ini akan melukis bentuk yang ditentukan oleh butang yang diklik