Page History

...

Det finnes noen fellestrekk som gjelder for alle nodene elementene (ofte kalt noder) man bruker i JavaFX. Alle noderelementene, utenom den øverste (ofte kalt rotnoden), legges til i grafen ved å legge dem inn i children-lista til en Parent-instanselementet over. En node kan bare være ett sted i hierarkiet treet og dersom man forsøker å legge til et objekt et element som allerede er i hierarkiet til treet under en annen /ny containernode, så vil objektet fjernes fra dens forrige, før den legges til den nyeelementet flyttes, ikke kopieres.

Koordinatsystem

Alle noder har en x,y-posisjon og størrelse (desimaltall) i et koordinatsystem med økende x-verdier mot høyre på x-aksen og skjermen og økende y-verdier nedover på y-aksenskjermen. Med dette er altså (0,0) øverst til venstre. Denne x,y-posisjonen angis imidlertid ikke direkte, men er kombinasjonen av flere egenskaper:

translateX layoutX og translateY layoutY - forskyver noden i x- og y-retningen. Det er disse som vanligvis brukes for å angi posisjonen, f.eks. den automatiske layouten som gjøres av paneler som AnchorPane.
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 translateX og layoutY translateY - gir en ekstra forskyving i x- og y-retning og brukes gjerne i forbindelse med midlertidige justeringer, f.eks. drag'n drop. Denne kommer i tillegg til layoutX og layoutY.

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.

...

Det finnes mange standard-figurer som kan brukes for rent grafisk innhold. Disse er alle subklasser av Shape-klassen (javafx.scene.shape), som dermed 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 (omrisset til) figuren
strokeWidth (strek-tykkelse (strokeWidth), strokeType (plassering (strokeType), strokeDashOffset (stipling (strokeDashOffset) og hjørne/endehåndtering ( strokeLineJoin og strokeLineCap (håndtering av hjørner og ender)

Nyttige figurer er Line (strek), Rectangle (Linerektangel), rektangel Circle (Rectanglesirkel), sirkel og ellipse (Circle og Ellipse Ellipse (ellipse), Arc (buesegment (Arc), polygon Polygon (Polygonmangekant), Path (segmentert figur (Path) og Text (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 eksemplet under, hvor center-regionen til en BorderPane er fylt med et Pane-objekt med noen figurer i, med . Figurene har fått ulike grafiske effekteregenskaper, for å illustrere hva de gjør.

Code Block

language	java

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

...

Page tree

Versions Compared

Old Version 6

New Version Current

Key

Koordinatsystem