2014-01-07 95 views
4

對於整個JavaFX來說,我很新,正如你可能知道的那樣。這是我在玩Canvas節點時遇到的問題。我有一個BorderPane作爲我的根節點,我想要一個Canvas佔據它中間的所有可用空間。但是,我在執行確切的行爲時遇到了一些麻煩。這裏是我一直在努力的只是:BorderFane中的JavaFX-8畫布

public void start(Stage stage){ 
    BorderPane root=new BorderPane(); 
    Canvas canvas=new Canvas(250,250); 
    //canvas.widthProperty().bind(root.widthProperty()); 
    //canvas.heightProperty().bind(root.heightProperty()); 
    GraphicsContext gc=canvas.getGraphicsContext2D(); 
    new AnimationTimer(){ 
     @Override 
     public void handle(long l){ 
      double width=canvas.getWidth(),height=canvas.getHeight(); 
      gc.clearRect(0,0,width,height); 
      gc.strokeRect(0,0,width,height); 
      gc.strokeLine(0,0,width,height); 
      gc.strokeLine(0,height,width,0); 
     } 
    }.start(); 
    root.setCenter(canvas); 
    root.setBottom(new Button("Placeholder")); 
    root.setTop(new Button("Placeholder")); 
    stage.setScene(new Scene(root)); 
    stage.show(); 
} 

擴大爲面板做相反的,我的畫布只是停留在它的中心,保留了其原始大小。如果重新添加頂部附近的兩條註釋行,Canvas會隨着窗格的增加而縮小,但不涉及其中心的尺寸(如預期的那樣)。有沒有辦法將這種綁定行爲應用到BorderPane的中心,或者另一種方法來完成這一點,我不知道?

回答

1

編輯:剛發現一個好得多解決方案今日(2014年5月19日):

http://fxexperience.com/2014/05/resizable-grid-using-canvas/

因此更容易和更短的比我-.-


現在我的原創方法

我和你有同樣的問題。

我發現了一個真難看的解決方法就可以使用,但也許有這樣做的另一種方法...

我的解決方法:

class MyCanvas { 

    private Canvas cv; 
    private StackPane box; 

    public MyCanvas(Stage stg) { 
     cv = new Canvas(500, 500); 
     box = new StackPane(); 

     box.getChildren().add(cv); 

     //When the Stage size changes, the canvas size becomes resetted 
     //but the Hbox expandes automatically to fit the with again 
     //and so the canvas become resized to fit the HBox 
     stg.widthProperty().addListener(new ChangeListener<Number>() { 
      @Override 
      public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) { 
      resize(); 
      } 
     }); 

     stg.heightProperty().addListener(new ChangeListener<Number>() { 
      @Override 
      public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) { 
      resize(); 
      } 
     }); 

     box.widthProperty().addListener(new ChangeListener<Number>() { 
      @Override 
      public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) { 
      adapt(); 
      } 
     }); 

     box.heightProperty().addListener(new ChangeListener<Number>() { 
      @Override 
      public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) { 
      adapt(); 
      } 
     }); 

     paint(); 
    } 

    private void paint(){ 
     //Paint something .... 
     GraphicsContext ctx = cv.getGraphicsContext2D(); 

     double w = cv.getWidth(); 
     double h = cv.getHeight(); 

     ctx.clearRect(0, 0, w, h); 

     ctx.setFill(Color.BLUE); 
     ctx.fillRect(0, 0, w, h); 
    } 

    //Add this HBox to your content pane 
    public StackPane getBox() { 
     return box; 
    } 

    public void resize(){ 
     cv.setWidth(50); 
     cv.setHeight(50); 
    } 

    private void adapt(){ 
     cv.setHeight(box.getHeight()); 
     cv.setWidth(box.getWidth()); 
     paint(); 
    } 
} 

而在你的主營:

public class Root extends Application{ 
    public static void main(String[] args){ launch(args); } 

    public void start(Stage stg){ 
     MyCanvas cv = new MyCanvas(stg); 
     BorderPane pane = new BorderPane(); 
     pane.setCenter(pane.getBox()); 
     stg.setScene(new Scene(pane)); 
     stg.show(); 
    } 
} 

希望這可以幫助你解決你的問題。

nZeloT

+0

非常感謝。我最終結合了我們的方法,並將Canvas的寬度和高度屬性綁定到「常規」窗格,然後將Canvas添加到該窗格,然後將該窗格設置爲原始BorderPane的中心。 –

+0

我很高興能幫到你:) – nZeloT