This discussion is archived
2 Replies Latest reply: Nov 10, 2012 6:57 AM by bjmueller RSS

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

bjmueller Newbie
Currently Being Moderated
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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    OK - I'll check where I can file this as a bug...
    Thanks a lot for your quick response + for your "dirty workaround" ;-)!

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points