For most controls from the javafx.scene.control package, control borders on the scene do not coincide with real visible control borders. As a result, control borders (whose coordinates are calculated on the scene) are c.localToScene(c.boundsInLocal). On the sample scene, we can see the following controls: Button, HyperLink, RadioButton, TextBox, CheckBox, ToggleButton, Slider, ScrollBar and ListView. When clicking the "Draw borders" button, the borders of these controls are colored differently. The rectangle outlining the borders of the control on the scene is red (localToScene(boundsInLocal)). The control rectangle defined by the control's translateX, translateY, width and height properties is blue. For more convenient comparison, the blue rectangle is moved to the right for 250 units. The green rectangle is equivalent to the red one, and it is moved to the right for 250 units as well.

The first thing to note is that, in the majority of cases, the blue rectangle and the green one do not coincide. The differences are especially clear for ToggleButton, ScrollBar and ListView. So, the control borders defined by the "localToScene(boundsInLocal)" scheme are not equivalent to the visible ones. A way to find out the real scene coordinates for a random node is required.


[Borders.fx]

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

function DrawBorders(control: Control) : Void
{
var scene = control.scene;
var boundsInScene = control.localToScene(control.boundsInLocal);

var rect = Rectangle {fill : Color.TRANSPARENT; stroke : Color.RED; };
insert rect into scene.content;
rect.translateX = boundsInScene.minX;
rect.translateY = boundsInScene.minY;
rect.width = boundsInScene.width;
rect.height = boundsInScene.height;

var rect2 = Rectangle {fill : Color.TRANSPARENT; stroke : Color.GREEN; };
insert rect2 into scene.content;
rect2.translateX = boundsInScene.minX + 250;
rect2.translateY = boundsInScene.minY;
rect2.width = boundsInScene.width;
rect2.height = boundsInScene.height;

var rect3 = Rectangle {fill : Color.TRANSPARENT; stroke : Color.BLUE; };
insert rect3 into scene.content;
rect3.translateX = control.translateX + 250;
rect3.translateY = control.translateY;
rect3.width = control.width;
rect3.height = control.height;
}

var scene_content =
[
Button {translateY: 50; translateX: 50; width: 150; text: "MyButton"; },
Hyperlink {translateY: 100; translateX: 50; width: 150; text: "MyHyperlink"; },
RadioButton {translateY: 150; translateX: 50; width: 150; text: "MyRadioButton"; },
TextBox {translateY: 200; translateX: 50; width: 150; },
CheckBox {translateY: 250; translateX: 50; width: 150; text: "MyCheckBox"; },
ToggleButton {translateY: 300; translateX: 50; width: 150; text: "MyToggleButton"; },
Slider {translateY: 350; translateX: 50; width: 150; vertical: false; },
ScrollBar {translateY: 400; translateX: 50; width: 150; vertical: false; },
ListView {translateY: 450; translateX: 50; width: 150; height: 50; items: ["first", "second", 1, 2, 3]; }
];

Stage
{
title: "Borders"
scene: Scene
{
content:
[
scene_content,
Button
{
translateY: 600;
translateX: 400;
text: "Draw borders";
action: function(): Void
{
for(c in scene_content)
DrawBorders(c);
}
}
]
}
}