2 Replies Latest reply: Nov 10, 2012 8:57 AM by bjmueller RSS

    Multiple, overlapping Canvas/Nodes in one pane: rendering sequence problems

    bjmueller
      I have the following issue:

      1 Outside pane, inside the following components in the following sequence:
      ...(1) Canvas (0,0,100,100)
      ...(2) Button (0,0,100,30)
      ...(3) Canvas (90,90,100,100)
      ...(4) Button (90,90,100,30)
      So there is an overlapping area of 10x10 between (1),(2) and (3),(4).

      When moving with the mouse over (4)-Button then the (1)-Canvas is drawn over the (2)-Button - which is not correct.

      It seems to me like a rendering-sequence/dependency-issue: moving the mouse re-renders (4)-Button, triggering a re-rendering of (1)-Canvas because of overlapping, but (2)-Button seems not to be re-rendered.

      Is there any "thinking/understanding"-problem on my side? - Any hint is highly apprecaited...
      Thanks!




      This is the code to reproduce, when running: move the mouse over "(4) Button".
      package ztest;
      
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.scene.SceneBuilder;
      import javafx.scene.canvas.Canvas;
      import javafx.scene.control.Button;
      import javafx.scene.layout.Pane;
      import javafx.scene.paint.Color;
      import javafx.stage.Stage;
      
      
      public class Test_40_Canvas extends Application
      {
          class MyPane extends Pane
          {
              Canvas m_canvas1;
              Button m_button2;
              Canvas m_canvas3;
              Button m_button4;
              
              public MyPane()
              {
                  m_canvas1 = new Canvas();
                  m_button2 = new Button();
                  m_canvas3 = new Canvas();
                  m_button4 = new Button();
                  
                  getChildren().add(m_canvas1);
                  getChildren().add(m_button2);
                  getChildren().add(m_canvas3);
                  getChildren().add(m_button4);
                  
                  m_canvas1.setWidth(100);
                  m_canvas1.setHeight(100);
                  m_canvas1.getGraphicsContext2D().setFill(Color.GREEN);
                  m_canvas1.getGraphicsContext2D().fillRect(8,8,92,92);
                  m_button2.setText("(2) Button");
                  
                  m_canvas3.setWidth(100);
                  m_canvas3.setHeight(100);
                  m_canvas3.getGraphicsContext2D().setFill(Color.BLUE);
                  m_canvas3.getGraphicsContext2D().fillRect(8,8,92,92);
                  m_button4.setText("(4) Button");
              }
              
              protected void layoutChildren()
              {
                  m_canvas1.resizeRelocate(0,0,100,100);
                  m_button2.resizeRelocate(0,0,100,30);
                  m_canvas3.resizeRelocate(90,90,100,100);
                  m_button4.resizeRelocate(90,90,100,30);
              }
          }
          
          public static void main(String[] args) { launch(args); }
      
          MyPane m_pane;
          
          @Override
          public void start(Stage primaryStage)
          {
              primaryStage.setTitle("Hello World!");
              final Scene scene = SceneBuilder.create()
                   .root
                   (
                        m_pane = new MyPane()
                   )
                   .build();
              
              primaryStage.setScene(scene);
              primaryStage.show();
          }
          
      }
        • 1. Re: Multiple, overlapping Canvas/Nodes in one pane: rendering sequence problems
          MiPa
          I'd consider this behaviour a bug. A quick and dirty workaround would be the following although I would not like to do that in a real application:
          package ztest;
          
          import javafx.application.Application;
          import javafx.scene.DepthTest;
          import javafx.scene.Scene;
          import javafx.scene.SceneBuilder;
          import javafx.scene.canvas.Canvas;
          import javafx.scene.control.Button;
          import javafx.scene.layout.Pane;
          import javafx.scene.paint.Color;
          import javafx.stage.Stage;
           
           
          public class Test_40_Canvas extends Application
          {
              class MyPane extends Pane
              {
                  Canvas m_canvas1;
                  Button m_button2;
                  Canvas m_canvas3;
                  Button m_button4;
                  
                  public MyPane()
                  {
                       setDepthTest(DepthTest.ENABLE);
                       
                      m_canvas1 = new Canvas();
                      m_button2 = new Button();
                      m_canvas3 = new Canvas();
                      m_button4 = new Button();
                      
                      getChildren().add(m_canvas1);
                      getChildren().add(m_button2);
                      getChildren().add(m_canvas3);
                      getChildren().add(m_button4);
                      
                      m_canvas1.setWidth(100);
                      m_canvas1.setHeight(100);
                      m_canvas1.getGraphicsContext2D().setFill(Color.GREEN);
                      m_canvas1.getGraphicsContext2D().fillRect(8,8,92,92);
                      m_button2.setText("(2) Button");
                      
                      m_canvas3.setWidth(100);
                      m_canvas3.setHeight(100);
                      m_canvas3.getGraphicsContext2D().setFill(Color.BLUE);
                      m_canvas3.getGraphicsContext2D().fillRect(8,8,92,92);
                      m_button4.setText("(4) Button");
                  }
                  
                  protected void layoutChildren()
                  {
                      m_canvas1.resizeRelocate(0,0,100,100);
                      m_canvas1.setTranslateZ(4);
                      m_button2.resizeRelocate(0,0,100,30);
                      m_button2.setTranslateZ(3);
                      m_canvas3.resizeRelocate(90,90,100,100);
                      m_canvas3.setTranslateZ(2);
                      m_button4.resizeRelocate(90,90,100,30);
                      m_button4.setTranslateZ(1);
                  }
              }
              
              public static void main(String[] args) { launch(args); }
           
              MyPane m_pane;
              
              @Override
              public void start(Stage primaryStage)
              {
                  primaryStage.setTitle("Hello World!");
                  final Scene scene = SceneBuilder.create()
                       .root
                       (
                            m_pane = new MyPane()
                       )
                       .depthBuffer(true)
                       .build();
                  
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
              
          }
          • 2. Re: Multiple, overlapping Canvas/Nodes in one pane: rendering sequence problems
            bjmueller
            OK - I'll check where I can file this as a bug...
            Thanks a lot for your quick response + for your "dirty workaround" ;-)!