【问题标题】:How to draw selectable, movable, and re-sizable rectangles on JavaFX canvas?如何在 JavaFX 画布上绘制可选择、可移动和可调整大小的矩形?
【发布时间】:2016-06-27 05:26:29
【问题描述】:

有没有一种方法可以让用户在 JavaFX 和/或我没有考虑或不知道的画布中绘制单独可选择、可移动和可调整大小的形状?

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

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

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

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

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

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

谢谢

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

【问题讨论】:

标签: java user-interface javafx adaptive-user-interfaces


【解决方案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());
                }
            });
        }
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-07-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-23
    • 1970-01-01
    • 2012-05-06
    • 1970-01-01
    相关资源
    最近更新 更多