Memahami konsep dan cara "Menggambar" teks yang baik di Java

Dalam postingan sebelumnya, saya banyak menjabarkan cara membuat komponen swing supaya lebih menarik, kebanyakan menggunakan gambar dan teks (String) yang di "Gambar" kedalam komponen java (JPanel, JTextField, dll) dengan cara meng-override method paint() atau PaintComponent(). Kalau banyak diantara temen-temen yang sudah mencoba dan mengimplementasikan teknik ini, pasti ada diantara nya yang menyadari bahwa "Menggambar" teks akan terasa lebih sulit jika dibandingkan dengan "Menggambar" gambar/Image. Untuk "Menggambar" teks pada komponen java kita bisa menggunakan method drawString(), Namun sering kali yang terjadi adalah letak atau posisi teks tidak berada pada posisi yang kita inginkan.

Hal ini terjadi disebabkan oleh perbedaan letak/posisi baseline pada teks dan image. Oke gambar berikut saya harapkan dapat memberikan penjelasan:

Gambaran Text Bounds (Batasan Teks)

Jadi untuk "Menggambar" teks pada posisi yang kita inginkan, diperlukan mekanisme/teknik khusus untuk menangani ini. berikut cara yang bisa digunakan untuk "menggambar" teks (KASUS: saya ingin menggambarkan teks padi bagian tengah komponen):

1. Cari letak/posisi tengah komponen yang akan menjadi "kanvas" dsari tulisan kita (baik berupa JPanel, JTextField, dll)
2. 2. Mencari/Menentukan text bound dari teks yang akan kita gambarkan.
3. Cari Visual Bound dari teks yang akan kita gambarkan
4. Menghitung titik kiri bawah dari teks. perhatikan bahwa kita mencari koordinat y di mana kita ingin menjadikan dasar untuk menempatkan/menggambar teks. kemudian menggunakan tinggi dari batas visual (Visual bounds pada langkah sebelumnya) untuk dijadikan pusat dari teks yang akan kita gambarkan.

Pusing? hehe sante coba simak kode dibawah ini supaya lebih faham tentang konsep ini:

graphics2D.setFont(new Font("Helvetica", Font.BOLD, 32));

// Langkah 1
        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;

// Langkah 2
        FontMetrics fontMetrics = graphics2D.getFontMetrics();
        Rectangle stringBounds = fontMetrics.getStringBounds(text, graphics2D).getBounds();

// Langkah 3
        Font font = graphics2D.getFont();
        FontRenderContext renderContext = graphics2D.getFontRenderContext();
        GlyphVector glyphVector = font.createGlyphVector(renderContext, text);
        Rectangle visualBounds = glyphVector.getVisualBounds().getBounds();

// Langkah 4
        int textX = centerX - stringBounds.width / 2;
        int textY = centerY - visualBounds.height / 2 - visualBounds.y;

        graphics2D.drawString(text, textX, textY);

Oke, ini dia hasilnya

Tampilan JPanel yang telah di "Gambari" dengan tulisan javadanphp.blogspot.com

Posisi teks benar benar berada pada bagian tengah komponen, bahkan ketika di resize, posisinya pun akan mengikuti, berbeda dengan ketika kita hanya menggunakan method ini saja untuk menggambarkan String/teks.

Hasil gambar tetap berada di tengah saat di resize

Silahkan download Netbeans projectnya, untuk kode lengkapnya disini.

Terima kasih sudah meluangkan waktu untuk mengunjungi blog ini.