当前位置: 首页 > 知识库问答 >
问题:

JavaFX可调整大小的画布问题

那铭
2023-03-14

我有一个问题已经部分解决了,但我很好奇另一个(更好的)解决方法…我想要一个画布,什么填充整个窗口,并调整自己的大小,如果窗口的大小。

根据这个:https://dlemmermann.wordpress.com/2014/04/10/javafx-tip-1-resizable-canvas/和这个:如何在JavaFX中使canvas可调整大小?我已创建(复制)类:

public class ResizableCanvas extends Canvas {

    public ResizableCanvas() {
        widthProperty().addListener(evt -> draw());
        heightProperty().addListener(evt -> draw());
    }

    private void draw() {
        double width = getWidth();
        double height = getHeight();

        GraphicsContext gc = getGraphicsContext2D();
        gc.clearRect(0, 0, width, height);

        gc.setStroke(Color.RED);
        gc.strokeLine(0, 0, width, height);
        gc.strokeLine(0, height, width, 0);
    }

    @Override
    public boolean isResizable() {
        return true;
    }

    @Override
    public double prefWidth(double height) {
        return getWidth();
    }

    @Override
    public double prefHeight(double width) {
        return getHeight();
    }
}

并将以下内容放入viewfield.fxml文件:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.layout.StackPane?>
<?import blahblahblah.ResizableCanvas?>

<StackPane fx:id="pane" minHeight="500.0" minWidth="500.0" style="-fx-background-color: white; -fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blahblahblah.ViewFieldController">
   <children>
      <ResizableCanvas fx:id="resizableCanvas" />
   </children>
</StackPane>

我的控制器(附在此fxml文件中)是ViewFieldController.java:

import javafx.beans.property.ReadOnlyDoubleProperty;
import javafx.fxml.FXML;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class ViewFieldController {

    private Stage dialogStage;

    @FXML
    private StackPane pane;

    @FXML
    private ResizableCanvas resizableCanvas;

    @FXML
    private void initialize() {

        GraphicsContext gc = resizableCanvas.getGraphicsContext2D();

        ReadOnlyDoubleProperty widthProperty = pane.widthProperty();
        ReadOnlyDoubleProperty heightProperty = pane.heightProperty();
        resizableCanvas.widthProperty().bind(widthProperty);
        resizableCanvas.heightProperty().bind(heightProperty);

        drawArea(gc);
    }

    public void setDialogStage(Stage dialogStage) {
        this.dialogStage = dialogStage;
    }

    private void drawArea(GraphicsContext gc) {

        gc.setStroke(Color.BLACK);
        gc.setLineWidth(1);
        gc.strokeLine(0, 0, resizableCanvas.getWidth(), resizableCanvas.getHeight());
        gc.strokeLine(0, resizableCanvas.getHeight(), resizableCanvas.getWidth(), 0);
    }

}
public class MainApp extends Application {

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

public void showViewField() {
    try {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/ViewField.fxml"));
        StackPane pane = (StackPane) loader.load();

        Stage stage = new Stage();
        stage.setTitle("View Field");
        Scene scene = new Scene(pane);
        stage.setScene(scene);

        ViewFieldController controller = loader.getController();
        controller.setDialogStage(stage);

        stage.show();

    } catch (IOException e) {
        e.printStackTrace();
    }
}

}

这个解决方案起作用(“大X”出现在画布上,这要感谢drawArea()方法)。这个解决方案的问题是,在将ResistableCanvas类放入FXML文件后,我无法再在该文件上使用SceneBuilder,因为我会遇到以下异常:

java.io.IOException: javafx.fxml.LoadException: 
...

    at com.oracle.javafx.scenebuilder.kit.fxom.FXOMLoader.load(FXOMLoader.java:92)
    at com.oracle.javafx.scenebuilder.kit.fxom.FXOMDocument.<init>(FXOMDocument.java:82)
    at com.oracle.javafx.scenebuilder.kit.fxom.FXOMDocument.<init>(FXOMDocument.java:97)
    at com.oracle.javafx.scenebuilder.kit.editor.EditorController.updateFxomDocument(EditorController.java:2384)
    at com.oracle.javafx.scenebuilder.kit.editor.EditorController.setFxmlTextAndLocation(EditorController.java:664)
    at com.oracle.javafx.scenebuilder.app.DocumentWindowController.loadFromFile(DocumentWindowController.java:381)
    at com.oracle.javafx.scenebuilder.app.SceneBuilderApp.performOpenFiles(SceneBuilderApp.java:554)
    at com.oracle.javafx.scenebuilder.app.SceneBuilderApp.handleOpenFilesAction(SceneBuilderApp.java:424)
    at com.oracle.javafx.scenebuilder.app.SceneBuilderApp.handleLaunch(SceneBuilderApp.java:403)
    at com.oracle.javafx.scenebuilder.app.AppPlatform.requestStartGeneric(AppPlatform.java:139)
    at com.oracle.javafx.scenebuilder.app.AppPlatform.requestStart(AppPlatform.java:106)
    at com.oracle.javafx.scenebuilder.app.SceneBuilderApp.start(SceneBuilderApp.java:353)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$163(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$176(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$174(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$175(PlatformImpl.java:294)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$149(WinApplication.java:191)
    at java.lang.Thread.run(Thread.java:745)
Caused by: javafx.fxml.LoadException: 
...

    at javafx.fxml.FXMLLoader.constructLoadException(FXMLLoader.java:2601)
    at javafx.fxml.FXMLLoader.importClass(FXMLLoader.java:2848)
    at javafx.fxml.FXMLLoader.processImport(FXMLLoader.java:2692)
    at javafx.fxml.FXMLLoader.processProcessingInstruction(FXMLLoader.java:2661)
    at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2517)
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2425)
    at com.oracle.javafx.scenebuilder.kit.fxom.FXOMLoader.load(FXOMLoader.java:89)
    ... 20 more
Caused by: java.lang.ClassNotFoundException: blahblahblah.ResizableCanvas
    at java.lang.ClassLoader.findClass(ClassLoader.java:530)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
    at javafx.fxml.FXMLLoader.loadTypeForPackage(FXMLLoader.java:2916)
    at javafx.fxml.FXMLLoader.loadType(FXMLLoader.java:2905)
    at javafx.fxml.FXMLLoader.importClass(FXMLLoader.java:2846)
    ... 25 more

备选方案2(部分解决方案):

我的第二个解决方案使用相同的ResizableCanvas类,但没有FXML文件或控制器类。

public class MainApp extends Application {

    //...

    public void showViewField2() {

        ResizableCanvas canvas = new ResizableCanvas();
        StackPane pane = new StackPane();
        pane.getChildren().add(canvas);

        Stage stage = new Stage();
        stage.setTitle("View Field");
        Scene scene = new Scene(pane);
        stage.setScene(scene);

        canvas.widthProperty().bind(pane.widthProperty());
        canvas.heightProperty().bind(pane.heightProperty());

        stage.show();
    }

}

选项3(我的原始解决方案,不起作用):

我已经用原始的Canvas类替换了viewfield.fxml文件中的ResizableCanvas类:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.layout.StackPane?>

<StackPane fx:id="pane"  minHeight="500.0" minWidth="500.0" style="-fx-background-color: white; -fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blahblahblah.ViewFieldController">
   <children>
      <Canvas fx:id="regularCanvas" />
   </children>
</StackPane>

我的ViewFieldController.java如下所示:

import javafx.beans.property.ReadOnlyDoubleProperty;
import javafx.fxml.FXML;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class ViewFieldController {

    private Stage dialogStage;

    @FXML
    private StackPane pane;

    @FXML
    private Canvas regularCanvas;

    @FXML
    private void initialize() {

        GraphicsContext gc = regularCanvas.getGraphicsContext2D();

        ReadOnlyDoubleProperty widthProperty = pane.widthProperty();
        ReadOnlyDoubleProperty heightProperty = pane.heightProperty();
        regularCanvas.widthProperty().bind(widthProperty);
        regularCanvas.heightProperty().bind(heightProperty);

        drawArea(gc);
    }

    public void setDialogStage(Stage dialogStage) {
        this.dialogStage = dialogStage;
    }

    private void drawArea(GraphicsContext gc) {

        gc.setStroke(Color.BLACK);
        gc.setLineWidth(1);
        gc.strokeLine(0, 0, regularCanvas.getWidth(), regularCanvas.getHeight());
        gc.strokeLine(0, regularCanvas.getHeight(), regularCanvas.getWidth(), 0);
    }

}
<StackPane fx:id="pane" minHeight="500.0" minWidth="500.0" style="-fx-background-color: white; -fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="blahblahblah.ViewFieldController">
   <children>
      <Canvas fx:id="regularCanvas" height="300.0" width="300.0" />
   </children>
</StackPane>
  1. 为什么第3例中没有出现“大X”?
  2. 要使第三种情况正常工作,我应该做哪些修改?
  3. 有没有其他解决html" target="_blank">方法可以解决我的问题?
  4. 为什么我在第一种情况下得到了例外?
  5. 为什么不能在SceneBuilder中“适合于父级”画布?
  6. 为什么在SceneBuilder中禁用“可抵抗”选项?

共有1个答案

夏侯英纵
2023-03-14

您可以通过将自定义画布绑定到一个jar文件中并将其导入到Scene Builder库来使选项1与Scene Builder一起工作。例如,请看这个问题。

选项3不起作用,因为您只能从initialize()方法调用drawArea()。此时,画布不是场景的一部分,当然也不显示在窗口中;因此,它没有经过布局,所以宽度和高度为零。您可以通过将侦听器添加到宽度和高度并在它们更改时重新绘制来修复此选项,就像在选项1中所做的那样:

@FXML
private void initialize() {

    GraphicsContext gc = regularCanvas.getGraphicsContext2D();

    ReadOnlyDoubleProperty widthProperty = pane.widthProperty();
    ReadOnlyDoubleProperty heightProperty = pane.heightProperty();
    regularCanvas.widthProperty().bind(widthProperty);
    regularCanvas.heightProperty().bind(heightProperty);

    regularCanvas.widthProperty().addListener((obs, oldWidth, newWidth) -> drawArea(gc));
    regularCanvas.heightProperty().addListener((obs, oldHeight, newHeight) -> drawArea(gc));

    drawArea(gc);
}
 类似资料:
  • 在javaFX中,调整画布大小没有这样的方法,唯一的解决方案是从画布扩展。 “从画布扩展”是使画布可调整大小的唯一解决方案吗?因为这个解决方案只有在我们不想使用FXML的情况下才起作用,如果我们在FXML中声明一个画布,我们如何使它可以调整大小? 这是我的代码:

  • 一直以来,我都在开发一款分辨率为800x480(流行手机分辨率)的应用程序。 我的画布HTML: 现在,为了使其全屏显示其他分辨率,我在调整大小事件后执行以下操作: 这是可行的,但问题是我不能以这种方式保持纵横比。800x480是4:3,但是如果我在5:3的手机上运行这个应用程序,有些东西(尤其是圆圈)看起来会被拉伸。 有没有什么方法可以让它在所有分辨率下看起来都很好,而不必为每个纵横比创建一组独

  • 下面是和,我试图使它尽可能简单。 黑色是名为的,其内部是名为的。我要做的是将中的的大小调整为的大小减去4。但当您调整窗口大小时,一切都失败了。 你要尝试的... 2)增加窗口的大小,然后慢慢减小。 为什么会这样?我有这个问题三个月了,但我找不到解决办法... 我也看过javafx-resize Canvas,当屏幕调整大小时,但这里的问题似乎是不同的... 如果我不手动设置画布的宽度和高度,它甚至

  • 我正在使用NetBeans GUI编辑器创建一个应用程序,其中我想要一个,其顶部组件将是中的和底部组件将是,或类似的东西。 当我向下拉分隔符,从而增加顶部组件的大小时,所有东西的大小似乎都调整得很好。 当我尝试向上推动分隔符时,问题就出现了:分隔符似乎位于下方(也可能位于下方)。 我尝试了和的首选/最小/最大大小的各种组合,但似乎都不起作用。 这是 Netbeans 生成的代码中可能与手头的问题有

  • 我正在使用three.js将webgl嵌入到liferay portlet中。我希望当我对页面布局进行更改以影响portlet大小时,能够让呈现器调整图像(canvas元素)的大小。因此,基本上,无论何时调整portlet的大小,我都希望能够通过三个.js调用来调整画布的大小。js有一个renderer对象,我可以通过它设置大小。问题是获取portlet的宽度。有没有一种方法可以捕获重绘事件并获取

  • 请看下面的P5代码 这个小应用程序的目的是在画布上拖放图像,根据“上传”图像的宽度和高度改变其大小。 使用:成功加载图像(至少显示图像)后,我将其宽度和高度分配给变量和。接着是画布大小的变化。。。这会导致一个错误,画布的大小与上传的图像相同(在上选中),但不显示任何内容。 使用:当禁用上的画布大小更改并单击画布时,调整大小会完美地显示图像。 应用程序需要在不点击的情况下工作,在删除图像后应该自动更