JavaFX Cookbook

Search this site

Basic Shapes and Text


The JavaFX application framework supports several fundamental shape constructs that can be readily used.  In addition to geometrical shapes, JavaFX also supports textual shapes to draw text on the screen.  The following code segment draws several of the fundamental geometrical shapes supported by JavaFX:

import javafx.stage.Stage;
import javafx.stage.Screen;
import javafx.scene.Scene;

import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.StrokeLineCap;

def spacer = 100;
Stage {
    title: "Simple Shapes!"
    width: 500
    height: 300
    x: 100;
    y: 200
    scene: Scene {
        content: [
            Line {
                startX: 10
                startY: 10
                endX: 10 + spacer
                endY: 10 + spacer
                strokeWidth: 5.0
                stroke: Color.BLUE
                strokeLineCap: StrokeLineCap.BUTT
            },
            Rectangle {
                x: spacer + 50
                y: spacer + 20
                width: spacer + 20
                height: spacer
                arcWidth: 20
                arcHeight: 20
                fill: Color.RED
                strokeWidth: 5.0
                stroke: Color.BLUE
            },
            Circle {
                centerX: spacer + 300
                centerY: 50
                radius: 50
                fill: Color.GREEN
                strokeWidth: 1.0
                stroke: Color.BLACK
            },
            Ellipse {
                centerX: spacer + 300
                centerY: 150
                radiusX: 100
                radiusY: 20
                fill: Color.RED
                strokeWidth: 5.0
                stroke: Color.BLUE
            }
        ]
    }
}

When this code is executed, you get the shapes shown in the figure below:

Drawing Text

One of the most fundamental node types available in JavaFX is the Text node. It is used to draw letter shapes on the screen that can be manipulated like any other shapes offered by the JavaFX platform.  The code below draws a simple Text on the screen with content "This is a simple text demo."


import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;

Stage {
    title: "Text Demo"
    scene: Scene {
        width: 400
        height: 200
        content: [
            Text {
                x:50 y: 25
                wrappingWidth: 300
                font: Font {
                    size: 28
                    name:"Arial Black"
                    letterSpacing:0.1
                    oblique:true
                    }
                fill:Color.BROWN
                content: "This is a simple text demo."
            }
        ]
    }
}

The code above produces the text you see below on the application's screen:


The materials on this website represent a small sample of content loosely based on the book JavaFX Application Development Cookbook.  The book offers far more content with over 80 recipes covering a range of topics from basics to advanced concepts.  

Buy the Book

You can get your copy of the book directly from the publisher. Click here to order!