BasicStroke(float width, int cap, int join, float miterlimit)

(1)

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.

(2)

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);

(3)

//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;

(4)

//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: ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________

(5)

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); }

JPanel panel = new Panel2D(); getContentPane().add(panel); }

}

class Panel2D extends JPanel{ public Panel2D() {

}

Graphics2D g2 = (Graphics2D)g;

//menggambar sebuah garis dengan ketebalan 3 (piksel) BasicStroke bsGarisTebal = new BasicStroke(3.0f); g2.setStroke(bsGarisTebal);

(6)

//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.

(7)

//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:

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");

(8)

JApplet applet = new TestStroke(); applet.init(); frame.getContentPane().add(applet); frame.pack(); frame.setVisible(true); }

JPanel panel = new StrokePanel(); getContentPane().add(panel); }

}

class StrokePanel extends JPanel { public StrokePanel() {

}

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);

(9)

g2.drawString("JOIN_BEVEL",100,0); g2.drawString("CAP_BUTT", 40, 120);

//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);

//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:

(10)

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:

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:

Jawab: ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________ ____________________________________________________________________________________

(11)

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

(12)

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…!