java - 使用Javafx中的ui组件在图形编辑器中创建自定义形状

This question already has an answer here:

Get the height of a node in JavaFX (generate a layout pass)
                            
                                （1个答案）
                            
                    
                2年前关闭。
        

    

我正在一个个人图形编辑器项目上，我想创建类似流程图的图形以自动生成代码。我的第一个想法是Canvas和GraphicsContext，但是结果太复杂了，因为我必须手动绘制所有内容。因此，我已切换到Shape。

基本上，每个节点都是一个Shape，上面带有其他标准ui组件，例如Label，ChoiceBox等。由于每个节点都代表一个程序函数，因此我想使用这些ui组件来选择函数的输入。

我正在做StackPane的实验，Rectangle是背景中的Label，上面有一些Pane：

public class RectangleNode extends StackPane {

  private double x;
  private double y;
  private VBox vbox;
  private Rectangle rect;

  public RectangleNode(double x, double y) {
    super();
    setAlignment(Pos.CENTER);

    this.x = x;
    this.y = y;

    Label label1 = new Label("Hello world");
    Label label2 = new Label("Hello JavaFX");

    vbox = new VBox(label1, label2);

    rect = new Rectangle();
    rect.setStroke(Color.ALICEBLUE);
    rect.setStrokeWidth(2);
    rect.setX(this.x);
    rect.setY(this.y);

    getChildren().addAll(rect, vbox);
  }

  public void updateSize () {
    double width = vbox.getLayoutBounds().getWidth();
    double height = vbox.getLayoutBounds().getHeight();
    System.out.println("width vbox: " + width + "px");
    System.out.println("height vbox: " + height + "px");

    rect.setWidth(width + 10);
    rect.setHeight(height + 10);

  }
}

该节点放置在getLayoutBounds().getWidth()内，因为它提供了组件的绝对位置：

public class StackPaneTest extends Application {

  public void start(Stage stage) throws Exception {

    Pane root = new Pane();

    stage.setTitle("StackPane Test");
    stage.setScene(new Scene(root, 480, 360));
    stage.show();

    RectangleNode pane = new RectangleNode(100, 100);
    root.getChildren().add(pane);
    pane.updateSize();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

然后我在这里发现了一些问题：


getLayoutBounds().getHeight()和vbox始终返回零，因此我无法根据标签的大小调整矩形的大小，如何获得StackPane的实际大小？
即使我已经将Pane的坐标设置为Rectangle和setX，setY始终位于StackPane的左上角，我如何才能将其绝对定位？
是正确的方法吗？


谢谢。

最佳答案

getLayoutBounds（）。getWidth（）和getLayoutBounds（）。getHeight（）
  总是返回零，所以我不能根据
  标签的大小，如何获得vbox的实际大小？


您正在检查边界，然后将其呈现在场景图中。如果使用Platform.runLater包装方法调用，则可以获得正确的值

Platform.runLater(()->pane.updateSize());

但是，我建议您摆脱updateSize（）方法，并用RectanglePane边界绑定矩形边界，这样您就不必担心基础形状的边界更新了。

rect.widthProperty().bind(widthProperty());
rect.heightProperty().bind(heightProperty());

  即使我设置了StackPane，它也始终位于Pane的左上角
  setX和setY的Rectangle坐标，如何定位
  绝对？


您正在更新矩形属性，这是不正确的。相反，您必须实际更新StackPane translationX / Y属性才能移动RectanglePane。将构造函数中的代码更新为以下代码。

//rect.setX(this.x);
//rect.setY(this.y);
setTranslateX(this.x);
setTranslateY(this.y);

  StackPane是正确的方法吗？


据我了解您的要求，如果您正在寻找一种布局来将Shape放在下面，而将自定义布局放在其顶部，我认为StackPane是一个不错的选择。

您还可以进行其他一些小的更改。以下是更新的演示，仅供您参考。

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

public class StackPaneTest extends Application {
  public void start(Stage stage) throws Exception {
    Pane root = new Pane();
    stage.setTitle("StackPane Test");
    stage.setScene(new Scene(root, 480, 360));
    stage.show();
    root.getChildren().add(new RectangleNode(100, 100));
  }

  public static void main(String[] args) {
    launch(args);
  }
}
class RectangleNode extends Group {
  private VBox vbox;
  private Rectangle rect;
  public RectangleNode(double x, double y) {
    super();
    StackPane layout = new StackPane();
    layout.setAlignment(Pos.TOP_LEFT);

    Label label1 = new Label("Hello world");
    Label label2 = new Label("Hello JavaFX");

    vbox = new VBox(label1, label2);
    vbox.setPadding(new Insets(5));

    setTranslateX(x);
    setTranslateY(y);

    rect = new Rectangle();
    rect.setFill(Color.YELLOW);
    rect.setStrokeWidth(2);
    rect.setStroke(Color.BLACK);
    rect.widthProperty().bind(layout.widthProperty());
    rect.heightProperty().bind(layout.heightProperty());
    layout.getChildren().addAll(rect, vbox);
    getChildren().add(layout);
  }
}