Enkel 2d-grafikk med JavaFX

Grafikk-modellen til JavaFX er basert på en såkalt scene-graph, som er en trestruktur av node-objekter som beskriver hva som skal vises på skjermen. 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 mange 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 ekesemplet 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 of the scene graph           // Add one Text node in each surrounding region     root.setTop(new Text("top"));     root.setBottom(new Text("bottom"));     root.setLeft(new Text("left"));     root.setRight(new Text("right"));           Pane shapesPane = new Pane();     shapesPane.setPrefSize(300, 300);     Line line = new Line(10, 10, 100, 100); // x1, y1, x2, y2     line.getStrokeDashArray().setAll(10.0d, 10.0d); // dashes     Rectangle rect = new Rectangle(150, 10, 30, 40); // x, y, w, h     rect.setFill(Color.BLUE);     Ellipse ell = new Ellipse(40, 180, 40, 30); // cx, cy, rx, ry     ell.setStroke(Color.RED);     ell.setStrokeWidth(5);     ell.setFill(Color.GREEN);     Text text = new Text(180, 180, "center");     List<String> fonts = Font.getFamilies();     text.setFont(new Font(fonts.get((int) (Math.random() * fonts.size())), 32));     shapesPane.getChildren().addAll(line, rect, ell, text);     root.setCenter(shapesPane);           Scene scene = new Scene(root, 500, 500);       stage.setScene(scene);     stage.setTitle("BorderPaneApplication");     stage.show(); }