2. diel - Programovanie jednoduchých Java GUI hier - Kreslenie

V tomto diele sa pozrieme na to, ako na JPanel kresliť rôzne tvary a text.

Kreslenie

Trieda hlavného okna bude zostávať väčšinou rovnaká ako v predchádzajúcich príkladoch.

import javax.swing.JFrame;

public class MujProgram extends JFrame {

    MujProgram() {
        this.setTitle("Jednoduchý Kreslící Program");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        KresliciPanel panel = new KresliciPanel();
        this.add(panel);

        this.pack();
    }

    public static void main(String[] args) {
        MujProgram program = new MujProgram();
        program.setVisible(true);
    }
}

Meniť sa bude hlavne trieda panelu.

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import javax.swing.JPanel;

public class KresliciPanel extends JPanel {

    public KresliciPanel() {
        this.setPreferredSize(new Dimension(400, 300));
        this.setFont(new Font("Courier", Font.BOLD, 20));
        this.setBackground(Color.RED);
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        // Kreslení textu
        g.drawString("Ahoj", 50, 80);
        g.setColor(Color.GREEN);
        g.drawString("Nazdar", 120, 70);
        g.setColor(Color.WHITE);
        g.drawString("Čau", 10, 210);

        // Kreslení čar
        g.drawLine(30, 30, 200, 90);
        g.drawLine(50, 110, 90, 30);
        g.setColor(Color.MAGENTA);
        g.drawLine(10, 250, 360, 40);

        // Kreslení a vyplňování tvarů
        g.drawRect(300, 20, 65, 35);

        g.setColor(Color.DARK_GRAY);
        g.fillRect(200, 150, 50, 30);
        g.drawRect(200, 150, 50, 30);

        g.fillOval(320, 260, 70, 30);
        g.setColor(Color.CYAN);
        g.drawOval(320, 260, 70, 30);
    }
}

Pribudli nám dva nové importy z balíčka AWT. Trieda Font slúži pre prácu s písmom a trieda Graphics pre prácu s grafikou.

public KresliciPanel() {
    this.setPreferredSize(new Dimension(400, 300));
    this.setFont(new Font("Courier", Font.BOLD, 20));
    this.setBackground(Color.RED);
}

Ak nám nevyhovuje prednastavené písmo, môžeme sami určiť, aký font sa má použiť. Stačí vytvoriť inštanciu triedy Font a zadať tri parametre (typ písma, aké má byť, veľkosť v bodoch). Aké typy písma sú k dispozícii záleží na vašom operačnom systéme. K tomu či má byť písmo tučne, normálne či kurzívou slúži konštanty Font.BOLD, Font.PLAIN a Font.ITALIC.

Komponenty, na ktoré je možné maľovať, poskytujú metódu paintComponent (), kreré je volaná pri vykreslenie komponenty a v ktorej môžeme nadefinovať, čo sa má na komponent kresliť.

public void paintComponent(Graphics g) {
}

Parameter Graphics predstavuje grafický kontext a umožňuje nám kreslenie na ľubovoľné grafické zariadení a ich do metódy vložený, takže sa nemusíme starať o jeho vytvorenie. Môžeme ho jednoducho rovno začať používať.

super.paintComponent(g);

V našej triede sme prepísali metódu painComponent () a tým pádom sme stratili funkcionalitu, ktorá bola naprogramovaná v rodičovskej triede. Táto metóda napríklad kreslí pozadie. To by sa nám celkom hodilo takže to urobíme tak, že zavoláme rodičovskú metódu, tá sa vykoná a potom sa vykoná kód, ktorý sme napísali my.

// Kreslení textu
g.drawString("Ahoj", 50, 80);
g.setColor(Color.GREEN);
g.drawString("Nazdar", 120, 70);
g.setColor(Color.WHITE);
g.drawString("Čau", 10, 210);

Ak chceme nakresliť text, voláme metódu Drawstring () triedy Graphics. Ako parameter zadávame požadovaný text a súradnice, kam chceme text nakresliť. Metóda setColor () nastavuje farbu, ktorou sa bude kresliť.

// Kreslení čar
g.drawLine(30, 30, 200, 90);
g.drawLine(50, 110, 90, 30);
g.setColor(Color.MAGENTA);
g.drawLine(10, 250, 360, 40);

Metóda drawLine (x1, y1, x2, y2) nakreslí čiaru od bodu so súradnicami [x1, y1] k bodu so súradnicami [x2, y2].

// Kreslení a vyplňování tvarů
g.drawRect(300, 20, 65, 35);

g.setColor(Color.DARK_GRAY);
g.fillRect(200, 150, 50, 30);
g.drawRect(200, 150, 50, 30);

g.fillOval(320, 260, 70, 30);
g.setColor(Color.CYAN);
g.drawOval(320, 260, 70, 30);

Metóda drawRect (x1, y1, šírka, výška) nakreslí obrys obdĺžnika. Výplň obdĺžnika sa vykoná metódou fillRect (x1, y1, šírka, výška). Odporúčaný postup je najskôr vykonať vyplnenie a až potom obrys, zvlášť ak používate rozdielne farby. Metóda fillOval (x1, y1, šírka, výška) a drawOval (x1, y1, šírka, výška) vypĺňa a kreslí elipsu a zadané parametre určujú obrysový obdĺžnik elipsy. Kresliacich metód existuje samozrejme oveľa viac a ja vám ukážem ešte jednu užitočnú.

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JPanel;

public class KresliciPanel2 extends JPanel {
    private int[] souradniceX = {
        50, 50, 70, 70, 90, 90, 110, 110,
        130, 130, 150, 150, 250, 250, 270,
        270, 290, 290, 310, 310, 330, 330,
        350, 350, 330, 330, 300, 270, 270};
    private int[] souradniceY = {
        300, 120, 120, 140, 140, 120, 120,
        140, 140, 120, 120, 200, 200, 50,
        50, 70, 70, 50, 50, 70, 70, 50, 50,
        300, 300, 240, 210, 240, 300};

    public KresliciPanel2() {
        this.setPreferredSize(new Dimension(400, 300));
        this.setBackground(Color.blue);
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        // parametry: pole souřadnic bodu x, pole souřadnice bodu y, počet bodů
        g.setColor(Color.darkGray);
        g.fillPolygon(souradniceX, souradniceY, souradniceX.length);
        g.drawPolygon(souradniceX, souradniceY, souradniceX.length);
    }
}

Ak chcete vidieť výsledok, budete si musieť program spustiť.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.