java - 如何在 JavaFX Canvas 中绘制可选择、可移动且可调整大小的矩形？

Question

有没有一种方法可以让用户在我没有考虑或意识到的 JavaFX 和/或 Canvas 中绘制单独可选择的、可移动的和可调整大小的形状？

我是 JavaFX(实际上是一般的 Java GUI)新手，正在尝试设计一种允许用户在 Pane /工作区/页面上绘制(单击并拖动)最多 100 个矩形的方法。我也在寻找一种方法来使其可扩展，但现在保持静态比例就可以了。我在搜索中没有找到大量类似的示例，其中大多数仅探索其中一个选项，但忽略了我需要完成的某些事情。通常它们显示预定义的节点或 Canvas 形状，这些节点或 Canvas 形状无法单独使用。所以我正在努力寻找实现这一目标的最佳方法。

绘制形状不是问题，我知道该怎么做。它使它们成为工作区中的单独对象(可选择、可移动、可调整大小)。

我当前的想法是创建一个 Javafx Pane ，然后在该 Pane 中创建 100 个 Canvas 作为预定义层，这些 Canvas 的尺寸与整个工作区相同。每个绘制的矩形将占据其中一个图层/ Canvas 。选择每个矩形将涉及层内绘制的矩形内的单击事件，允许用户编辑(移动、调整大小等)

下面的 Oracle 教程就是我要介绍的这种分层方法。 http://docs.oracle.com/javafx/2/canvas/jfxpub-canvas.htm

我感觉我的这种方法的工作前提是有缺陷的。原因之一是它需要预定义的层数。虽然我无论如何都想限制这个，但它不是很动态。但大多数情况下，它看起来很复杂。

对于缺乏代码以及问题的概念性质，我深表歉意，但我已经搜索和实验(不成功)了几个星期。任何帮助或见解将不胜感激。

谢谢

项目背景我正在创建一个基本的表单创建器。用户(在创建模式下)将拖动与指示每个矩形的某些属性、坐标和尺寸的相应对象相关联的一系列矩形。该数据将被保存并用于(在表单模式下)放置表单使用的文本字段。无论在工作区上绘制矩形，相同位置和尺寸的文本字段都将放置在表单上。

Answer 1

我能想到的最简单的方法是创建一个组，并根据需要向组中添加矩形。然后，您可以将变换和鼠标监听器附加到每个矩形，并使其在检测到拖动时更新变换的属性。我在这里整理了一个简单的演示。使用右键单击创建一个矩形，使用鼠标左键拖动来调整大小，使用鼠标中键拖动来移动矩形。

Group root = new Group();
    Scene scene = new Scene(root, 1080, 720, true);
    scene.addEventFilter(MouseEvent.MOUSE_PRESSED,e->{
        if(e.getButton()==MouseButton.SECONDARY)
        {
            //make a new rectangle
            Rectangle rect = new Rectangle(100,100);
            root.getChildren().add(rect);
            rect.setFill(Color.CYAN);
            Scale scaler = new Scale(1,1);
            Translate locationCenter = new Translate(e.getX(),e.getY());
            rect.getTransforms().add(locationCenter);
            rect.getTransforms().add(scaler);
            rect.getTransforms().add(new Translate(-50,-50));
            //listen for left mouse drags
            rect.addEventFilter(MouseEvent.MOUSE_DRAGGED, e2->{
                if(e2.getButton()==MouseButton.PRIMARY)
                {
                    //resize with left drag
                    double scaleX=e2.getSceneX()-rect.localToParent(0,0).getX();
                    double scaleY=e2.getSceneY()-rect.localToParent(0,0).getY();
                    scaler.setX(scaleX/100);
                    scaler.setY(scaleY/100);
                } else if(e2.getButton()==MouseButton.MIDDLE)
                {
                    //move with middle drag
                    locationCenter.setX(e2.getSceneX());
                    locationCenter.setY(e2.getSceneY());
                }
            });
        }
    });