I'm wondering if it's possible to selectively apply parent transforms to a child node within javafx.
To my understanding when a node is tranformed all the children of said node are also transformed.
My question is: Is it possible to disable types of parent transforms within the child so that when the parent is tranformed only a select type of transforms are passed.
Similar to this:
I would like to rotate the group node without rotating the text but I would like the text position to be effected by the rotation.
Hopefully i've explained myself.
Currently I simply apply the opposite rotation to the text when the group is transformed but it's getting to the point where expanding my scene graph is making this more complicated.
In short, no: the transforms of the group are always propagated to all its children.
However, I think here you just want the rotate property of the text to be the negative of the rotate property of the group:
text.rotateProperty().bind(group.rotateProperty().multiply(-1));
Since the rotateProperty defines a rotation about the center of the node, when the group is rotated, it (and all its child nodes) will be rotated about its center, then the binding ensures the text is rotated about its center in the opposite direction.
If you want something more general, it gets a bit tricky. One possible approach is to observe the localToSceneTransform of the parent of the text you want to keep horizontal. That property represents the cumulative transform that maps coordinates in the parent to coordinates in the scene. Then you can take a horizontal line in the local coordinate space in the parent, transform it to the scene, and look at the angle it creates. You then want to rotate the text by the negative of this angle.
Here's a demo:
import java.util.function.Function;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.geometry.Point2D;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class RotateGroupKeepTextAligned extends Application {
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
StackPane container = new StackPane();
Group outer = new Group();
Rectangle outerRect = new Rectangle(0, 0, 400, 400);
outerRect.setFill(Color.ANTIQUEWHITE);
outer.getChildren().add(outerRect);
Text outerText = new Text(5, 5, "Outer Group");
Group inner = new Group();
inner.relocate(10, 25);
Text innerText = new Text(5, 5, "Inner Group");
Rectangle rect = new Rectangle(50, 50, 150, 150);
rect.setFill(Color.CORNFLOWERBLUE);
Text fixedAlignmentText = new Text(100, 220, "Horizontal Text");
inner.localToSceneTransformProperty().addListener((obs, oldT, newT) -> {
// figure overall rotation angle of inner:
Point2D leftScene = newT.transform(new Point2D(0, 0));
Point2D rightScene = newT.transform(new Point2D(1, 0));
double angle = Math.toDegrees(Math.atan2(rightScene.getY() - leftScene.getY(), rightScene.getX() - leftScene.getX()));
fixedAlignmentText.setRotate(-angle);
});
outer.setStyle("-fx-background-color: antiquewhite;");
outer.getChildren().addAll(outerText, inner);
inner.setStyle("-fx-background-color: white;");
inner.getChildren().addAll(innerText, rect, fixedAlignmentText);
container.getChildren().add(outer);
root.setCenter(container);
VBox controls = new VBox(5,
makeControls("Outer Group", outer),
makeControls("Inner Group", inner));
root.setBottom(controls);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
private Node makeControls(String title, Node node) {
GridPane grid = new GridPane();
Label label = new Label(title);
Spinner<Double> rotateSpinner = new Spinner<>(0, 360, 0, 5);
node.rotateProperty().bind(rotateSpinner.getValueFactory().valueProperty());
rotateSpinner.getValueFactory().setWrapAround(true);
Button up = createTranslateButton(node, Node::translateYProperty, -2, "^");
Button down = createTranslateButton(node, Node::translateYProperty, 2, "v");
Button left = createTranslateButton(node, Node::translateXProperty, -2, "<");
Button right = createTranslateButton(node, Node::translateXProperty, 2, ">");
grid.add(label, 0, 0, 3, 1);
grid.add(new Label("Rotation:"), 0, 1, 1 ,2);
grid.add(rotateSpinner, 1, 1, 1, 2);
grid.add(up, 3, 1);
grid.add(down, 3, 2);
grid.add(left, 2, 1, 1, 2);
grid.add(right, 4, 1, 1, 2);
grid.setHgap(5);
grid.setVgap(5);
return grid ;
}
private Button createTranslateButton(Node node, Function<Node, DoubleProperty> property, double delta, String text) {
Button button = new Button(text);
button.setOnAction(e -> {
DoubleProperty prop = property.apply(node);
prop.set(prop.get() + delta);
});
return button ;
}
public static void main(String[] args) {
launch(args);
}
}
Related
I'm new to JavaFX, trying to build a GUI program that displays a bill for a table at a restaurant when you click on that table. The spacing is off between the table buttons and I'm not sure why.
The GUI class for my program:
package restaurantBillingProgram;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.control.Label;
import javafx.scene.control.Button;
import javafx.geometry.Pos;
public class BillingGUI extends Application {
#Override
public void start(Stage primaryStage) {
// Create grid pane
GridPane pane = new GridPane();
pane.setAlignment(Pos.CENTER);
pane.setHgap(5);
pane.setVgap(5);
// Label
pane.add(new Label("Generate bill"), 1, 0);
// Buttons
Button btT1 = new Button("Table 1");
pane.add(btT1, 0, 1);
btT1.setOnAction(e - > Billing.generateT1());
Button btT2 = new Button("Table 2");
pane.add(btT2, 1, 1);
btT2.setOnAction(e - > Billing.generateT2());
Button btT3 = new Button("Table 3");
pane.add(btT3, 2, 1);
btT3.setOnAction(e - > Billing.generateT3());
// Create scene and place in stage
Scene scene = new Scene(pane, 250, 250);
primaryStage.setTitle("Restaurant Billing Program");
primaryStage.setScene(scene);
primaryStage.show();
}
// Main method
public static void main(String[] args) {
launch(args);
}
}
From the Javadoc:
Row/Column Sizing
By default, rows and columns will be sized to fit their content; a column will be wide enough to accommodate the widest child, ...
The label in row 0 column 1 forces that column to be wider.
You probably want the label to be centered and span all 3 columns.
While doing you layout, use pane.setGridLinesVisible(true). This should only be used during debugging. It can be very useful for situations like your current situation. As #Jim Garrison pointed out, your Label is causing the issue:
Issue:
One way to fix this is to let the Label span all columns and center the Label's text.
Fix:
Key Code:
label.setMaxWidth(Double.MAX_VALUE);
label.setAlignment(Pos.CENTER);
pane.add(label, 0, 0, 3, 1);// Look at the following link to see how this add method works. https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/layout/GridPane.html#add(javafx.scene.Node,int,int,int,int)
Full Code:
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.control.Label;
import javafx.scene.control.Button;
import javafx.geometry.Pos;
public class BillingGUI extends Application {
#Override
public void start(Stage primaryStage) {
// Create grid pane
GridPane pane = new GridPane();
pane.setAlignment(Pos.CENTER);
pane.setHgap(5);
pane.setVgap(5);
pane.setGridLinesVisible(true);//Use for debugging only!!!!
// Label
Label label = new Label("Generate bill");
label.setMaxWidth(Double.MAX_VALUE);
label.setAlignment(Pos.CENTER);
pane.add(label, 0, 0, 3, 1);
// Buttons
Button btT1 = new Button("Table 1");
pane.add(btT1, 0, 1);
Button btT2 = new Button("Table 2");
pane.add(btT2, 1, 1);
Button btT3 = new Button("Table 3");
pane.add(btT3, 2, 1);
// Create scene and place in stage
Scene scene = new Scene(pane, 250, 250);
primaryStage.setTitle("Restaurant Billing Program");
primaryStage.setScene(scene);
primaryStage.show();
}
// Main method
public static void main(String[] args) {
launch(args);
}
}
I'm using JavaFx 8.
From the JavaDoc of javafx.scene.Node.scaleYProperty():
[...] This scale factor is not included in layoutBounds by default, which makes it ideal for scaling the entire node after all effects and transforms have been taken into account. [...]
How can I include the scaling factor in layoutBounds, though?
Some context:
In the following example, when pressing the button I would like the GridPane to react also to the scaling of the HBox whithout having to hardcode the prefHeight of the RowConstraints.
Being able to include the scaling factor into the layoutBounds probably would do the trick, but other solutions are welcome as well.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class ScalingStandAlone extends Application {
private VBox vBox = new VBox();
private GridPane gridPane = new GridPane();
private HBox hBox = new HBox();
private ToggleButton button = new ToggleButton("Click to scale");
private Label firstRowLabel = new Label("Some content in text form");
private Label secondRowLabel = new Label("Some content for scaling");
private Label thirdRowLabel = new Label("Some moving content");
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage stage) throws Exception {
AnchorPane root = new AnchorPane();
AnchorPane.setTopAnchor(vBox, 5.);
AnchorPane.setLeftAnchor(vBox, 5.);
AnchorPane.setRightAnchor(vBox, 5.);
root.autosize();
Scene scene = new Scene(root);
stage.setTitle("GridRow Scale Demo");
stage.setWidth(400);
stage.setHeight(300);
stage.setScene(scene);
stage.show();
root.getChildren().add(vBox);
vBox.setAlignment(Pos.CENTER);
vBox.getChildren().add(gridPane);
vBox.getChildren().add(button);
vBox.setStyle("-fx-spacing: 15;");
configureGridPane(root);
button.setOnAction(event -> {
hBox.setScaleY(button.isSelected() ? 2 : 1);
});
}
private void configureGridPane(Pane root) {
hBox.getChildren().add(secondRowLabel);
// Styling //
firstRowLabel.setStyle("-fx-padding: 5;");
hBox.setStyle("-fx-background-color: #800000; -fx-padding: 5;");
secondRowLabel.setStyle("-fx-text-fill: white; -fx-padding: 5;");
thirdRowLabel.setStyle("-fx-padding: 5;");
gridPane.add(firstRowLabel, 0, 0);
gridPane.add(hBox, 0, 1);
gridPane.add(thirdRowLabel, 0, 2);
gridPane.setGridLinesVisible(true);
gridPane.getColumnConstraints().add(new ColumnConstraints());
gridPane.getColumnConstraints().get(0).setPercentWidth(100);
}
}
From the Javadocs for Group:
Any transform, effect, or state applied to a Group will be applied to
all children of that group. Such transforms and effects will NOT be
included in this Group's layout bounds, however if transforms and
effects are set directly on children of this Group, those will be
included in this Group's layout bounds.
(my emphasis added).
Therefore, if you simply wrap your HBox in a Group, you will achieve the desired effect:
// gridPane.add(hBox, 0, 1);
gridPane.add(new Group(hBox), 0, 1);
What I want: I need to generate random 10 circles, with random coordinates and points them in path. Then create a square that needs to move along that path using animation.
What is my problem: I cant create 10 random circles with random coordinates, but I created code for animation.
Here is my code, I created random curved line and square that goes along it. That curved line is just for example, because I don't know how to make circles with random coordinates and points them in path.
Example of my code
final Rectangle rectPath = new Rectangle(0, 0, 40, 40);
rectPath.setArcHeight(10);
rectPath.setArcWidth(10);
rectPath.setFill(Color.ORANGE);
Path path = new Path();
path.getElements().add(new MoveTo(20, 20));
path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));
path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));
path.getElements().add(new CubicCurveTo(420, 350, 420, 440, 10, 450));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setPath(path);
pathTransition.setNode(rectPath);
pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
pathTransition.setCycleCount(5);
pathTransition.setAutoReverse(true);
pathTransition.play();
Group root = new Group();
root.getChildren().add(rectPath);
root.getChildren().add(path);
Scene scene = new Scene(root, 600, 450);
primaryStage.setTitle("Path transition demo");
primaryStage.setScene(scene);
primaryStage.show();
Firstly check my comment regarding the question. It is not something very complex. It is all about learning the concepts and putting them together. Assuming that you might be a beginner, please find the below example for your requirement.
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.security.SecureRandom;
import java.util.ArrayList;
import java.util.List;
public class RandomPathTransistionDemo extends Application {
PathTransition pathTransition;
Path path;
SecureRandom random = new SecureRandom();
#Override
public void start(Stage stage) {
VBox root = new VBox();
root.setSpacing(10);
root.setPadding(new Insets(10));
Scene scene = new Scene(root, 600, 600);
stage.setScene(scene);
stage.setTitle("Random Path Transistion");
stage.show();
Pane pane = new Pane();
pane.setPadding(new Insets(10));
pane.setStyle("-fx-border-width:1px;-fx-border-color:black;-fx-background-color:white;");
VBox.setVgrow(pane, Priority.ALWAYS);
Button generateBtn = new Button("Generate circles");
Button animationBtn = new Button("Start Animation");
animationBtn.setDisable(true);
HBox buttons = new HBox(generateBtn, animationBtn);
buttons.setSpacing(15);
root.getChildren().addAll(buttons, new Label("Click generate button as many times as you want !!"),pane);
final Rectangle rectPath = new Rectangle(0, 0, 20, 20);
rectPath.setArcHeight(10);
rectPath.setArcWidth(10);
rectPath.setFill(Color.ORANGE);
path = new Path();
path.setStroke(Color.LIGHTGREEN);
path.setStrokeWidth(2);
generateBtn.setOnAction(e -> {
animationBtn.setDisable(false);
if (pathTransition != null) {
pathTransition.stop();
}
pane.getChildren().clear();
path.getElements().clear();
int width = (int) pane.getWidth() - 20;
int height = (int) pane.getHeight() - 20;
List<Circle> dots = new ArrayList<>();
for (int i = 0; i < 10; i++) {
double x = random.nextInt(width); // Get a random value of x within the pane width
double y = random.nextInt(height);// Get a random value of y within the pane height
// If required include your logic to see if this point is not within the range of other points.
// Create a circle with this random point
Circle dot = new Circle(x, y, 5, Color.RED);
dots.add(dot);
// Also inlcude a path element for this random point.
path.getElements().add(i == 0 ? new MoveTo(x, y) : new LineTo(x, y));
}
// Add all nodes in the pane one after another to have a nice visual.
pane.getChildren().add(path);
pane.getChildren().addAll(dots);
pane.getChildren().add(rectPath);
// Move the rectangle to the start point of the path.
rectPath.setTranslateX(dots.get(0).getCenterX() - 10); // 10 :: half of rectangle width
rectPath.setTranslateY(dots.get(0).getCenterY() - 10); // 10 :: half of rectangle height
});
animationBtn.setOnAction(e -> {
pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setPath(path);
pathTransition.setNode(rectPath);
pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
pathTransition.setAutoReverse(false);
pathTransition.play();
});
}
public static void main(String[] args) {
launch(args);
}
}
Currently the code below produces a BorderPane with a GridPane in the center and a HBox on the bottom to hold two buttons. The left-most pane in the GridPane contains the text "Name Here". Right now I only want the buttons to move the text "Name Here" up and down but they will not move the text.
I think it has something to do with the particular GridPane node, but I'm not sure. Additionally, I don't know why the left-most GridPane takes up more space relative to the right-most GridPane within the center of the BorderPane.
Any advice will be greatly appreciated, thank you!
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.geometry.Pos;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.Priority;
import javafx.scene.text.Text;
public class differentWindows extends Application {
protected Text name = new Text("Name Here");
protected BorderPane getPane() {
// HBox to hold the up and down buttons
HBox paneForButtons = new HBox(20);
Button btUp = new Button("Up");
Button btDown = new Button("Down");
paneForButtons.getChildren().addAll(btUp, btDown);
paneForButtons.setAlignment(Pos.BOTTOM_LEFT);
// Grid pane to go in center of the border pane, for the name and video
GridPane paneForTextNVideo = new GridPane();
paneForTextNVideo.setAlignment(Pos.CENTER);
paneForTextNVideo.setGridLinesVisible(true);
paneForTextNVideo.add(name, 0, 0);
Text temp = new Text("temp");
paneForTextNVideo.add(temp, 1, 0);
paneForTextNVideo.setHalignment(temp, HPos.CENTER);
paneForTextNVideo.setValignment(temp, VPos.CENTER);
paneForTextNVideo.setHgrow(temp, Priority.ALWAYS);
paneForTextNVideo.setVgrow(temp, Priority.ALWAYS);
paneForTextNVideo.setHalignment(name, HPos.CENTER);
paneForTextNVideo.setValignment(name, VPos.CENTER);
paneForTextNVideo.setHgrow(name, Priority.ALWAYS);
paneForTextNVideo.setVgrow(name, Priority.ALWAYS);
// Border pane to hold all windows
BorderPane pane = new BorderPane();
pane.setBottom(paneForButtons);
pane.setCenter(paneForTextNVideo);
btUp.setOnAction(e -> name.setY(name.getY() - 10));
btDown.setOnAction(e -> name.setY(name.getY() + 10));
return pane;
} // end of the getPane method
#Override
public void start(Stage primaryStage) {
Scene scene = new Scene(getPane(), 450, 200);
primaryStage.setTitle("Assignment #7");
primaryStage.setScene(scene);
primaryStage.show();
} // end of start method
public static void main(String[] args) {
Application.launch(args);
}
} // end of class
Try using setLayoutY instead of setY:
btUp.setOnAction(e -> name.setLayoutY(name.getLayoutY() - 10));
btDown.setOnAction(e -> name.setLayoutY(name.getLayoutY() + 10));
As a sidenote, the Node parent class also has a relocate method for easily changing both the X and Y coordinates:
The code below should move the Label based on the position of the horizontal scroll bar so that the Label appears to remain stationary. This almost works perfectly however when you move the scrollbar to the end the label has moved slightly so it does not look like it is in the same position.
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class LblMoves extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
try {
VBox images = new VBox();
images.setPadding(new Insets(0, 0, 0, 0));
Label posLbl = new Label("0");
images.getChildren().add(posLbl);
images.setPrefSize(Integer.MAX_VALUE, 50);
ScrollPane scrollPane = new ScrollPane(images);
scrollPane.setStyle("-fx-background: #FFFFFF;");
scrollPane.hvalueProperty().addListener(new ChangeListener<Number>() {
public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {
double screenPer = scrollPane.getHvalue() * scrollPane.getWidth();
double pos = scrollPane.getHvalue() * images.getWidth();
double marg = pos - screenPer;
posLbl.setPadding(new Insets(0, 0, 0, marg));
}
});
Scene scene = new Scene(scrollPane, 600, 600);
primaryStage.setScene(scene);
primaryStage.setMaximized(true);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
}
You use the width of the ScrollPane. However the width used in the calculations for ScrollPane use the viewportBounds.
Also since by default the position is rounded to full pixels, which causes some movement of the Label (which could be fixed by using translateX instead of the padding).
InvalidationListener listener = o -> {
double marg = (images.getWidth() - scrollPane.getViewportBounds().getWidth()) * scrollPane.getHvalue();
posLbl.setTranslateX(marg);
// posLbl.setPadding(new Insets(0, 0, 0, marg));
};
scrollPane.hvalueProperty().addListener(listener);
scrollPane.viewportBoundsProperty().addListener(listener);
listener.invalidated(null);