Upload
madzani-nusa
View
807
Download
6
Embed Size (px)
Citation preview
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