Kreslenie čiar v JavaFX – Takto jednoducho vytvoríš tvary

Kreslenie tvarov je základnou súčasťou vývoja GUI. S JavaFX môžeš jednoducho vytvoriť rôzne tvary, ktoré dodajú tvojej aplikácii viac vizuálnej atraktívnosti. V tomto návode sa zameriame na najjednoduchší tvar: čiaru. Naučíš sa, ako nakresliť čiaru v scéne JavaFX, prispôsobiť ju a stilizovať.

Najdôležitejšie poznatky

• Použitie triedy Line na vytvorenie čiary v JavaFX.
• Prispôsobenie farby a hrúbky čiary.
• Úvod do prerušovaných čiar a rôznych štýlov čiar.

Krok-za-krokom návod

Aby si vytvoril čiaru v JavaFX, postupuj podľa týchto krokov:

Krok 1: Vytvorenie základnej HBox

Aby si zobrazil svoju čiaru, najprv musíš vytvoriť HBox. Ten slúži ako kontajner pre všetky grafické komponenty.

Najskôr sa vytvorí box. Môžeš vytvoriť nový HBox použitím nasledujúceho kódu:

HBox box = new HBox();

Krok 2: Vytvorenie scény

Teraz je čas vytvoriť scénu, do ktorej bude vložený tvoj HBox. Veľkosť scény a teda aj maľovacieho poľa môžeš nastaviť na 400x400 pixelov.

Toto je kód na vytvorenie scény:

Scene scene = new Scene(box, 400, 400);

Krok 3: Vloženie čiary

Aby si teraz nakreslil čiaru, použiješ triedu Line. Tá ti umožňuje určiť počiatočné a koncové body čiary priamo v konštruktore.

Napríklad vytvoríš čiaru, ktorá sa tiahne od bodu (0,0) do bodu (200,200):

Line line = new Line(0, 0, 200, 200);

Krok 4: Pridanie čiary do scény

Aby si čiaru spravil viditeľnou, musíš ju pridať do HBoxu. Na to použiješ metódu getChildren().addAll().

Tu je príslušný kód:

box.getChildren().addAll(line);

Krok 5: Pochopenie nulového bodu

Dôležitou vlastnosťou JavaFX je, že nulový bod sa nachádza v ľavom hornom rohu maľovacieho poľa. Kladné hodnoty pritom smerujú nadol pre os y a doprava pre os x.

Krok 6: Farbovanie čiary

Aby si čiaru spravil viditeľnejšou, môžeš zmeniť farbu pomocou príkazu setStroke().

Použi tento kód na zmenu farby na červenú:

line.setStroke(Color.RED);

Krok 7: Prispôsobenie hrúbky čiary

Hrúbku čiary môžeš tiež prispôsobiť. Na to použiješ metódu setStrokeWidth().

Využi tento kód na zvýšenie hrúbky na 25 pixelov:

line.setStrokeWidth(25);

Krok 8: Vytvorenie prerušovaných čiar

Aby si vytvoril prerušovanú čiaru, potrebuješ DashArray. Táto metóda ti umožňuje nastaviť vzory pre čiaru.

Tu je príklad, ako vytvoriť prerušovanú čiaru:

line.getStrokeDashArray().addAll(10.0, 20.0);

Krok 9: Definovanie štýlu čiary

Cap čiary môže byť buď zaoblený, alebo uhlový. Na to, aby si nastavil štýl na zaoblený, použij príkaz setStrokeLineCap().

Toto je príslušný kód:

line.setStrokeLineCap(StrokeLineCap.ROUND);

Krok 10: Interaktívne cvičenie

Teraz, keď poznáš princípy kreslenia čiar v JavaFX, môžeš sa pustiť do malého cvičenia. Skús nakresliť jednoduchý dom použitím čiar na základ a strechu.

Pozastav video a skús načrtnúť dom!

Zhrnutie

V tomto návode si sa naučil, ako vytvoriť, prispôsobiť a stilizovať čiaru v JavaFX. Zoznámil si sa so základmi grafického používateľského rozhrania, aby si mohol pokračovať s ostatnými tvarmi v nasledujúcich videách.