Drawing lines between Shapes laid out in HBox and VBox - javafx

I have a circle inside various containers (ScrollPane, Group, HBox and VBox)
I want to draw a line from 0,0 to the centre of the circle.
I think the code below shows the problem. There is some function unknown to me which should go
in //SOME CODE HERE TO WORK OUT WHERE THE CIRCLE IS to make it work
I have a sample application I wrote to simplify my problem.
import java.util.Random;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class TestAppForCoords extends Application {
//Scene Graph:
//ScrollPane - scroll
// - Group - root
// - HBox - hbox - with random padding
// - VBox
// - VBox - vbox - with random padding
// - Circle - circle
// - VBox
// - Group - lines
// - Line - line
#Override
public void start(final Stage primaryStage) throws Exception {
Random rand = new Random();
int randomNum1 = rand.nextInt((100 - 0) + 1) + 0;
int randomNum2 = rand.nextInt((100 - 0) + 1) + 0;
System.out.println(randomNum1);
System.out.println(randomNum2);
ScrollPane scroll = new ScrollPane();
scroll.setPrefSize(500, 300);
Scene scene = new Scene(scroll);
primaryStage.setScene(scene);
Group root = new Group();
HBox hbox = new HBox();
hbox.setPadding(new Insets(randomNum1));
VBox vbox = new VBox();
hbox.getChildren().add(new VBox());
vbox.setPadding(new Insets(randomNum2));
hbox.getChildren().add(vbox);
hbox.getChildren().add(new VBox());
Circle circle = new Circle();
circle.setRadius(10);
vbox.getChildren().add(circle);
Group lines = new Group();
root.getChildren().add(hbox);
root.getChildren().add(lines);
root.autosize();
Line line = new Line();
line.setStartX(0);
line.setStartY(0);
//SOME CODE HERE TO WORK OUT WHERE THE CIRCLE IS
line.setEndX(123);
line.setEndY(123);
lines.getChildren().add(line);
scroll.setContent(root);
primaryStage.show();
}
public static void main(String[] args) {
System.out.println("Start JavaFXTestApp");
launch(args);
System.out.println("End JavaFXTestApp");
}
}

Finally I have it working. I can add a setOnShown handler which is called to correct the line.
So I have found out that localToScene and sceneToLocal only work after the window is being displayed
primaryStage.setOnShown(new EventHandler<WindowEvent>() {
#Override
public void handle(WindowEvent arg0) {
Point2D p = circle.localToScene(circle.getCenterX(),circle.getCenterY());
p = line.sceneToLocal(p);
line.setEndX(p.getX());
line.setEndY(p.getY());
}
});
So the final working program is:
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Point2D;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
import javafx.stage.WindowEvent;
public class TestAppForCoords extends Application {
//Scene Graph:
//ScrollPane - scroll
// - Group - root
// - VBox - vboxEXTRA - with random padding
// - HBox - hbox - with random padding
// - VBox
// - VBox - vbox - with random padding
// - Circle - circle
// - VBox
// - Group - lines
// - Line - line
Line line = new Line();
Circle circle = new Circle();
#Override
public void start(final Stage primaryStage) throws Exception {
Random rand = new Random();
int randomNum1 = rand.nextInt((100 - 0) + 1) + 0;
int randomNum2 = rand.nextInt((100 - 0) + 1) + 0;
int randomNum3 = rand.nextInt((100 - 0) + 1) + 0;
System.out.println(randomNum1);
System.out.println(randomNum2);
System.out.println(randomNum3);
ScrollPane scroll = new ScrollPane();
scroll.setPrefSize(500, 300);
Scene scene = new Scene(scroll);
primaryStage.setScene(scene);
Group root = new Group();
HBox hbox = new HBox();
hbox.setPadding(new Insets(randomNum1));
VBox vbox = new VBox();
hbox.getChildren().add(new VBox());
vbox.setPadding(new Insets(randomNum2));
hbox.getChildren().add(vbox);
hbox.getChildren().add(new VBox());
circle.setRadius(10);
vbox.getChildren().add(circle);
Group lines = new Group();
root.getChildren().add(hbox);
root.getChildren().add(lines);
root.autosize();
root.requestLayout();
lines.getChildren().add(line);
VBox vboxEXTRA = new VBox();
vboxEXTRA.setPadding(new Insets(randomNum3));
vboxEXTRA.getChildren().add(root);
scroll.setContent(vboxEXTRA);
line.setStartX(0);
line.setStartY(0);
//This dosen't work prob because we aren't drawing yet
Point2D p = circle.localToScene(circle.getCenterX(),circle.getCenterY());
p = line.sceneToLocal(p);
line.setEndX(p.getX());
line.setEndY(p.getY());
primaryStage.setOnShown(new EventHandler<WindowEvent>() {
#Override
public void handle(WindowEvent arg0) {
Point2D p = circle.localToScene(circle.getCenterX(),circle.getCenterY());
p = line.sceneToLocal(p);
line.setEndX(p.getX());
line.setEndY(p.getY());
}
});
primaryStage.show();
}
public static void main(String[] args) {
System.out.println("Start JavaFXTestApp");
launch(args);
System.out.println("End JavaFXTestApp");
}
}

Related

why does while() loop not work on pathTransition?

I've been trying to make my pathTransition loop but it doesn't work. I have already tried with a while loop but nothing happens. "boom" runs the path once and then stops. I would like the "boom" to choose a new path each time.
int i = 1;
while(i < 5){
Path path = new Path();
double x = (new Random().ints(-100,400 + 1).iterator().next());
path.getElements().add (new MoveTo (x, -190));
path.getElements().add (new LineTo(x, 300));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(10000));
pathTransition.setNode(boom);
pathTransition.setPath(path);
pathTransition.setOrientation(OrientationType.NONE);
pathTransition.setAutoReverse(false);
pathTransition.play();
i++;
You want to add all your PathTransitions to a SequentialTransition like this:
import java.util.Random;
import javafx.animation.PathTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;
public class PathLoop extends Application {
Node boom;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Button goButton = new Button("Go");
goButton.setOnAction(this::doAnimation);
boom = new Circle(20, Color.RED);
AnchorPane playfield = new AnchorPane(boom);
playfield.setPrefSize(600, 600);
AnchorPane.setLeftAnchor(boom, 100.0);
AnchorPane.setTopAnchor(boom, 300.0);
VBox root = new VBox(goButton, playfield);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("Sequential Transition");
primaryStage.show();
}
private void doAnimation(ActionEvent e) {
Random rng = new Random();
SequentialTransition seqTransition = new SequentialTransition(boom);
int i = 1;
while(i < 5){
Path path = new Path();
double x = (rng.ints(-100,400 + 1).iterator().next());
path.getElements().add (new MoveTo(x, -190));
path.getElements().add (new LineTo(x, 300));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(10000));
pathTransition.setNode(boom);
pathTransition.setPath(path);
pathTransition.setOrientation(PathTransition.OrientationType.NONE);
pathTransition.setAutoReverse(false);
seqTransition.getChildren().add(pathTransition);
i++;
}
seqTransition.play();
}
}

How to make scene local JavaFX

The scene at the start of lambda has an error that is not local. How to make it local. I tried adding up top but shows null. How to make scene local at the lambda because scene sets primaryStage. I need the other nodes for GridPane. I am trying to draw on the canvas. Please help fix this problem. Thank you in advanced!
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class TestFX extends Application {
Node scene; // i tried adding this but throws null at the lambda
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("MyPaint");
RadioButton radioButton1 = new RadioButton("Draw");
RadioButton radioButton2 = new RadioButton("Erase");
RadioButton radioButton3 = new RadioButton("Circle");
ToggleGroup radioGroup = new ToggleGroup();
radioButton1.setToggleGroup(radioGroup);
radioButton2.setToggleGroup(radioGroup);
radioButton3.setToggleGroup(radioGroup);
Button b1 = new Button("Clear Canvas");
TextField colorText = new TextField();
colorText.setText("Colors");
Canvas canvas = new Canvas(300, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
// scene cannot be resolved without initializing at top: Node scene;
scene.setOnMousePressed(q -> {
gc.setFill(Color.BLACK);
gc.setLineWidth(1);
gc.beginPath();
gc.lineTo(q.getSceneX(),
q.getSceneY());
gc.getStroke();
});
gc.strokeText("Hello Canvas", 150, 100);
GridPane gridPane = new GridPane();
GridPane.setConstraints(radioButton1, 0, 0);
GridPane.setConstraints(radioButton2, 0, 1);
GridPane.setConstraints(radioButton3, 0, 2);
GridPane.setConstraints(colorText, 0, 3);
GridPane.setConstraints(b1, 0, 4);
GridPane.setConstraints(canvas, 1, 1);
// adding spaces between radiobutton, button and radiobutton
radioButton1.setPadding(new Insets(15));
radioButton2.setPadding(new Insets(15));
radioButton3.setPadding(new Insets(15));
b1.setPadding(new Insets(15));
colorText.setPadding(new Insets(15));
gridPane.getChildren().addAll(radioButton1, radioButton2, radioButton3, colorText, b1, canvas);
Scene scene = new Scene(gridPane, 800, 800);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
You define Scene in this part of the code:
gridPane.getChildren().addAll(radioButton1, radioButton2, radioButton3, colorText, b1, canvas);
Scene scene = new Scene(gridPane, 800, 800);
primaryStage.setScene(scene);
primaryStage.show()
but you are calling this code before you define Scene.
// scene cannot be resolved without initializing at top: Node scene;
scene.setOnMousePressed(q -> {
gc.setFill(Color.BLACK);
gc.setLineWidth(1);
gc.beginPath();
gc.lineTo(q.getSceneX(),
q.getSceneY());
gc.getStroke();
});
You need to delete Node scene. and move the scene.setOnMousePressed() code to a place after where you defined the Scene.
Full Code:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class TestFX extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("MyPaint");
RadioButton radioButton1 = new RadioButton("Draw");
RadioButton radioButton2 = new RadioButton("Erase");
RadioButton radioButton3 = new RadioButton("Circle");
ToggleGroup radioGroup = new ToggleGroup();
radioButton1.setToggleGroup(radioGroup);
radioButton2.setToggleGroup(radioGroup);
radioButton3.setToggleGroup(radioGroup);
Button b1 = new Button("Clear Canvas");
TextField colorText = new TextField();
colorText.setText("Colors");
Canvas canvas = new Canvas(300, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.strokeText("Hello Canvas", 150, 100);
GridPane gridPane = new GridPane();
GridPane.setConstraints(radioButton1, 0, 0);
GridPane.setConstraints(radioButton2, 0, 1);
GridPane.setConstraints(radioButton3, 0, 2);
GridPane.setConstraints(colorText, 0, 3);
GridPane.setConstraints(b1, 0, 4);
GridPane.setConstraints(canvas, 1, 1);
// adding spaces between radiobutton, button and radiobutton
radioButton1.setPadding(new Insets(15));
radioButton2.setPadding(new Insets(15));
radioButton3.setPadding(new Insets(15));
b1.setPadding(new Insets(15));
colorText.setPadding(new Insets(15));
gridPane.getChildren().addAll(radioButton1, radioButton2, radioButton3, colorText, b1, canvas);
Scene scene = new Scene(gridPane, 800, 800);
scene.setOnMousePressed(q -> {
gc.setFill(Color.BLACK);
gc.setLineWidth(1);
gc.beginPath();
gc.lineTo(q.getSceneX(),
q.getSceneY());
gc.getStroke();
});
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

TranslateTransition does not change (X,Y) co-ordinates

While learning the javafx.animation API, I tried the following code,
which simply draws a rectangle at (100,100) and translates it to (200,200) in 2 seconds.
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
public class SimpleAnimation extends Application {
#Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 500, 500);
stage.setScene(scene);
VBox vb = new VBox();
Rectangle rect = new Rectangle (100, 100, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(Color.VIOLET);
final Duration SEC_2 = Duration.millis(2000);
System.out.println("Location before relocation = "+rect.getX()+","+rect.getY()+")");
TranslateTransition tt = new TranslateTransition(SEC_2,rect);
tt.setByX(100f);
tt.setByY(100f);
tt.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("Location after relocation = " + rect.getX() + "," + rect.getY() + ")");
}
});
tt.play();
vb.getChildren().add(rect);
scene.setRoot(vb);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
After this translationTransition, the rectangle is expected to have the (x,y) coordinates as (200,200) right?
To check this, I tried to print the coordinates in the OnFinished() event handler.
Don't know why it still prints (100,100) ?
From the Javadocs:
This Transition creates a move/translate animation that spans its
duration. This is done by updating the translateX, translateY and
translateZ variables of the node at regular interval.
So if you check the translateX and translateY properties at the end of the transition, you will find they are both equal to 100; i.e. the rectangle has been translated from its original position by 100 units in both directions.
Depending on exactly what you are wanting to do, you can either work with the translateX and translateY properties, or work with the boundsInParent property, which gives the bounds of a node in its parent's coordinate system (and thus includes any transforms, such as the translation).
If you prefer to have the x and y properties of the Rectangle change directly from the animation, use a Timeline, which allows you to specify the property (or properties) that change:
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class SimpleAnimation extends Application {
#Override
public void start(Stage stage) {
VBox vb = new VBox();
Rectangle rect = new Rectangle(100, 100, 100, 100);
rect.setManaged(false);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(Color.VIOLET);
final Duration SEC_2 = Duration.millis(2000);
System.out.println("Location before relocation = " + rect.getX() + ","
+ rect.getY() + ")");
Timeline timeline = new Timeline();
KeyFrame end = new KeyFrame(SEC_2,
new KeyValue(rect.xProperty(), 200),
new KeyValue(rect.yProperty(), 200));
timeline.getKeyFrames().add(end);
timeline.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("Location after relocation = " + rect.getX()
+ "," + rect.getY() + ")");
}
});
timeline.play();
vb.getChildren().add(rect);
Scene scene = new Scene(vb, 500, 500);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Note that for this to work, I added the call rect.setManaged(false). Since you have the Rectangle in a VBox, which manages layout of its child nodes, changing the x and y properties will have no effect otherwise. (The other option would be to replace the VBox with a Pane, which doesn't manage placement of its child nodes.)
When the animation is finished, move the animated node to the translation co-ordinates:
tt.setOnFinished(event -> {
// The transition works by manipulating translation values,
// After the transition is complete, move the node to the new location
// and zero the translation after relocating the node.
rect.setX(rect.getX() + rect.getTranslateX());
rect.setY(rect.getY() + rect.getTranslateY());
rect.setTranslateX(0);
rect.setTranslateY(0);
});
Also you place your Rectangle in a VBox, don't do that if you want the X&Y co-ordinates of the rectangle to mean anything. A VBox is a layout manager and will ignore X&Y co-ordinates of the rectangle (because it will make everything inside it layout vertically). Instead perform your animation in a Parent which does not perform layout (e.g. a Group or a Pane).
Executable sample:
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class SimpleAnimation extends Application {
#Override
public void start(Stage stage) {
Rectangle rect = new Rectangle(100, 100, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(Color.VIOLET);
System.out.println("Location before relocation = " + rect.getX() + "," + rect.getY() + ")");
TranslateTransition tt = new TranslateTransition(
Duration.seconds(2),
rect
);
tt.setByX(100f);
tt.setByY(100f);
tt.setOnFinished(event -> {
rect.setX(rect.getX() + rect.getTranslateX());
rect.setY(rect.getY() + rect.getTranslateY());
rect.setTranslateX(0);
rect.setTranslateY(0);
System.out.println("Location after relocation = " + rect.getX() + "," + rect.getY() + ")");
});
tt.play();
Scene scene = new Scene(new Group(rect), 500, 500);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Tooltip isn't being displayed on ScrollPane

Following the tutorial here I tried to create a Tooltip on a ScrollPane using the following code:
final ScrollPane scroll = new ScrollPane();
scroll.addEventHandler(MouseEvent.MOUSE_MOVED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
pointer = MouseInfo.getPointerInfo();
point = pointer.getLocation();
color = robot.getPixelColor((int) point.getX(), (int) point.getY());
Tooltip tooltip = new Tooltip();
tooltip.setText(" " + color);
tooltip.activatedProperty();
scroll.setTooltip(tooltip);
System.out.println("Color at: " + point.getX() + "," + point.getY() + " is: " + color);
}
});
The tooltip however refuses to show itself on the ScrollPane but the output of "Color at: ..." is being printed so I am sure that handle is being called.
EDIT : On the suggestion of jewelsea , I tried putting the eventHandler on the content ,rather than the pane, but to no effect.
If I understand what you're trying to do, you really only need to install the tooltip once, and then just modify its text as the mouse moves.
This works for me:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.Tooltip;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class ImageTooltipTest extends Application {
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
Image image = new Image("http://www.publicdomainpictures.net/pictures/30000/velka/tropical-paradise.jpg");
final ImageView imageView = new ImageView();
imageView.setImage(image);
final ScrollPane scroller = new ScrollPane();
scroller.setContent(imageView);
final Tooltip tooltip = new Tooltip();
scroller.setTooltip(tooltip);
scroller.getContent().addEventHandler(MouseEvent.MOUSE_MOVED, event -> {
Image snapshot = scroller.getContent().snapshot(null, null);
int x = (int) event.getX();
int y = (int) event.getY();
PixelReader pixelReader = snapshot.getPixelReader();
Color color = pixelReader.getColor(x, y);
String text = String.format("Red: %.2f%nGreen: %.2f%nBlue: %.2f",
color.getRed(),
color.getGreen(),
color.getBlue());
tooltip.setText(text);
});
root.setCenter(scroller);
Scene scene = new Scene(root, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Fade Effect with JavaFX

Im trying to realize a special FadeTransition effect. But I have no idea how I can manage it. For some node I would like to increase the opacity from left to right (for example in Powerpoint, you can change the slides with such an effect). Here is an easy example for rectangles. But the second one should fadeIn from left to right (the opacity should increase on the left side earlier as on the right side). With timeline and KeyValues/KeyFrames I found also no solution.
Thanks in advance.
Rectangle rec2;
#Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 400, 300, Color.BLACK);
stage.setTitle("JavaFX Scene Graph Demo");
Pane pane = new Pane();
Button btnForward = new Button();
btnForward.setText(">");
btnForward.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
FadeTransition ft = new FadeTransition(Duration.millis(2000), rec2);
ft.setFromValue(0.);
ft.setToValue(1.);
ft.play();
}
});
Rectangle rec1 = new Rectangle(0, 0, 300,200);
rec1.setFill(Color.RED);
rec2 = new Rectangle(100, 50, 100,100);
rec2.setFill(Color.GREEN);
rec2.setOpacity(0.);
pane.getChildren().addAll(rec1,rec2);
root.getChildren().add(pane);
root.getChildren().add(btnForward);
stage.setScene(scene);
stage.show();
}
Define the fill of the rectangle using css with a linear gradient which references looked-up colors for the left and right edges of the rectangle. (This can be inline or in an external style sheet.)
Define a couple of DoublePropertys representing the opacities of the left and right edge.
Define the looked-up colors on the rectangle or one of its parents using an inline style bound to the two double properties.
Use a timeline to change the values of the opacity properties.
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class FadeInRectangle extends Application {
#Override
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 400, 300, Color.BLACK);
primaryStage.setTitle("JavaFX Scene Graph Demo");
Pane pane = new Pane();
Rectangle rec1 = new Rectangle(0, 0, 300,200);
rec1.setFill(Color.RED);
Rectangle rec2 = new Rectangle(100, 50, 100,100);
rec2.setStyle("-fx-fill: linear-gradient(to right, left-col, right-col);");
final DoubleProperty leftEdgeOpacity = new SimpleDoubleProperty(0);
final DoubleProperty rightEdgeOpacity = new SimpleDoubleProperty(0);
root.styleProperty().bind(
Bindings.format("left-col: rgba(0,128,0,%f); right-col: rgba(0,128,0,%f);", leftEdgeOpacity, rightEdgeOpacity)
);
Button btnForward = new Button();
btnForward.setText(">");
btnForward.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(leftEdgeOpacity, 0)),
new KeyFrame(Duration.ZERO, new KeyValue(rightEdgeOpacity, 0)),
new KeyFrame(Duration.millis(500), new KeyValue(rightEdgeOpacity, 0)),
new KeyFrame(Duration.millis(1500), new KeyValue(leftEdgeOpacity, 1)),
new KeyFrame(Duration.millis(2000), new KeyValue(rightEdgeOpacity, 1)),
new KeyFrame(Duration.millis(2000), new KeyValue(leftEdgeOpacity, 1))
);
timeline.play();
}
});
pane.getChildren().addAll(rec1,rec2);
root.getChildren().add(pane);
root.getChildren().add(btnForward);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Resources