how to update view in Group in javaFX? - javafx

Question

I have a graph look like this. I want to update view when I change slider. However, all elements will stacked together look like that when I change slider. So what can I do to get a new view.
my app's structrue:
Circle and QuadCurve -> Group -> ScrollPane -> BorderPane -> Scene -> Stage

Answer 1

This app demonstrates what you are trying to achieve. Comments are in the code.
Main
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* #author blj0011
*/
public class JavaFXApplication6 extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
Controller
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Group;
import javafx.scene.control.Slider;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
/**
*
* #author blj0011
*/
public class FXMLDocumentController implements Initializable {
#FXML
private Group groupMain;
#FXML
private Circle cirMain, cirCenter, cirRadius1, cirRadius2, cirRadius3;
#FXML
private Slider sliderMain;
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
#FXML void handleButton(ActionEvent event)
{
double radius = cirMain.getRadius();//Get transparent mainCircle radius
System.out.println(radius + " : " + cirMain.getLayoutX() + " : " + cirMain.getLayoutY());
cirRadius1.setRadius(20);
cirRadius1.setLayoutX(radius * Math.cos(50) + cirMain.getLayoutX());//set cirRadius1 to x location on circumference of cirMain
cirRadius1.setLayoutY(radius * Math.sin(50) + cirMain.getLayoutY());//set cirRadius1 to y location on circumference of cirMain
cirRadius1.setFill(Color.RED);
cirRadius2.setRadius(10);
cirRadius2.setLayoutX(radius * Math.cos(175) + cirMain.getLayoutX());//set cirRadius2 to x location on circumference of cirMain
cirRadius2.setLayoutY(radius * Math.sin(175) + cirMain.getLayoutY());//set cirRadius2 to y location on circumference of cirMain
cirRadius2.setFill(Color.YELLOW);
cirRadius3.setRadius(15);
cirRadius3.setLayoutX(radius * Math.cos(300) + cirMain.getLayoutX());//set cirRadius3 to x location on circumference of cirMain
cirRadius3.setLayoutY(radius * Math.sin(300) + cirMain.getLayoutY());//set cirRadius3 to y location on circumference of cirMain
cirRadius3.setFill(Color.GREEN);
sliderMain.setValue(radius);//set slider value to current cirMain radius
//This listener moves the circle inward or outward depending on the slider. It also changes the radius of cirMain's radius
sliderMain.valueProperty().addListener((obs, oldVal, newVal)->{
cirMain.setRadius(newVal.doubleValue());
cirRadius1.setLayoutX(newVal.doubleValue() * Math.cos(50) + cirMain.getLayoutX());
cirRadius1.setLayoutY(newVal.doubleValue() * Math.sin(50) + cirMain.getLayoutY());
cirRadius2.setLayoutX(newVal.doubleValue() * Math.cos(175) + cirMain.getLayoutX());
cirRadius2.setLayoutY(newVal.doubleValue() * Math.sin(175) + cirMain.getLayoutY());
cirRadius3.setLayoutX(newVal.doubleValue() * Math.cos(300) + cirMain.getLayoutX());
cirRadius3.setLayoutY(newVal.doubleValue() * Math.sin(300) + cirMain.getLayoutY());
});
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Circle?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="518.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication6.FXMLDocumentController">
<children>
<Circle fx:id="cirMain" fill="#ededed00" layoutX="300.0" layoutY="200.0" radius="175.0" stroke="BLACK" strokeType="INSIDE" />
<Circle fx:id="cirCenter" fill="DODGERBLUE" layoutX="300.0" layoutY="200.0" radius="14.0" stroke="BLACK" strokeType="INSIDE" />
<Circle fx:id="cirRadius1" fill="DODGERBLUE" layoutX="177.0" layoutY="156.0" radius="25.0" stroke="BLACK" strokeType="INSIDE" />
<Circle fx:id="cirRadius2" fill="DODGERBLUE" layoutX="412.0" layoutY="166.0" radius="35.0" stroke="BLACK" strokeType="INSIDE" />
<Circle fx:id="cirRadius3" fill="DODGERBLUE" layoutX="237.0" layoutY="290.0" radius="27.0" stroke="BLACK" strokeType="INSIDE" />
<Button layoutX="288.0" layoutY="479.0" mnemonicParsing="false" onAction="#handleButton" text="Button" />
<Slider fx:id="sliderMain" blockIncrement="1.0" layoutX="34.0" layoutY="418.0" max="200.0" prefHeight="38.0" prefWidth="551.0" showTickLabels="true" showTickMarks="true" />
</children>
</AnchorPane>