Nakreslete čáry v JavaFX – Jak snadno vytvořit tvary

Kreslení tvarů je základní součástí vývoje GUI. S JavaFX můžeš snadno vytvářet různé tvary, které dodají tvé aplikaci vizuální přitažlivost. V tomto tutoriálu se zaměříme na nejjednodušší tvar: čáru. Naučíš se, jak nakreslit, upravit a stylizovat čáru ve scéně JavaFX.

Nejdůležitější poznatky

• Použití třídy Line k vytvoření čáry v JavaFX.
• Přizpůsobení barvy a šířky čáry.
• Úvod do čárkovaných čar a různých stylů čar.

Podrobný návod

Abychom vytvořili čáru v JavaFX, postupuj podle těchto kroků:

Krok 1: Vytvoření základního HBoxu

Aby se tvá čára zobrazila, nejprve musíš vytvořit HBox. Ten slouží jako kontejner pro všechny grafické komponenty.

Nejprve je třeba instanciovat box. Nový HBox vytvoříš pomocí následujícího kódu:

HBox box = new HBox();

Krok 2: Vytvoření scény

Teď je čas vytvořit scénu, do které vložíš svůj HBox. Velikost scény a tedy malovací plochy můžeš nastavit na 400x400 pixelů.

Zde je kód pro vytvoření scény:

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

Krok 3: Vložení čáry

Abychom nyní nakreslili čáru, využijeme třídu Line. Ta ti umožňuje přímo v konstruktoru zadat počáteční a koncový bod čáry.

Příklad: vytvoříš čáru, která jde od bodu (0,0) do bodu (200,200):

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

Krok 4: Přidání čáry do scény

Aby se čára zobrazila, musíš ji přidat do HBoxu. K tomu použiješ metodu getChildren().addAll().

Zde je příslušný kód:

box.getChildren().addAll(line);

Krok 5: Pochopení počátečního bodu

Důležitou vlastností JavaFX je, že počáteční bod se nachází v levém horním rohu malovací plochy. Pozitivní hodnoty jdou dolů pro y-osa a doprava pro x-osa.

Krok 6: Barvení čáry

Aby byla čára viditelnější, můžeš její barvu změnit příkazem setStroke().

Použij tento kód pro změnu barvy na červenou:

line.setStroke(Color.RED);

Krok 7: Úprava tloušťky čáry

Šířku čáry můžeš také upravit. K tomu využiješ metodu setStrokeWidth().

Použij tento kód pro zvýšení šířky na 25 pixelů:

line.setStrokeWidth(25);

Krok 8: Tvorba čárkovaných čar

Pro vytvoření čárkované čáry potřebuješ DashArray. Tato metoda ti umožní nastavit vzory pro čáru.

Zde je příklad, jak vytvořit čárkovanou čáru:

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

Krok 9: Definování stylu čáry

Konce čáry mohou být buď kulaté nebo hranaté. Aby byl styl kulatý, použij příkaz setStrokeLineCap().

Zde je příslušný kód:

line.setStrokeLineCap(StrokeLineCap.ROUND);

Krok 10: Interaktivní cvičení

Nyní, když znáš principy kreslení čar v JavaFX, můžeš se pokusit o malé cvičení. Zkus nakreslit jednoduchý dům pomocí čar pro základy a střechu.

Pozastav video a pokus se nakreslit dům!

Shrnutí

V tomto tutoriálu jsi se naučil, jak vytvořit, upravit a stylizovat čáru v JavaFX. Seznámil jsi se se základy grafického uživatelského rozhraní, abys mohl pokračovat s dalšími tvary v následujících videích.