Views
1 month ago

tornadofx-guide

9. Shapes and Animation

9. Shapes and Animation Shapes and Animation JavaFX comes with nodes that represent almost any geometric shape as well as a Path node that provides facilities required for assembly and management of a geometric path (to create custom shapes). JavaFX also has animation support to gradually change a Node property, creating a visual transition between two states. TornadoFX seeks to streamline all these features through builder constructs. Shape Basics Every parameter to the shape builders are optional, and in most cases default to a value of 0.0 . This means that you only need to provide the parameters you care about. The builders have positional parameters for most of the properties of each shape, and the rest can be set in the functional block that follows. Therefore these are all valid ways to create a rectangle: rectangle { width = 100.0 height = 100.0 } rectangle(width = 100.0, height = 100.0) rectangle(0.0, 0.0, 100.0, 100.0) The form you choose is a matter of preference, but obviously consider the legibility of the code you write. The examples in this chapter specify most of the properties inside the code block for clarity, except when there is no code block support or the parameters are reasonably self-explanatory. Positioning within the Parent Most of the shape builders give you the option to specify the location of the shape within the parent. Whether or not this will have any effect depends on the parent node. An HBox will not care about the x and y coordinates you specify unless you call setManaged(false) on the shape. However, a Group control will. The screenshots in the following examples will be created by wrapping a StackPane with padding around a Group , and finally the shape was created inside that Group as shown below. 132

9. Shapes and Animation class MyView: View() { } override val root = stackpane { group { //shapes will go here } } Rectangle Rectangle defines a rectangle with an optional size and location in the parent. Rounded corners can be specified with the arcWidth and arcHeight properties (Figure 9.1). rectangle { fill = Color.BLUE width = 300.0 height = 150.0 arcWidth = 20.0 arcHeight = 20.0 } Figure 9.1 133

GUIDE TO
GUIDE
GUIDE
GUIDE
Guide
GUIDE
GUIDE
Guide
GUIDE
GUIDE
GUIDE
GUIDE
Guide
Guide
Guide
Guide
guide