rect.setTranslateX( width-side-gap ); rect.setTranslateY( height-side-gap );
Often it is sensible to create a figure centered at (0,0) and then translate it
to where you want it.
This trick is especially powerful when several shapes make up the figure,
and they are all put in a Group.
A translation (or other transformation) applied to the Group
is applied to every shape within it.
This program draws a startled face emoji.
The circle of the face is centered at (0, 0)
and the eyes and mouth are placed relative to (0, 0).
The face, eyes, and mouth are all put into a Group
and then the Group is translated to the center of the window.
import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*; // location of Group and Scene
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.layout.*;
public class Emoji extends Application
{
public void start( Stage primaryStage )
{
double width = 400.0, height = width*0.75 ;
double radiusFace = width/3.0;
double radiusEye = radiusFace*0.13;
double radiusMouth = radiusFace*0.25;
double mouthX = 0.0;
double mouthY = radiusFace*0.35;
double eyeY = -radiusFace*0.26;
double leftEyeX = -radiusFace*0.30;
double rightEyeX = -leftEyeX;
// circle centered at (0,0)
Circle face = new Circle( radiusFace );
face.setFill( new Color( 0.98, 0.82, 0.38, 1.0 ) );
// mouth positioned below (0,0)
Circle mouth= new Circle( mouthX, mouthY, radiusMouth );
mouth.setFill( new Color( 0.45, 0.35, 0.15, 1.0 ) );
// eyes positioned above (0,0)
Circle leftEye = new Circle( leftEyeX, eyeY, radiusEye );
leftEye.setFill( new Color( 0.45, 0.35, 0.15, 1.0 ) );
Circle rightEye = new Circle( rightEyeX, eyeY, radiusEye );
rightEye.setFill( new Color( 0.45, 0.35, 0.15, 1.0 ) );
// Put all shapes in a group, then translate the group
Group emoji = new Group( face, mouth, leftEye, rightEye );
emoji.setTranslateX( width/2 );
emoji.setTranslateY( height/2);
Scene scene = new Scene( emoji, width, height, Color.LIGHTCYAN );
primaryStage.setTitle("What!");
primaryStage.setScene( scene );
primaryStage.show();
}
}
It is easiest to think of the big circle as centered at (0, 0) and to position the other circles relative to it. All values are ultimately based on the width of the scene, so adjustments can easily be made.
A Group object is a kind of Parent.
It contains a list of children and can be the root or part of the scene graph.
A transformation that is applied to the Group is applied to
all its children.
Look back at the
Parent
inheritance diagram
to see how this fits with the other JavaFX classes.
In general,
a transformation applied to any container
applies to all the Nodes it contains.
A constructor for Group is
// parameters are any number of Nodes
Group(Node... children)
The children will be displayed in the order of the parameters, so shapes that should be displayed on top of others should be last in the parameter list. The mouth and eyes are displayed on top of the face:
Group emoji = new Group( face, mouth, leftEye, rightEye );
This program creates a square with top left corner at (0,0). Change it so that it draws a tall, thin rectangle in the center of the window.
import javafx.scene.Scene;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.layout.*;
public class SquareScale extends Application
{
public void start( Stage primaryStage )
{
double widthScene = 400.0, heightScene = widthScene*3/4 ;
double centerX = widthScene/2;
double centerY = heightScene/2;
double squareSide = widthScene/3.0;
Rectangle shape = new Rectangle( squareSide, squareSide );
shape.setFill( Color.GREENYELLOW );
shape.setStroke( Color.GRAY );
shape.setTranslateX( );
shape.setTranslateY( );
shape.setScaleX( );
Pane pane = new Pane( shape );
Scene scene = new Scene( pane, widthScene, heightScene, Color.CORNSILK );
primaryStage.setTitle("Thin Rectangle");
primaryStage.setScene( scene );
primaryStage.show();
}
}