...
Grafikk-modellen til JavaFX er basert på en såkalt scene-graph, som er en tretrestruktur av node-struktur av objekter som beskriver hva som skal vises på skjermen. Elementene i treet kalles noder, og siden Når en endrer på trestrukturen eller egenskaper i nodene som påvirker hvordan de ser ut på skjermen, så sørger JavaFX automatisk for at de tegnes opp på nytt. Siden både rene grafiske elementer og interaktive elementer i JavaFX er noder, så står en fritt til å kombinere disse som en vil. Interaktive elementer er i grunnen ikke annet enn grafiske elementer som reagerer på og oppdateres iht. bruker-input. Ved kløktig rigging av node-strukturen og timing av endringene, så kan en få til et vell av av effekter.
Det finnes noen fellestrekk som gjelder for alle nodene man bruker i JavaFX. Alle noder, utenom rotnoden, legges til i grafen ved å legge dem inn i children-lista til en Parent-instans. En node kan bare være ett sted i hierarkiet og dersom man forsøker å legge til et objekt som allerede er i hierarkiet til en annen/ny container, så vil objektet fjernes fra dens forrige, før den legges til den nye.
Koordinatsystem
Alle noder har en x,y-posisjon og størrelse (desimaltall) i et koordinatsystem med økende verdier mot høyre på x-aksen og nedover på y-aksen. Med dette er altså (0,0) øverst til venstre. Denne x,y-posisjonen angis imidlertid ikke direkte, men er kombinasjonen av flere egenskaper:
- translateX og translateY - forskyver noden i x- og y-retningen
- rotate - roterer noden et antall grader rundt et gitt referansepunkt.
- scaleX og scaleY - skalerer størrelen med en x- og y-faktor og settes med scale-metoden
- layoutX og layoutY - gir en ekstra forskyving i x- og y-retning og brukes gjerne i forbindelse med midlertidige justeringer, f.eks. drag'n drop
Dette gir ganske stor fleksibilitet ved utforming av grafikk og effekter. F.eks. kan en lage en ruter-formet figur på flere måter, f.eks. som fire rette streker med passende koordinater, eller som et rektangel som er rotert 45 grader. Det går også an å knytte egne transformasjonsobjekter til noder, hvor disse egenskapene kombineres.
Koordinatene til en node er relativt til noden over i trestrukturen, slik at endring av posisjonen til en node automatisk påvirker nodene under. F.eks. kan en gruppere noder som utgjør en større figur i en samle-node og flytte alle på en gang ved å endre posisjonen til samle-noden.
Figurer
Det finnes en rekke standard-figurer som kan brukes for rent grafisk innhold. Disse er alle subklasser av Shape-klassen (javafx.scene.
...
...
shape), som får dermed en del felles egenskaper:
- fyll (fill) - fargen eller effekten (av typen Paint) som fyller figuren
- strek (stroke) - fargen eller effekten som brukes for å tegne figuren
- strek-tykkelse (strokeWidth), plassering (strokeType), stipling (strokeDashOffset) og hjørne/endehåndtering (strokeLineJoin og strokeLineCap)
Nyttige figurer er strek (Line), rektangel (Rectangle), sirkel og ellipse (Circle og Ellipse), buesegment (Arc), polygon (Polygon), segmentert figur (Path) og tekst (Text). I tillegg er det en egen klasse for bilder (ImageView som viser et Image, som ikke er en Shape). Noen av disse er vist i eksemplet under, hvor center-regionen er fylt med et Pane-objekt med noen figurer i, med ulike grafiske effekter.
...
@Override
public void start(Stage stage) throws Exception {
BorderPane root = new BorderPane();
root.setTop( new
|
|
...
...
...
...
...
...
...
Pane shapesPane = new Pane();
|
|
...
shapesPane.setPrefSize( 300 ,
|
|
...
...
...
...
...
...
...
...
...
...
line.getStrokeDashArray().setAll( 10 .0d,
|
|
...
...
...
Rectangle rect = new Rectangle( 150 ,
|
|
...
...
...
...
...
...
...
...
rect.setFill(Color.BLUE);
|
|
...
Ellipse ell = new Ellipse( 40 ,
|
|
...
...
...
...
...
...
...
...
ell.setStroke(Color.RED);
|
|
...
...
ell.setFill(Color.GREEN);
|
|
...
Text text = new Text( 180 ,
|
|
...
...
...
List<String> fonts = Font.getFamilies();
|
|
...
...
...
...
...
...
...
shapesPane.getChildren().addAll(line,
|
|
...
...
...
...
root.setCenter(shapesPane);
|
|
...
Scene scene = new Scene(root,
|
|
...
...
...
...
stage.setTitle( "BorderPaneApplication" );
|
|
...
...
| Image Added |
Figurer i FXML
Til hver node kan det knyttes en id, altså et unikt navn (må sikres av utvikleren) tilsvarende id-tag'en i HTML. En nyttig funksjon er lookup(String id) som kan brukes til å finne en node med en unik id i en del av hierarkiet. Ellers kan også id'en brukes til å identifisere noder når man bruker css-stiler (mer om css lenger ned).