One of the problems that cropped up while converting our Java3D PageFlow PDF viewer mode to JavaFX was the issue of how to replicate z positioning of Java3D’s 3D scene with JavaFX’s 2D scene.
Scaling the size is an easy way to make things appear further away, but there was no obvious way to set a z order to make one node appear in front of the other, mainly due to a distinct lack of a .setZ() or similar method.
The solution is that in JavaFX the Z order of Nodes is not controlled by a z position property of the nodes, it is actually controlled by the order in which they appear in the scene graph.
Put another way, the order that you add your elements to the scene matters. If you add image 1 then add image 2, as image 2 was the last thing to be added it will therefore be the last thing to be drawn, so image 2 will appear in front of image 1.
To demonstrate, here’s a video of our JavaFX PageFlow mode:
As you can see, the page in the center is closest to us, and as pages get further from the center, they also move backwards.
So to make all that appear in the correct order, the first thing to add to the scene is the 2 background colors. Next up are the pages. As the pages at the outer edges are furthest away they need to be added first. Rather than alternating between each side of the main page, as the pages either side of the main page will never overlap I can actually do one side at a time. Then the main page gets added, and lastly the controls like the nav and zoom bars.
Here’s a quick visual demonstration:
In my code, this resulted in creation a reorder method whose job is specifically to pull out the pages in the scene graph, then put them back in the correct order.
Having this much control is definitely advantageous – it allows you to specifically optimize the sorting for your use case, but it’s also a little unclear. Perhaps it would be advantageous to have a simple setZ() method too. What do you think?
I have written several articles on converting our Java3D usage into JavaFX and you can read the other articles here.
Latest posts by Leon Atherton (see all)
- Adding Google Analytics to Web Content - January 17, 2014
- Image Optimisation: What PNGQuant is and why you should use it - January 14, 2014
- Adding Annotations to Web Content with Annotator.js - January 13, 2014
- How to fill shapes on HTML5 Canvas using EvenOdd winding rule - September 4, 2013