Scaling Nodes in Pane within AnchorPane JavaFX












0















I have a 2 Nodes (One Text, the other a Circle) in a Pane, and that pane is within an AnchorPane. The reason why I did this is I wanted to use the automatic scaling property that is a result of resizing the AnchorPane to adjust the size of the Nodes (like stretching and shrinking).



I also have a test background to see if I could scale the background aswell.



My issue is that while the background scales when I resize the window, the Nodes do not.



Heres my code:



package javacode;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BackgroundPosition;
import javafx.scene.layout.BackgroundRepeat;
import javafx.scene.layout.BackgroundSize;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

public boolean debug = false;

Pane stack;

@Override
public void start(Stage stage) {

// Check for updates
/*
System.out.println("Checking for update");
boolean newUpdate = Updater.updateAvalible();
System.out.println("New update avalible: " + newUpdate);
if (newUpdate) {
Updater.showUpdatePrompt();
}
*/

// Get the debug background image
Image debugbackgroundimage = new Image(
this.getClass().getClassLoader().getResourceAsStream("resources/debugbackground.jpg"));

// Create a stack pane to add all the objects into
stack = new Pane();

// Setup the background
stack.setBackground(new Background(new BackgroundImage(debugbackgroundimage, BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, new BackgroundSize(
debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight(), false, false, true, true))));

// Set the preferred and minimum sizes for the stack
stack.setPrefSize(debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight());
stack.setMinSize(16, 9);

// We need an anchor pane go help automatically constrain the maximum and
// minimum sizes of things
AnchorPane anchor = new AnchorPane();
AnchorPane.setTopAnchor(stack, 0.0);
AnchorPane.setBottomAnchor(stack, 0.0);
AnchorPane.setLeftAnchor(stack, 0.0);
AnchorPane.setRightAnchor(stack, 0.0);


// Add the stack to the anchor pane
anchor.getChildren().addAll(stack);

// Set the anchor background to a light gray, that way we can check for overlap
anchor.setBackground(new Background(new BackgroundFill(Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));

// Set the scene for the visualizer, use the anchor pane defined above
Scene mCatScene = new Scene(anchor);

// Set the contents of the window to that of the scene
stage.setScene(mCatScene);

// Show the window (stage)
stage.show();

// Add a test node to check if it scales properly
Text test = new Text(String.format("TestnFoo bar"));

test.setFont(new Font("Arial", 15));
test.setWrappingWidth(500);
test.setFill(Color.RED);
test.setLayoutX(0);
test.setLayoutY(50);

Circle test2 = new Circle();
test2.setLayoutX(50);
test2.setLayoutY(120);
test2.setFill(Color.GREEN);
test2.setRadius(10);


stack.getChildren().add(0, test);
stack.getChildren().add(1, test2);

}

public static void main(String args) {

Main This = new Main();

// Check if debug mode is enabled (Basically check for console spam enabled)
try {
This.debug = Boolean.parseBoolean(args[0]);
} catch (Exception e) {
This.debug = false;
}

launch(args);

}
}


Here is the background image I used:
enter image description here



Edit: Here is a gif of how the background reacts (which is ideal), vs how the Nodes react (not ideal)










share|improve this question




















  • 1





    I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

    – fabian
    Nov 15 '18 at 10:48











  • @fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

    – Spud
    Nov 15 '18 at 16:42
















0















I have a 2 Nodes (One Text, the other a Circle) in a Pane, and that pane is within an AnchorPane. The reason why I did this is I wanted to use the automatic scaling property that is a result of resizing the AnchorPane to adjust the size of the Nodes (like stretching and shrinking).



I also have a test background to see if I could scale the background aswell.



My issue is that while the background scales when I resize the window, the Nodes do not.



Heres my code:



package javacode;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BackgroundPosition;
import javafx.scene.layout.BackgroundRepeat;
import javafx.scene.layout.BackgroundSize;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

public boolean debug = false;

Pane stack;

@Override
public void start(Stage stage) {

// Check for updates
/*
System.out.println("Checking for update");
boolean newUpdate = Updater.updateAvalible();
System.out.println("New update avalible: " + newUpdate);
if (newUpdate) {
Updater.showUpdatePrompt();
}
*/

// Get the debug background image
Image debugbackgroundimage = new Image(
this.getClass().getClassLoader().getResourceAsStream("resources/debugbackground.jpg"));

// Create a stack pane to add all the objects into
stack = new Pane();

// Setup the background
stack.setBackground(new Background(new BackgroundImage(debugbackgroundimage, BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, new BackgroundSize(
debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight(), false, false, true, true))));

// Set the preferred and minimum sizes for the stack
stack.setPrefSize(debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight());
stack.setMinSize(16, 9);

// We need an anchor pane go help automatically constrain the maximum and
// minimum sizes of things
AnchorPane anchor = new AnchorPane();
AnchorPane.setTopAnchor(stack, 0.0);
AnchorPane.setBottomAnchor(stack, 0.0);
AnchorPane.setLeftAnchor(stack, 0.0);
AnchorPane.setRightAnchor(stack, 0.0);


// Add the stack to the anchor pane
anchor.getChildren().addAll(stack);

// Set the anchor background to a light gray, that way we can check for overlap
anchor.setBackground(new Background(new BackgroundFill(Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));

// Set the scene for the visualizer, use the anchor pane defined above
Scene mCatScene = new Scene(anchor);

// Set the contents of the window to that of the scene
stage.setScene(mCatScene);

// Show the window (stage)
stage.show();

// Add a test node to check if it scales properly
Text test = new Text(String.format("TestnFoo bar"));

test.setFont(new Font("Arial", 15));
test.setWrappingWidth(500);
test.setFill(Color.RED);
test.setLayoutX(0);
test.setLayoutY(50);

Circle test2 = new Circle();
test2.setLayoutX(50);
test2.setLayoutY(120);
test2.setFill(Color.GREEN);
test2.setRadius(10);


stack.getChildren().add(0, test);
stack.getChildren().add(1, test2);

}

public static void main(String args) {

Main This = new Main();

// Check if debug mode is enabled (Basically check for console spam enabled)
try {
This.debug = Boolean.parseBoolean(args[0]);
} catch (Exception e) {
This.debug = false;
}

launch(args);

}
}


Here is the background image I used:
enter image description here



Edit: Here is a gif of how the background reacts (which is ideal), vs how the Nodes react (not ideal)










share|improve this question




















  • 1





    I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

    – fabian
    Nov 15 '18 at 10:48











  • @fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

    – Spud
    Nov 15 '18 at 16:42














0












0








0








I have a 2 Nodes (One Text, the other a Circle) in a Pane, and that pane is within an AnchorPane. The reason why I did this is I wanted to use the automatic scaling property that is a result of resizing the AnchorPane to adjust the size of the Nodes (like stretching and shrinking).



I also have a test background to see if I could scale the background aswell.



My issue is that while the background scales when I resize the window, the Nodes do not.



Heres my code:



package javacode;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BackgroundPosition;
import javafx.scene.layout.BackgroundRepeat;
import javafx.scene.layout.BackgroundSize;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

public boolean debug = false;

Pane stack;

@Override
public void start(Stage stage) {

// Check for updates
/*
System.out.println("Checking for update");
boolean newUpdate = Updater.updateAvalible();
System.out.println("New update avalible: " + newUpdate);
if (newUpdate) {
Updater.showUpdatePrompt();
}
*/

// Get the debug background image
Image debugbackgroundimage = new Image(
this.getClass().getClassLoader().getResourceAsStream("resources/debugbackground.jpg"));

// Create a stack pane to add all the objects into
stack = new Pane();

// Setup the background
stack.setBackground(new Background(new BackgroundImage(debugbackgroundimage, BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, new BackgroundSize(
debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight(), false, false, true, true))));

// Set the preferred and minimum sizes for the stack
stack.setPrefSize(debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight());
stack.setMinSize(16, 9);

// We need an anchor pane go help automatically constrain the maximum and
// minimum sizes of things
AnchorPane anchor = new AnchorPane();
AnchorPane.setTopAnchor(stack, 0.0);
AnchorPane.setBottomAnchor(stack, 0.0);
AnchorPane.setLeftAnchor(stack, 0.0);
AnchorPane.setRightAnchor(stack, 0.0);


// Add the stack to the anchor pane
anchor.getChildren().addAll(stack);

// Set the anchor background to a light gray, that way we can check for overlap
anchor.setBackground(new Background(new BackgroundFill(Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));

// Set the scene for the visualizer, use the anchor pane defined above
Scene mCatScene = new Scene(anchor);

// Set the contents of the window to that of the scene
stage.setScene(mCatScene);

// Show the window (stage)
stage.show();

// Add a test node to check if it scales properly
Text test = new Text(String.format("TestnFoo bar"));

test.setFont(new Font("Arial", 15));
test.setWrappingWidth(500);
test.setFill(Color.RED);
test.setLayoutX(0);
test.setLayoutY(50);

Circle test2 = new Circle();
test2.setLayoutX(50);
test2.setLayoutY(120);
test2.setFill(Color.GREEN);
test2.setRadius(10);


stack.getChildren().add(0, test);
stack.getChildren().add(1, test2);

}

public static void main(String args) {

Main This = new Main();

// Check if debug mode is enabled (Basically check for console spam enabled)
try {
This.debug = Boolean.parseBoolean(args[0]);
} catch (Exception e) {
This.debug = false;
}

launch(args);

}
}


Here is the background image I used:
enter image description here



Edit: Here is a gif of how the background reacts (which is ideal), vs how the Nodes react (not ideal)










share|improve this question
















I have a 2 Nodes (One Text, the other a Circle) in a Pane, and that pane is within an AnchorPane. The reason why I did this is I wanted to use the automatic scaling property that is a result of resizing the AnchorPane to adjust the size of the Nodes (like stretching and shrinking).



I also have a test background to see if I could scale the background aswell.



My issue is that while the background scales when I resize the window, the Nodes do not.



Heres my code:



package javacode;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BackgroundImage;
import javafx.scene.layout.BackgroundPosition;
import javafx.scene.layout.BackgroundRepeat;
import javafx.scene.layout.BackgroundSize;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

public boolean debug = false;

Pane stack;

@Override
public void start(Stage stage) {

// Check for updates
/*
System.out.println("Checking for update");
boolean newUpdate = Updater.updateAvalible();
System.out.println("New update avalible: " + newUpdate);
if (newUpdate) {
Updater.showUpdatePrompt();
}
*/

// Get the debug background image
Image debugbackgroundimage = new Image(
this.getClass().getClassLoader().getResourceAsStream("resources/debugbackground.jpg"));

// Create a stack pane to add all the objects into
stack = new Pane();

// Setup the background
stack.setBackground(new Background(new BackgroundImage(debugbackgroundimage, BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, new BackgroundSize(
debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight(), false, false, true, true))));

// Set the preferred and minimum sizes for the stack
stack.setPrefSize(debugbackgroundimage.getWidth(), debugbackgroundimage.getHeight());
stack.setMinSize(16, 9);

// We need an anchor pane go help automatically constrain the maximum and
// minimum sizes of things
AnchorPane anchor = new AnchorPane();
AnchorPane.setTopAnchor(stack, 0.0);
AnchorPane.setBottomAnchor(stack, 0.0);
AnchorPane.setLeftAnchor(stack, 0.0);
AnchorPane.setRightAnchor(stack, 0.0);


// Add the stack to the anchor pane
anchor.getChildren().addAll(stack);

// Set the anchor background to a light gray, that way we can check for overlap
anchor.setBackground(new Background(new BackgroundFill(Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));

// Set the scene for the visualizer, use the anchor pane defined above
Scene mCatScene = new Scene(anchor);

// Set the contents of the window to that of the scene
stage.setScene(mCatScene);

// Show the window (stage)
stage.show();

// Add a test node to check if it scales properly
Text test = new Text(String.format("TestnFoo bar"));

test.setFont(new Font("Arial", 15));
test.setWrappingWidth(500);
test.setFill(Color.RED);
test.setLayoutX(0);
test.setLayoutY(50);

Circle test2 = new Circle();
test2.setLayoutX(50);
test2.setLayoutY(120);
test2.setFill(Color.GREEN);
test2.setRadius(10);


stack.getChildren().add(0, test);
stack.getChildren().add(1, test2);

}

public static void main(String args) {

Main This = new Main();

// Check if debug mode is enabled (Basically check for console spam enabled)
try {
This.debug = Boolean.parseBoolean(args[0]);
} catch (Exception e) {
This.debug = false;
}

launch(args);

}
}


Here is the background image I used:
enter image description here



Edit: Here is a gif of how the background reacts (which is ideal), vs how the Nodes react (not ideal)







java javafx






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 19:56







Spud

















asked Nov 15 '18 at 6:35









SpudSpud

381110




381110








  • 1





    I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

    – fabian
    Nov 15 '18 at 10:48











  • @fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

    – Spud
    Nov 15 '18 at 16:42














  • 1





    I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

    – fabian
    Nov 15 '18 at 10:48











  • @fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

    – Spud
    Nov 15 '18 at 16:42








1




1





I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

– fabian
Nov 15 '18 at 10:48





I don't see a Circle in your code. Furthermore there doesn't seem to be an attempt to modify the size of the Text. Why do you expect it to change size?

– fabian
Nov 15 '18 at 10:48













@fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

– Spud
Nov 15 '18 at 16:42





@fabian yeah I forgot to add the circle, so that should be fixed now. In terms of modifying the size of the text, since its set within the Pane, and the pane itself is set to scale based on the AnchorPane, I assumed the text would scale aswell. Kind of like how the background scales with the AnchorPane, while being within the Pane.

– Spud
Nov 15 '18 at 16:42












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313714%2fscaling-nodes-in-pane-within-anchorpane-javafx%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313714%2fscaling-nodes-in-pane-within-anchorpane-javafx%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Xamarin.iOS Cant Deploy on Iphone

Glorious Revolution

Dulmage-Mendelsohn matrix decomposition in Python