如何在JavaFX画布上绘制可选择、可移动和可重新调整大小的矩形?

如何在JavaFX画布上绘制可选择、可移动和可重新调整大小的矩形?,java,user-interface,javafx,adaptive-user-interfaces,Java,User Interface,Javafx,Adaptive User Interfaces,是否有一种方法允许用户在JavaFX和/或画布中绘制我没有考虑或意识到的可单独选择、可移动和可重新调整大小的形状 我对JavaFX(实际上是一般的javaguis)不熟悉,我正在尝试设计一种方法,允许用户在一个窗格/工作区/页面上绘制(单击并拖动)多达100个矩形。我也在寻找一种方法,使这个可扩展的,但保持静态比例现在将是好的。在我的搜索中,我没有找到很多可比较的例子,其中大多数只探讨其中一个选项,而忽略了我需要完成的某些事情。通常,它们显示预定义的节点或画布形状,这些节点或画布形状无法单独使用

是否有一种方法允许用户在JavaFX和/或画布中绘制我没有考虑或意识到的可单独选择、可移动和可重新调整大小的形状

我对JavaFX(实际上是一般的javaguis)不熟悉,我正在尝试设计一种方法,允许用户在一个窗格/工作区/页面上绘制(单击并拖动)多达100个矩形。我也在寻找一种方法,使这个可扩展的,但保持静态比例现在将是好的。在我的搜索中,我没有找到很多可比较的例子,其中大多数只探讨其中一个选项,而忽略了我需要完成的某些事情。通常,它们显示预定义的节点或画布形状,这些节点或画布形状无法单独使用。因此,我正试图找到实现这一目标的最佳方法

画形状不是问题,我知道怎么做。它使它们成为工作空间中的单个对象(可选、可移动、可重新调整大小)

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

下面的Oracle教程是关于这种分层方法的内容

我觉得这种方法的工作前提是有缺陷的。一个原因是它需要预定义的层数。尽管我想限制它,但它不是很动态的。但最重要的是,它似乎很复杂

我为缺少代码和问题的概念性表示歉意,但我已经搜索和试验了几个星期(没有成功)。如有任何帮助或见解,将不胜感激

多谢各位

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

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

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());
                }
            });
        }
    });

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

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());
                }
            });
        }
    });
退房这与你的情况有些相似。请查看。这与你的情况有些相似。