BAB 3 MODEL GARIS Anda telah mempelajari bagaimana membuat objek geometri sederhana dan bentuk-bentuk kompleks lainnya. Dalam modul berikutnya akan dibahas tentang pengaturan tipe-tipe garis pada grafik. Materi yang dipelajari meliputi pemilihan model garis/outline (stroking) yang diterapkan dalam pembuatan objek geometri.
1.1 TIPE-TIPE GARIS Java 2D menyertakan interface Stroke untuk menampilkan tipe-tipe garis. Implementasi interface stroke yang nyata adalah dengan menggunakan kelas BasicStroke. Kelas BasicStroke menyediakan pengaturan untuk lebar, bentuk akhir garis, bentuk gabungan antar garis, dan garis putus-putus. Konstruktor dari BasicStroke adalah sebagai berikut: ✔
BasicStroke()
✔
BasicStroke(float width)
✔
BasicStroke(float width, int cap, int join)
✔
BasicStroke(float width, int cap, int join, float miterlimit)
✔
BasicStroke(float width, int cap, int join, float miterlimit, float[] dash, float dashphase)
Parameter width mendefinisikan lebar dari garis yang digambar. Parameter cap mengatur bentuk akhir garis dan dapat menggunakan nilai: ✔
CAP_BUTT
✔
CAP_ROUND
✔
CAP_SQUARE
Parameter join mendefinisikan bentuk penggabungan dua garis dengan nilai: ✔
JOIN_BEVEL
✔
JOIN_MITER
✔
JOIN_ROUND
miterlimit mengatur batasan untuk untuk JOIN_MITER untuk menanggulangi bentuk gabungan dua garis yang sangat panjang ketika sudut antara kedua garis kecil. Array dash mendefinisikan pola garis putus-putus dengan mengatur panjang segment ON/OF. Dasphase mendefinisikan bentuk titik awal dalam pola garis putus-putus.
Graphics2D mempunyai method berikut untuk menentukan model garis sekarang: void setStroke(Stroke s) Listing berikut mempertunjukkan efek grafik yang menggambar garis dengan tipe garis (stroke) yang berbeda-beda. Listing 3.1. TestStroke1.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; public class TestStroke1 extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Test Stroke-1"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new TestStroke1(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new Panel2D(); getContentPane().add(panel); } } class Panel2D extends JPanel{ public Panel2D() { setPreferredSize(new Dimension(500, 400)); setBackground(Color.white); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g;
//menggambar sebuah garis dengan ketebalan 3 (piksel) BasicStroke bsGarisTebal = new BasicStroke(3.0f); g2.setStroke(bsGarisTebal); g2.drawLine(30,50,30,250); //array untuk mendiskkripsikan pola garis putus-putus. float[] dashPattern; //offset dimana pola garis putus-putus harus mulai. float dashPhase = 0.0f; //pola garis putus-putus. dashPattern = new float[10]; dashPattern[0] = 4.0f; dashPattern[1] = 5.0f; dashPattern[2] = 8.0f; dashPattern[3] = 5.0f; dashPattern[4] = 12.0f; dashPattern[5] = 5.0f; dashPattern[6] = 16.0f; dashPattern[7] = 5.0f; dashPattern[8] = 20.0f; dashPattern[9] = 5.0f; //pendefinisian dari BasicStroke yang akan digunakan. BasicStroke bsBerpola = new BasicStroke(3.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL,2.0f, dashPattern, dashPhase); g2.setStroke(bsBerpola); //Menggambar sebuah garis dengan pola putus-putus. g2.drawLine(60,50,60,250); //sebuah pola putus-putus yang sederhana dengan panjang garis(dash) 20 dan //lebar jarak 10. dashPattern = new float[2]; dashPattern[0] = 20; dashPattern[1] = 10;
//Pendefinisian BasicStroke yang akan digunakan. BasicStroke bsDashed = new BasicStroke(3.0f,BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL,2.0f, dashPattern,dashPhase); g2.setStroke(bsDashed); //menggambar sebuah garis (vertikal) dengan pola yang telah //didefinisikan sebelumnya. g2.drawLine(120,50,120,250); //menggambar sebuah garis (diagonal) dengan pola yang //telah didefinisikan sebelumnya. g2.drawLine(150,50,350,250); //Menggunakan pola garis putus-putus yang sama seperti sebelumnya, //tetapi dengan offset 10 dashPhase = 10.0f; //Pendefinisain BasicStroke yang akan digunakan. BasicStroke bsDashedShifted = new BasicStroke(3.0f,BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL,2.0f, dashPattern,dashPhase); //menggambar sebuah garis (vertikal) dengan pola putus-putus yang telah //didefinisikan sebelumnya. g2.setStroke(bsDashedShifted); g2.drawLine(90,50,90,250); } } Latihan: Ketiklah
kode
program diatas. Kemudian
compile
dan
jalankan. Apa
yang
dihasilkan
oleh
program tersebut? Jelaskan! Jawab: ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________
Berikut adalah contoh penerapan kelas BasicStroke dalam sebuah program yang digunakan untuk menggambar objek geometri sederhana. Listing 3.2. TestStrokeGeom.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.font.*; import java.awt.geom.*; public class TestStrokeGeom extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Test Stroke-2"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JApplet applet = new TestStrokeGeom(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new Panel2D(); getContentPane().add(panel); } } class Panel2D extends JPanel{ public Panel2D() { setPreferredSize(new Dimension(500, 400)); setBackground(Color.white); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; //menggambar sebuah garis dengan ketebalan 3 (piksel) BasicStroke bsGarisTebal = new BasicStroke(3.0f); g2.setStroke(bsGarisTebal); g2.drawLine(30,50,30,250);
//array untuk mendiskkripsikan pola garis putus-putus. float[] dashPattern; //offset dimana pola garis putus-putus harus mulai. float dashPhase = 0.0f; //pola garis putus-putus. dashPattern = new float[10]; dashPattern[0] = 4.0f; dashPattern[1] = 5.0f; dashPattern[2] = 8.0f; dashPattern[3] = 5.0f; dashPattern[4] = 12.0f; dashPattern[5] = 5.0f; dashPattern[6] = 16.0f; dashPattern[7] = 5.0f; dashPattern[8] = 20.0f; dashPattern[9] = 5.0f; //pendefinisian dari BasicStroke yang akan digunakan. BasicStroke bsBerpola = new BasicStroke(3.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL,2.0f, dashPattern, dashPhase); g2.setStroke(bsBerpola); //Menggambar sebuah garis dengan pola putus-putus yang telah didefinisikan //sebelumnya g2.drawLine(100,100,200,200); //sebuah pola putus-putus yang sederhana dengan panjang garis(dash) 20 dan //lebar jarak antar garis 10. dashPattern = new float[2]; dashPattern[0] = 20; dashPattern[1] = 10; //pendefinisian BasicStroke yang akan digunakan. BasicStroke bsGarisPutusPutus = new BasicStroke(3.0f,BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL,2.0f, dashPattern,dashPhase); g2.setStroke(bsGarisPutusPutus); //menggambar persegipanjang dengan pola garis putus-putus yang telah //didefinisikan sebelumnya. g2.draw(new Rectangle2D.Double(50, 25, 100, 50));
//menggambar elips dengan pola garis putus-putus //sama seperti sebelumnya g2.draw(new Ellipse2D.Double(200,50,100,50)); //menggambar busur dengan pola garis putus-putus //sama seperti sebelumnya. g2.draw(new Arc2D.Double(200, 125, 100, 50, 90, 135, Arc2D.OPEN)); //gambar kurva kuadrat dengan pola garis putus-putus //sama seperti sebelumnya. g2.draw(new QuadCurve2D.Double(100,250,175,175,300,250)); //gambar kurva kubik g2.draw(new CubicCurve2D.Double(50,300,150, 200,200,400,300,300)); } } Latihan: Ketiklah
kode
program diatas. Kemudian
compile
dan
jalankan. Apa
yang
dihasilkan
oleh
program tersebut? Jelaskan! Jawab: ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ Listing 3.3 mempertunjukkan efek grafik yang menggambar dengan pengaturan tipe garis (stroke) yang berbeda-beda. Listing 3.3 TestStroke.java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.awt.geom.*; public class TestStroke extends JApplet { public static void main(String s[]) { JFrame frame = new JFrame(); frame.setTitle("Test Strokes"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JApplet applet = new TestStroke(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); } public void init() { JPanel panel = new StrokePanel(); getContentPane().add(panel); } } class StrokePanel extends JPanel { public StrokePanel() { setPreferredSize(new Dimension(700, 400)); setBackground(Color.white); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; GeneralPath path = new GeneralPath(GeneralPath.WIND_EVEN_ODD); //menggambar objek bebas path.moveTo(0,120); path.lineTo(80,0); path.lineTo(160,120); //mengatur bentuk gabungan dua garis dengan: //tebal = 20 //bentuk akhir garis = CAP_BUTT //bentuk gabungan = JOIN_BEVEL Stroke stroke = new BasicStroke(20, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL); g2.setStroke(stroke); g2.translate(50,50); g2.draw(path);
g2.drawString("JOIN_BEVEL",100,0); g2.drawString("CAP_BUTT", 40, 120); //mengatur bentuk gabungan dua garis dengan: //tebal = 20 //bentuk akhir garis = CAP_ROUND //bentuk gabungan = JOIN_MITTER stroke = new BasicStroke(20, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER); g2.setStroke(stroke); g2.translate(200,0); g2.draw(path); g2.drawString("JOIN_MITER",100,0); g2.drawString("CAP_ROUND", 40, 120); //mengatur bentuk gabungan dua garis dengan: //tebal = 20 //bentuk akhir garis = CAP_SQUARE //bentuk gabungan = JOIN_ROUND stroke = new BasicStroke(20, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_ROUND); g2.setStroke(stroke); g2.translate(200,0); g2.draw(path); g2.drawString("JOIN_ROUND",100,0); g2.drawString("CAP_SQUARE", 40, 120); //menggambar garis putus-putus //pola garis float[] dashArray = {60,20,20,40}; //bentuk awal float dashPhase = 0; //mengatur model garis dengan: //mengatur bentuk gabungan dua garis dengan: //tebal = 10 //bentuk akhir garis = CAP_BUTT //bentuk gabungan = JOIN_BEVEL
stroke = new BasicStroke(10, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL, 0, dashArray, dashPhase); g2.setStroke(stroke); g2.translate(-400,200); g2.drawLine(100, 50, 550, 50); g2.drawString("dash=60 20 20 40", 250, 10); g2.drawString("phase=0", 0, 50); dashPhase = 20; //mengatur model garis dengan: //mengatur bentuk gabungan dua garis dengan: //tebal = 10 //bentuk akhir garis = CAP_BUTT //bentuk gabungan = JOIN_BEVEL stroke = new BasicStroke(10, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL, 0, dashArray, dashPhase); g2.setStroke(stroke); g2.translate(0,50); g2.drawLine(100, 50, 550, 50); g2.drawString("phase=20", 0, 50); } } Latihan: Ketiklah
kode
program diatas. Kemudian
compile
dan
jalankan. Apa
yang
dihasilkan
oleh
program tersebut? Jelaskan! Jawab: ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________
Tugas Projek Tahap II Lengkapilah program yang sudah Anda buat sebelumnya dengan menu yang digunakan untuk pengaturan garis pada objek geometri yang terpilih untuk ditampilkan. Lihat screenshot berikut:
Gambar 3.1 Menu (objek) persegipanjang dan (tipe garis) putus-putus terpilih
Gambar 3.1 Menu (objek) elips dan (tipe garis) tebal terpilih
Keterangan: 1. Tampilan di atas hanya merupakan contoh saja. 2. Dalam tahap II (kedua) program ditambah kemampuan untuk menentukan tipe garis (stroke) yang digunakan untuk menampilkan objek geometri saja. 3. Silahkan membuat program menurut kreativitas masing-masing, misalnya: ✔
Untuk membuat menu “tipe garis” yang akan ditampilkan bisa diganti menggunakan radioButton.
✔
Ditambah TextField yang digunakan untuk menentukan ketebalan garis.
4. Dan lain-lain. 5. Penambahan menu “tipe garis” diharapkan dapat diselesaikan dalam satu minggu, supaya tidak terbebani pada tahapan projek berikutnya. 6. Happy codding…! --- End of File ---
