...
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. En mulighet er vist under til høyre.
Image Modified | Image Added |
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 effekter.egenskaper, for å illustrere hva de gjør.
Code Block |
---|
| @Override
public void |
@Override
public void start(Stage stage) throws Exception | {
BorderPane root = new {
BorderPane root = new BorderPane(); // Root of the scene | graph
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 = new Pane(); |
shapesPane.setPrefSize(300, 300); |
Line line = new
Line line = new Line(10, 10, 100, 100); // x1, y1, x2, | y2 y2
line.getStrokeDashArray().setAll(10.0d, 10.0d); // | dashes Rectangle rect = new dashes
Rectangle rect = new Rectangle(150, 10, 30, 40); // x, y, w, | h h
rect.setFill(Color.BLUE); |
Ellipse ell = new
Ellipse ell = new Ellipse(40, 180, 40, 30); // cx, cy, rx, | ry ry
ell.setStroke(Color.RED); |
ell.setFill(Color.GREEN); |
Text text = new
Text text = new Text(180, 180, "center"); |
List<String> fonts =
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 scene = new Scene(root, 500, 500); |
stage.setTitle("BorderPaneApplication"); |
| ![](https://www.ntnu.no/wiki/download/attachments/65936865/BorderPaneShapesApplication.png?version=2&modificationDate=1394187023000&api=v2) |