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.

Under ser du et eksempel på en tre-struktur som inneholder en sirkel, et rektangel, en tekst og et bilde (de to siste er gruppert). Akkurat hvordan det vil se ut på skjermen er ikke vist. Det er blant annet avhengig av koordinatene og størrelsen til noden og grafiske effekter som fargen som brukes på streker og til å fylle figurer og strek-typen.

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(); }