为什么在更改组的比例后更改 JavaFX 组中一个形状的翻译属性会影响其他形状

Question

我正在开发一个程序，我正在学习如何在 JavaFX 中缩放和移动对象。对于我的程序，我使用Group，在Group 中我有两个Rectangle，我有一些Sliders 来更改Rectangle 的属性。

出现的问题是当我在程序中更改Rectangle的translateX或translateY时，保持父Group的ScaleX和ScaleY不是1，它也改变了位置另一个Rectangle 但当比例为 1 时不会出现此问题。

这是我的程序：

在我的程序中，我有两个Rectagle，分别称为a 和b，我正在使用Slider，称为aTranslateX & aTranslateY 和bTranslateX & bTranslateY 来更改矩形的 translateX 和 translateY a 和 b 分别。我正在使用另一个名为scale 的Slider 来更改名为group 的组的scaleX 和scaleY，其中包含a 和b。当我更改矩形 a 和 b 的平移属性时，问题不会再次发生@) translate 属性保持比例，而不是一个矩形的一个变化的 translate 属性也会改变另一个矩形的位置在相反的变化方向上。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Example extends Application{
    
    private Group group;
    
    public static void main(String... arguments){launch(arguments);}
    
    @Override public void start(Stage primaryStage){
        Rectangle a = new Rectangle(200, 200, Color.WHITE);
        Rectangle b = new Rectangle(200, 200, Color.SKYBLUE);
        a.setStroke(Color.BLACK);
        b.setStroke(Color.MAGENTA);
        group = new Group(a, b);
        
        Slider aTranslateX = new Slider(-1600, 1600, 20);
        Slider aTranslateY = new Slider(-1600, 1600, 20);
        Slider bTranslateX = new Slider(-1600, 1600, 20);
        Slider bTranslateY = new Slider(-1600, 1600, 20);
        Slider scale = new Slider(0, 12, 1);
        
        aTranslateX.valueProperty().addListener((o, l, c) -> {
            if(c != null) b.setTranslateX(c.doubleValue());
        });
        aTranslateY.valueProperty().addListener((o, l, c) -> {
            if(c != null) b.setTranslateY(c.doubleValue());
        });
        bTranslateX.valueProperty().addListener((o, l, c) -> {
            if(c != null) a.setTranslateX(c.doubleValue());
        });
        bTranslateY.valueProperty().addListener((o, l, c) -> {
            if(c != null) a.setTranslateY(c.doubleValue());
        });
        scale.valueProperty().addListener((o, l, c) -> {
            if(c != null){
                group.setScaleX(c.doubleValue());
                group.setScaleY(c.doubleValue());
            }
        });
        
        aTranslateX.setMinWidth(200);
        aTranslateY.setMinWidth(200);
        bTranslateX.setMinWidth(200);
        bTranslateY.setMinWidth(200);
        scale.setMinWidth(200);
        
        Label[] labels = new Label[5];
        for(int x = 0; x < labels.length; x++){
            labels[x] = new Label();
            labels[x].setMinWidth(150);
        }
        
        labels[0].setText("Rectangle A Translate X: ");
        labels[1].setText("Rectangle A Translate Y: ");
        labels[2].setText("Rectangle B Translate X: ");
        labels[3].setText("Rectangle B Translate Y: ");
        labels[4].setText("Scale of Group: ");
        
        VBox top = new VBox(10,
                            new HBox(8, labels[0], aTranslateX, labels[1], aTranslateY),
                            new HBox(8, labels[2], bTranslateX, labels[3], bTranslateY),
                            new HBox(8, labels[4], scale));
        
        top.setPadding(new Insets(12));
        top.setStyle("-fx-background-color: #fefefe");
        
        Pane pane = new Pane(group);
        
        BorderPane root = new BorderPane(pane);
        root.setTop(top);
        
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setWidth(1280);
        primaryStage.setHeight(700);
        primaryStage.show();
    }
    
}

当组的比例不是默认值时，如何解决这个问题或者改变任何对象的翻译属性的正确方法是什么？

Answer 1

Group 在计算它的大小时包括了孩子的变换。由于通过scaleX/scaleY 属性进行缩放的轴心点是节点的中心，因此更改平移属性会导致轴心点的位置发生变化，从而导致组的所有子节点移动。如果您不希望这样做，请使用Pane（不包括大小计算中的变换）而不是Group，或者使用Scale 变换，以(0,0) 作为枢轴点而不是scaleX/ scaleY属性：

Scale groupScale = new Scale();
group.getTransforms().add(groupScale);
groupScale.xProperty().bind(scale.valueProperty());
groupScale.yProperty().bind(scale.valueProperty());