Teken lijnen in JavaFX - Zo maak je gemakkelijk vormen

Het tekenen van vormen is een fundamenteel onderdeel van de GUI-ontwikkeling. Met JavaFX kun je eenvoudig verschillende vormen maken die je toepassing meer visuele aantrekkingskracht geven. In deze tutorial richten we ons op de eenvoudigste vorm: de lijn. Je leert hoe je een lijn in een JavaFX-scène tekent, aanpast en styleert.

Belangrijkste inzichten

• Gebruik van de Line-klasse voor het maken van een lijn in JavaFX.
• Aanpassen van de lijnkleur en -dikte.
• Introductie in gestreepte lijnen en verschillende lijnstijlen.

Stap-voor-stap-handleiding

Om een lijn in JavaFX te maken, volg je deze stappen:

Stap 1: Een basis HBox maken

Om je lijn weer te geven, moet je eerst een HBox maken. Dit dient als container voor alle grafische componenten.

Als eerste wordt de box geïnstantieerd. Je kunt een nieuwe HBox maken door de volgende code te gebruiken:

HBox box = new HBox();

Stap 2: Een scène creëren

Nu is het tijd om een scène te maken waarin je HBox wordt ingevoegd. Je kunt de grootte van de scène en daarmee het tekengebied instellen op 400x400 pixels.

Hier is de code om de scène te creëren:

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

Stap 3: Een lijn invoegen

Om nu een lijn te tekenen, gebruik je de klasse Line. Hiermee kun je de start- en eindpunten van de lijn direct in de constructor specificeren.

Bijvoorbeeld, maak je een lijn die van punt (0,0) naar punt (200,200) loopt:

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

Stap 4: De lijn aan de scène toevoegen

Om de lijn zichtbaar te maken, moet je deze aan de HBox toevoegen. Hiervoor gebruik je de methode getChildren().addAll().

Hier is de bijbehorende code:

box.getChildren().addAll(line);

Stap 5: Het nulpunt begrijpen

Een belangrijke eigenschap van JavaFX is dat het nulpunt zich in de linkerbovenhoek van het tekengebied bevindt. Hierbij lopen positieve waarden naar beneden voor de y-as en naar rechts voor de x-as.

Stap 6: De lijn kleuren

Om de lijn zichtbaarder te maken, kun je de kleur wijzigen met de setStroke()-opdracht.

Gebruik deze code om de kleur rood te maken:

line.setStroke(Color.RED);

Stap 7: Lijndikte aanpassen

Je kunt ook de breedte van de lijn aanpassen. Hiervoor gebruik je de methode setStrokeWidth().

Gebruik deze code om de breedte op 25 pixels te verhogen:

line.setStrokeWidth(25);

Stap 8: Gestreepte lijnen maken

Om een gestreepte lijn te maken, heb je het DashArray nodig. Deze methode stelt je in staat om patronen voor de lijn vast te leggen.

Hier is een voorbeeld om een gestreepte lijn te maken:

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

Stap 9: De lijnstijl definiëren

De cap van de lijn kan ofwel rond ofwel hoekig zijn. Om de stijl op rond te zetten, gebruik je de opdracht setStrokeLineCap().

Hier is de bijbehorende code:

line.setStrokeLineCap(StrokeLineCap.ROUND);

Stap 10: Interactieve oefening

Nu je de principes van het tekenen van lijnen in JavaFX kent, kun je jezelf aan een kleine oefening wagen. Probeer een eenvoudig huis te tekenen door lijnen te gebruiken voor de fundering en het dak.

Pauzeer de video en probeer een huis te schetsen!

Samenvatting

In deze tutorial heb je geleerd hoe je een lijn in JavaFX maakt, aanpast en styleert. Je hebt de basisprincipes van de grafische gebruikersinterface geleerd om met andere Shapes in komende video's verder te gaan.