JavaFX Canvas在StackPane中沒有正確調整大小

下面是Main.class和Controller.class，我試圖儘可能簡化它。JavaFX Canvas在StackPane中沒有正確調整大小

程序輸出下面的窗口：

黑色爲StackPane名爲visualizerStackPane和內它是一個命名爲CanvasvisualizerCanvas。 我想要做的是在StackPane內部的Canvas相應地調整爲StackPane大小減去4。但是，當您調整窗口大小時，一切都會失敗。

你有什麼嘗試...

1）將窗口最大化，然後歸回。

2）增加窗口的大小，並慢慢減少它。

爲什麼發生這種情況？I 3個月了有這樣的問題，我無法找到一個解決辦法...

我也看了JavaFX - Resize Canvas when screen is resized但這裏的問題似乎是不同的......

Main.java：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class Main extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     try { 

      //Scene 
      Scene scene = new Scene(new Controller(), 400, 400); 
      primaryStage.setScene(scene); 

      //Show 
      primaryStage.show(); 

     } catch (Exception ex) { 
      ex.printStackTrace(); 
     } 
    } 

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

Controller.java：

我已經從Initialize方法改性Controller類油漆畫布和除去綁定，它不起作用它產生的下面：

如果我不要手動設置Canvas的寬度和高度，它甚至不會被繪製......我不知道爲什麼。

import java.io.IOException; 
import java.util.logging.Level; 
import java.util.logging.Logger; 

import javafx.fxml.FXML; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.canvas.Canvas; 
import javafx.scene.canvas.GraphicsContext; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.StackPane; 
import javafx.scene.layout.VBox; 
import javafx.scene.paint.Color; 

public class Controller extends StackPane { 

    @FXML 
    private GridPane container; 

    @FXML 
    private GridPane topGridPane; 

    @FXML 
    private StackPane visualizerStackPane; 

    @FXML 
    private Canvas visualizerCanvas; 

    @FXML 
    private VBox topRightVBox; 

    @FXML 
    private StackPane mediaFileStackPane; 

    @FXML 
    private GridPane bottomGridPane; 

    // ------------------------------ 

    GraphicsContext gc; 
    int    canvasWidth  = 0; 
    int    canvasHeight = 0; 

    /** 
    * Constructor 
    */ 
    public Controller() { 

     // ------------------------FXMLLoader --------------------------------- 
     FXMLLoader loader = new FXMLLoader(getClass().getResource("Controller.fxml")); 
     loader.setController(this); 
     loader.setRoot(this); 

     try { 
      loader.load(); 
     } catch (IOException ex) { 
      Logger.getLogger(getClass().getName()).log(Level.SEVERE, "Controller FXML can't be loaded!", ex); 
     } 
    } 

    /** 
    * Called as soon as FXML FILE has been loaded 
    */ 
    @FXML 
    private void initialize() { 

     gc = visualizerCanvas.getGraphicsContext2D(); 

     // // VisualizerStackPane inside which visualizerCanvas is 
     // visualizerCanvas.widthProperty().bind(visualizerStackPane.widthProperty().subtract(4)); 
     // visualizerCanvas.heightProperty().bind(visualizerStackPane.heightProperty().subtract(4)); 
     // 

     // Add width and height change listeners 
     visualizerStackPane.widthProperty().addListener((observable, oldValue, 
       newValue) -> resizeVisualizerCanvas(newValue.doubleValue(), visualizerStackPane.getHeight())); 

     visualizerStackPane.heightProperty().addListener((observable, oldValue, 
       newValue) -> resizeVisualizerCanvas(visualizerStackPane.getWidth(), newValue.doubleValue()) 

     ); 

     repaintCanvas(); 
    } 

    /** 
    * Repaints the Canvas 
    */ 
    public void repaintCanvas() { 

     //Clear the previous rectangle 
     gc.clearRect(0, 0, canvasWidth, canvasHeight); 

     // Draw the 
     gc.setFill(Color.RED); 
     gc.fillRect(0, 0, canvasWidth, canvasHeight); 

     // Draw the Line 
     gc.setLineWidth(3); 
     gc.setStroke(Color.WHITE); 
     gc.strokeLine(0, canvasHeight, canvasWidth, 0); 

    } 

    /** 
    * Resizes the visualizerCanvas to the given values. 
    * 
    * @param width 
    *   the width 
    * @param height 
    *   the height 
    */ 
    public void resizeVisualizerCanvas(double width, double height) { 
     if (width > 0 && height > 0) { 

      this.canvasWidth = (int) width; 
      this.canvasHeight = (int) height; 

      // Print something 
      System.out.println("Canvas Width is:" + width+" , Canvas Height is:"+height +" Canvas is Resizable: "+visualizerCanvas.isResizable()); 

      // Repaint the Canvas 
      repaintCanvas(); 

      // ---------------------------Below i have tried several things to 
      // solve the problem.... 

      // Set the width and height of Canvas 
      visualizerCanvas.setWidth(width); 
      visualizerCanvas.setHeight(height); 

      // Careful with contentBias here 
      prefWidth(-1); 
      prefHeight(-1); 

      // autosize() 

      // System.out.println("Content Bias is:"+this.getContentBias()) 

     } 
    } 
}

Controller.fxml：

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

<?import javafx.geometry.Insets?> 
<?import javafx.scene.canvas.Canvas?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.layout.ColumnConstraints?> 
<?import javafx.scene.layout.GridPane?> 
<?import javafx.scene.layout.Region?> 
<?import javafx.scene.layout.RowConstraints?> 
<?import javafx.scene.layout.StackPane?> 
<?import javafx.scene.layout.VBox?> 

<fx:root prefHeight="212.0" prefWidth="456.0" type="StackPane" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1"> 
    <padding> 
     <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" /> 
    </padding> 
    <children> 
     <GridPane fx:id="container"> 
     <columnConstraints> 
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="50.0" prefWidth="100.0" /> 
      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="50.0" prefWidth="100.0" /> 
     </columnConstraints> 
     <rowConstraints> 
      <RowConstraints minHeight="10.0" percentHeight="40.0" vgrow="SOMETIMES" /> 
      <RowConstraints minHeight="10.0" percentHeight="60.0" vgrow="SOMETIMES" /> 
     </rowConstraints> 
     <children> 
      <GridPane fx:id="topGridPane" gridLinesVisible="true" GridPane.columnSpan="2"> 
       <columnConstraints> 
       <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="50.0" prefWidth="100.0" /> 
       <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="50.0" prefWidth="100.0" /> 
       </columnConstraints> 
       <rowConstraints> 
       <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
       </rowConstraints> 
       <children> 
        <StackPane fx:id="visualizerStackPane" style="-fx-border-color: white; -fx-border-width: 1.5; -fx-background-color: rgb(0,0,0,0.95);"> 
        <children> 
         <Canvas fx:id="visualizerCanvas" /> 
        </children> 
        </StackPane> 
        <VBox fx:id="topRightVBox" GridPane.columnIndex="1"> 
        <children> 
         <StackPane prefHeight="150.0" prefWidth="200.0"> 
          <children> 
           <Region style="-fx-background-color: rgb(255,255,255,0.7);" /> 
           <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-font-weight: bold;" text="text here" /> 
          </children> 
         </StackPane> 
         <StackPane fx:id="mediaFileStackPane" maxWidth="1.7976931348623157E308" /> 
        </children> 
        </VBox> 
       </children> 
      </GridPane> 
      <GridPane fx:id="bottomGridPane" gridLinesVisible="true" GridPane.columnSpan="2" GridPane.rowIndex="1"> 
       <columnConstraints> 
       <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="35.0" /> 
       <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" percentWidth="60.0" prefWidth="343.0" /> 
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="52.0" /> 
       </columnConstraints> 
       <rowConstraints> 
       <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
       </rowConstraints> 
       <children> 
        <StackPane prefHeight="150.0" prefWidth="200.0" GridPane.columnIndex="2"> 
        <children> 
         <Region style="-fx-background-color: rgb(255,255,255,0.7);" /> 
         <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-font-weight: bold;" text="text here" textAlignment="CENTER" wrapText="true" StackPane.alignment="CENTER" /> 
        </children> 
        </StackPane> 
        <VBox prefHeight="200.0" prefWidth="100.0" spacing="5.0" /> 
       </children> 
      </GridPane> 
     </children> 
     </GridPane> 
    </children> 
</fx:root>

最後：

非常感謝誰將會設法解決次的人是問題:)。

來源

2017-01-16 GOXR3PLUS

從你的'初始化（）'方法刪除所有行。您試圖自己控制佈局操作，這會干擾StackPane的工作能力。相反，你可以在StackPane上設置一個寬度爲2的額外邊框，或者將StackPane的填充設置爲0.5，或者將Canvas的StackPane.margin設置爲0.5。 – VGR

@VGR那麼我怎樣才能得到寬度和高度的畫布呢？畫布會自動調整大小嗎？每當我將一個ChangeListener添加到'Canvas'的'widthProperty'和'heightProperty'時，我就會得到'-1'。我感謝你的幫助...... :) – GOXR3PLUS

StackPane已經將每個孩子的大小設置爲StackPane的內容大小（StackPane的大小減去其內嵌）。你不必做任何事情。 – VGR

經過研究，我找到了解決方案。創建一個自定義Canvas類和Canvas@Overriding方法：

從這個問題的最終答案很高興：How to make canvas Resizable in javaFX?

這給了我這個想法的鏈接：http://dlsc.com/2014/04/10/javafx-tip-1-resizable-canvas/

ResizableCavas.java：

import javafx.scene.canvas.Canvas; 
import javafx.scene.canvas.GraphicsContext; 
import javafx.scene.paint.Color; 

class ResizableCanvas extends Canvas { 

    GraphicsContext gc     = getGraphicsContext2D(); 
    int    canvasWidth   = 0; 
    int    canvasHeight  = 0; 
    int    halfCanvasHeight = 0; 

    /** 
    * Constructor 
    */ 
    public ResizableCanvas() { 

     // if i didn't add the draw to the @Override resize(double width, double 
     // height) then it must be into the below listeners 

     // Redraw canvas when size changes. 
     widthProperty().addListener((observable, oldValue, newValue) -> { 
      System.out.println("Entered WIDTH property"); 
      canvasWidth = (int) widthProperty().get(); 
     }); 
     heightProperty().addListener((observable, oldValue, newValue) -> { 
      System.out.println("Entered HEIGHT property"); 

      canvasHeight = (int) heightProperty().get(); 
      halfCanvasHeight = canvasHeight >> 1; 
     }); 

    } 

    /** 
    * Redraw the Canvas 
    */ 
    private void draw() { 

     System.out.println(" Real Canvas Width is:" + getWidth() + " , Real Canvas Height is:" + getHeight() + "\n"); 

     gc.clearRect(0, 0, canvasWidth, canvasHeight); 

     gc.setStroke(Color.RED); 
     gc.strokeLine(0, 0, canvasWidth, canvasHeight); 
     gc.strokeLine(0, canvasHeight, canvasWidth, 0); 
    } 

    @Override 
    public double minHeight(double width) { 
     return 1; 
    } 

    @Override 
    public double maxHeight(double width) { 
     return Double.MAX_VALUE; 
    } 

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

    @Override 
    public double minWidth(double height) { 
     return 1; 
    } 

    @Override 
    public double maxWidth(double height) { 
     return Double.MAX_VALUE; 
    } 

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

    @Override 
    public void resize(double width, double height) { 
     super.setWidth(width); 
     super.setHeight(height); 
     draw(); 
    } 
}

Controller.java：

import java.io.IOException; 
import java.util.logging.Level; 
import java.util.logging.Logger; 

import javafx.beans.property.SimpleIntegerProperty; 
import javafx.fxml.FXML; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.canvas.Canvas; 
import javafx.scene.canvas.GraphicsContext; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.StackPane; 
import javafx.scene.layout.VBox; 
import javafx.scene.paint.Color; 

public class Controller extends StackPane { 

    @FXML 
    private GridPane container; 

    @FXML 
    private GridPane topGridPane; 

    @FXML 
    private StackPane visualizerStackPane; 

    @FXML 
    private VBox topRightVBox; 

    @FXML 
    private StackPane mediaFileStackPane; 

    @FXML 
    private GridPane bottomGridPane; 

    // ------------------------------ 

    ResizableCanvas visualizerCanvas = new ResizableCanvas(); 

    /** 
    * Constructor 
    */ 
    public Controller() { 

     // ------------------------FXMLLoader --------------------------------- 
     FXMLLoader loader = new FXMLLoader(getClass().getResource("Controller.fxml")); 
     loader.setController(this); 
     loader.setRoot(this); 

     try { 
      loader.load(); 
     } catch (IOException ex) { 
      Logger.getLogger(getClass().getName()).log(Level.SEVERE, "Controller FXML can't be loaded!", ex); 
     } 
    } 

    /** 
    * Called as soon as FXML FILE has been loaded 
    */ 
    @FXML 
    private void initialize() { 

     visualizerStackPane.getChildren().add(visualizerCanvas); 

    } 
}

來源

2017-01-17 18:44:12 GOXR3PLUS

從您的initialize()方法中刪除綁定。您正試圖自己控制佈局操作，這會阻止StackPane做它應該做的事情。這將適當地調整Canvas的大小。

您聲明當您打印和height的Canvas時，它返回-1。而不是這樣做，打印容器StackPane的width和height。由於Canvas畢竟完全包含在StackPane之內，因此如果不相同，則width和height將幾乎相同。

來源

2017-01-17 16:41:55

你好Michael我修改了代碼，甚至沒有工作....我已經改變了'Controller.java'沒有綁定，也沒有修改'Canvas'的寬度，但它沒有被繪製。雖然當我修改寬度和高度Canvas'就像你在第二張圖片中看到的那樣:) :)感謝您的幫助... – GOXR3PLUS

在寬度和高度屬性偵聽器中取出resizeVisualizer調用。 –

我需要一種將'canvasWidth'和'canvasHeight'綁定到Canvas的'width'和'height'而不使用綁定的方式..這是出於性能原因，導致我在'Canvas'中繪製動畫 – GOXR3PLUS

JavaFX Canvas在StackPane中沒有正確調整大小

回答

相關問題