java - 在 Javafx 中为图形编辑器创建带有 ui 组件的自定义形状
问题描述
我正在开发一个个人图形编辑器项目,我想创建类似流程图的图形来自动生成代码。我的第一个想法是Canvas
and GraphicsContext
,但结果太复杂了,因为我必须手动绘制所有内容。所以我已经切换到Shape
.
基本上,每个节点都是一个Shape
带有其他标准 ui 组件的,例如Label
等ChoiceBox
。由于每个节点都代表一个程序功能,我想使用这些 ui 组件来选择功能的输入。
我正在用StackPane
, aRectangle
在后台做一些实验,Label
上面有一些 s:
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);
}
}
该节点放置在 a 内,Pane
因为它提供了组件的绝对定位:
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().getWidth()
,所以我不能根据标签的大小调整矩形的大小,我怎样才能得到真正的大小?getLayoutBounds().getHeight()
vbox
- 即使我用and设置了坐标,它
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());
即使我用 setX 和 setY 设置了 Rectangle 的坐标,StackPane 始终位于 Pane 的左上角,我怎样才能绝对定位它?
您正在更新矩形属性,这是不正确的。相反,您必须实际更新 StackPane translateX/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);
}
}
推荐阅读
- java - 从 HashMap 中的 ArrayList 访问 getId
- php - 如何在编辑表单中显示上传的图片?
- scala - Scala通过Key有效地创建组合
- angular - 为什么 `combineLatest` 返回 OperatorFunction<{}, number>
- nginx - NGINX,为特定文件类型禁用特定文件夹中的缓存
- angularjs - $window.print() 对话框关闭后如何调用函数
- javascript - 在弹出窗口关闭时运行 chrome 扩展进程
- php - 如何在php中显示带点的分页系列?
- php - 读取文件并将详细信息保存到 php 中的数据库
- python - 从数据框中的组中删除某一列中具有最小值的行