We Keep Coding

3D Camera movement in JavaFX using mouse

I've managed to move the camera using mouse drag. However, the problem is that once I've moved the camera and released the mouse press, the camera returns back to the origin.
I want the camera to remain in the changed position instead so that when I use the mouse again to move the camera, it moves from that position to wherever instead of from the origin.
package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Sphere;
public class Main extends Application {
private static final int WIDTH = 900;
private static final int HEIGHT = 600;
//Tracks drag starting point for x and y
private double anchorX, anchorY;
#Override
public void start(Stage primaryStage) {
Sphere sphere = new Sphere(50);
Group group = new Group();
group.getChildren().add(sphere);
Camera camera = new PerspectiveCamera();
Scene scene = new Scene(group, WIDTH, HEIGHT);
scene.setFill(Color.SILVER);
scene.setCamera(camera);
sphere.setTranslateX(WIDTH / 2);
sphere.setTranslateY(HEIGHT / 2);
initMouseControl(scene, camera, primaryStage, sphere);
primaryStage.setTitle("Solar System Simulator");
primaryStage.setScene(scene);
primaryStage.show();
}
private void initMouseControl(Scene scene, Camera camera, Stage stage, Sphere sphere) {
scene.setOnMousePressed(event -> {
//Save start points
anchorX = event.getSceneX();
anchorY = event.getSceneY();
});
scene.setOnMouseDragged(event -> {
camera.setTranslateY(anchorY - event.getSceneY());
camera.setTranslateX(anchorX - event.getSceneX());
});
stage.addEventHandler(ScrollEvent.SCROLL, event -> {
sphere.setTranslateZ(sphere.getTranslateZ() + event.getDeltaY());
});
}
public static void main(String[] args) {
launch(args);
}
}
I've tried googling to find a solution but couldn't find much on camera movement with javafx

First of all, your scene does not have depth buffer enabled . These constructors enable 3d features in a scene instance Scene(Parent root,double width,double height,boolean depthBuffer) and Scene(Parent root,double width,double height,boolean depthBuffer,SceneAntialiasing antiAliasing) both with depthBufer boolean set to true. Second ,if you want to translate a node ; translate it getting its current coordinates and then add new coords . that will avoid reset coords . I divided the dragged result by 10 because it brought too high values
public class Main extends Application {
private static final int WIDTH = 900;
private static final int HEIGHT = 600;
//Tracks drag starting point for x and y
private double anchorX, anchorY;
#Override
public void start(Stage primaryStage) {
Sphere sphere = new Sphere(50);
Group group = new Group();
group.getChildren().add(sphere);
Camera camera = new PerspectiveCamera();
// for 3d Scene constructor must have zbuffer= true and SceneAntialiasing
Scene scene = new Scene(group, WIDTH, HEIGHT, true, SceneAntialiasing.BALANCED);
scene.setFill(Color.SILVER);
scene.setCamera(camera);
sphere.setTranslateX(WIDTH / 2);
sphere.setTranslateY(HEIGHT / 2);
initMouseControl(scene, camera, primaryStage, sphere);
primaryStage.setTitle("Solar System Simulator");
primaryStage.setScene(scene);
primaryStage.show();
}
private void initMouseControl(Scene scene, Camera camera, Stage stage, Sphere sphere) {
scene.setOnMousePressed(event -> {
//Save start points
anchorX = event.getSceneX();
anchorY = event.getSceneY();
});
// translating camera from its current coords pluss event
scene.setOnMouseDragged(event -> {
camera.setTranslateY(camera.getTranslateY() + ((anchorY - event.getSceneY()) / 10));
camera.setTranslateX(camera.getTranslateX() + ((anchorX - event.getSceneX()) / 10));
});
stage.addEventHandler(ScrollEvent.SCROLL, event -> {
sphere.setTranslateZ(sphere.getTranslateZ() + event.getDeltaY());
});
}
public static void main(String[] args) {
launch(args);
}
}

I don't know in how far Google can help you fix your logic problems. I did no further analysis of your code but at least each time when you press the mouse button your camera position is reset to zero by design. Your changes are not cumulative.

Most simple rotate camera via mouse not working

Okay, this is driving me crazy. The documentation is pretty weak, the example application from Oracle is very weird, with a huge convoluted helper class, and even the questions about it on here have no answers!
I've largely followed and simplified this tutorial, but instead of rotating the object, I'm trying to rotate the camera, so when you drag the mouse, it should orbit the camera.
However, though I have confirmed via console logs and debugging that the event handlers are being called, and everything seems to have the right values, my rotates just never happen! What am I missing?
Furthermore, I can't manage to move the camera at all, even the (commented out) translateX and the like don't work either, so I am quite stumped, but can't get the axis to look like anywhere but the upper left corner!
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
public class RotateCameraExample extends Group {
private double anchorX, anchorY;
private double anchorAngleX = 0;
private double anchorAngleY = 0;
private DoubleProperty angleX = new SimpleDoubleProperty(0);
private DoubleProperty angleY = new SimpleDoubleProperty(0);
Camera camera;
Group axes;
public RotateCameraExample() {
axes = buildAxes();
getChildren().add(axes);
camera = new PerspectiveCamera(true);
camera.setFarClip(6000);
camera.setNearClip(0.01);
//camera.translateYProperty().set(300); // this doesn't do anything! why?
getChildren().add(camera);
initMouseControl();
}
private void initMouseControl() {
Rotate xRotate = new Rotate(0, Rotate.X_AXIS);
Rotate yRotate = new Rotate(0, Rotate.Y_AXIS);
camera.getTransforms().addAll(xRotate, yRotate);
xRotate.angleProperty().bind(angleX);
yRotate.angleProperty().bind(angleY);
setOnMousePressed(event -> {
anchorX = event.getSceneX();
anchorY = event.getSceneY();
anchorAngleX = angleX.get();
anchorAngleY = angleY.get();
});
setOnMouseDragged(event -> {
angleX.set(anchorAngleX - (anchorY - event.getSceneY()));
angleY.set(anchorAngleY + anchorX - event.getSceneX());
});
}
private Group buildAxes() {
final Box xAxis = new Box(1200, 10, 10);
final Box yAxis = new Box(10, 1200, 10);
final Box zAxis = new Box(10, 10, 1200);
xAxis.setMaterial(new PhongMaterial(Color.RED));
yAxis.setMaterial(new PhongMaterial(Color.GREEN));
zAxis.setMaterial(new PhongMaterial(Color.BLUE));
Group axisGroup = new Group();
axisGroup.getChildren().addAll(xAxis, yAxis, zAxis);
return axisGroup;
}
}
Here can see that the axis is visible in the upper left, and I want it to remain at (0, 0, 0) while moving the camera around it.
Here is the Application launch code, which is clearly not the issue:
public class TestApp extends Application {
#Override
public void start(Stage stage) throws IOException {
RotateCameraExample g = new RotateCameraExample();
Scene scene = new Scene(g, 800, 800, Color.BLACK);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}

Instead of adding the camera to the children of the Group,
getChildren().add(camera);
You should set the scene's camera.
scene.setCamera(g.camera);
You will immediately see the axes at the center of the screen. Similarly, mouse handler(s) should be applied to the scene. You can then update the group's transforms in your scene's handler(s).
As an example, the variation below alters the camera's rotation in response to mouse scroll events. Note how the vertical mouse scroll affects rotation about the X axis, while horizontal mouse scroll affects rotation about the Y axis. The same gestures also translate the group as a whole. An assortment of keyboard commands enable one to rotate the camera around the Z axis, dolly along the Z axis, and reset the scene.
You can translate and rotate about points on a circle, as illustrated here; in contrast, this related example animates the rotation of an object about a pivot.
import javafx.application.Application;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
/**
* #see https://stackoverflow.com/a/69260181/230513
*/
public class RotateCameraExample extends Application {
private static class RotateCamera extends Group {
private final Camera camera;
private final Rotate xRotate = new Rotate(0, Rotate.X_AXIS);
private final Rotate yRotate = new Rotate(0, Rotate.Y_AXIS);
private final Rotate zRotate = new Rotate(0, Rotate.Z_AXIS);
public RotateCamera() {
buildAxes();
camera = new PerspectiveCamera(true);
camera.setFarClip(6000);
camera.setNearClip(0.01);
camera.setTranslateZ(-2000);
camera.getTransforms().addAll(xRotate, yRotate, zRotate);
}
private void buildAxes() {
final Box xAxis = new Box(1200, 10, 10);
final Box yAxis = new Box(10, 1200, 10);
final Box zAxis = new Box(10, 10, 1200);
xAxis.setMaterial(new PhongMaterial(Color.RED));
yAxis.setMaterial(new PhongMaterial(Color.GREEN));
zAxis.setMaterial(new PhongMaterial(Color.BLUE));
Group axisGroup = new Group();
axisGroup.getChildren().addAll(xAxis, yAxis, zAxis);
this.getChildren().add(axisGroup);
}
}
#Override
public void start(Stage stage) {
RotateCamera g = new RotateCamera();
Scene scene = new Scene(g, 800, 800, Color.BLACK);
scene.setCamera(g.camera);
stage.setScene(scene);
stage.show();
scene.setOnScroll((final ScrollEvent e) -> {
g.xRotate.setAngle(g.xRotate.getAngle() + e.getDeltaY() / 10);
g.yRotate.setAngle(g.yRotate.getAngle() - e.getDeltaX() / 10);
g.setTranslateX(g.getTranslateX() + e.getDeltaX());
g.setTranslateY(g.getTranslateY() + e.getDeltaY());
});
scene.setOnKeyPressed((KeyEvent e) -> {
KeyCode code = e.getCode();
switch (code) {
case LEFT:
g.zRotate.setAngle(g.zRotate.getAngle() + 10);
break;
case RIGHT:
g.zRotate.setAngle(g.zRotate.getAngle() - 10);
break;
case UP:
g.setTranslateZ(g.getTranslateZ() - 100);
break;
case DOWN:
g.setTranslateZ(g.getTranslateZ() + 100);
break;
case HOME:
g.xRotate.setAngle(0);
g.yRotate.setAngle(0);
g.zRotate.setAngle(0);
g.setTranslateX(0);
g.setTranslateY(0);
g.setTranslateZ(0);
break;
default:
break;
}
});
}
public static void main(String[] args) {
launch();
}
}

How to fix distorted text with small font size in JavaFX?

I'm building an small application with JavaFX to visualize circuit boards. The application includes the possibility of scaling and shifting. When I display small texts, they are distorted, as you can see on the screenshots below. Only when I have zoomed far enough into the scene will the text be displayed correctly again. Does anyone have a solution to this problem? I included the example code from which the screenshots are taken.
#Override
public void start(Stage primaryStage) {
Pane root = new Pane();
addMouseEventHandler(root);
Pane pane1 = new Pane();
Text text1 = new Text(400, 400, "Text 1");
text1.setFont(new Font(5));
pane1.getChildren().addAll(text1);
root.getChildren().add(pane1);
primaryStage.setTitle("Text scaling problem");
primaryStage.setScene(new Scene(root, 800, 800));
primaryStage.show();
}
private void addMouseEventHandler(Pane root) {
// add scroll handling to zoom in and out
root.setOnScroll((event) ->
{
double factor = event.getDeltaY() > 0 ? 1.1 : 0.9;
root.setScaleX(root.getScaleX() * factor);
root.setScaleY(root.getScaleY() * factor);
});
// add drag handling
root.setOnMousePressed((mouseEvent) ->
{
startMouseX = mouseEvent.getSceneX();
startMouseY = mouseEvent.getSceneY();
startTranslationX = root.getTranslateX();
startTranslationY = root.getTranslateY();
});
root.setOnMouseDragged((mouseEvent) ->
{
double movedX = startMouseX - mouseEvent.getSceneX();
double movedY = startMouseY - mouseEvent.getSceneY();
double transX = startTranslationX - movedX;
double transY = startTranslationY - movedY;
root.setTranslateX(transX);
root.setTranslateY(transY);
});
}
correct text
vs
distorted text
The correct text is scrolled one more step than the distorted.

i am not sure if anything can be done about scaling of text inside of the text node. but if you separate the characters in different text nodes it will keep its shape. you might wanna try Canvas and manually draw using GraphicsContext2D.
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class DistortedText extends Application{
private double startMouseX, startMouseY;
private double startTranslationX, startTranslationY;
#Override
public void start(Stage primaryStage) {
HBox box = new HBox(new Text("T"),new Text("e"),new Text("x"),new Text("T"),new Text(" "),new Text("1"));
Pane root = new Pane(box);
addMouseEventHandler(root,box);
primaryStage.setTitle("Text scaling problem");
primaryStage.setScene(new Scene(root, 800, 800));
primaryStage.show();
}
private void addMouseEventHandler( Pane container, Node node) {
// add scroll handling to zoom in and out
container.setOnScroll((event) ->
{
double factor = event.getDeltaY() > 0 ? 1.1 : 0.9;
node.setScaleX(node.getScaleX() * factor);
node.setScaleY(node.getScaleY() * factor);
});
// add drag handling
container.setOnMousePressed((mouseEvent) ->
{
startMouseX = mouseEvent.getX();
startMouseY = mouseEvent.getY();
startTranslationX = node.getTranslateX();
startTranslationY = node.getTranslateY();
});
container.setOnMouseDragged((mouseEvent) ->
{
double movedX = startMouseX - mouseEvent.getX();
double movedY = startMouseY - mouseEvent.getY();
double transX = startTranslationX - movedX;
double transY = startTranslationY - movedY;
node.setTranslateX(transX);
node.setTranslateY(transY);
});
}
public static void main(String[] args){
launch( args);
}
}

Customly layouted Pane does not fit the size of its stages viewport

I have a pane that layouts its child nodes customly by overriding the layoutChildren method. It simplified looks like this:
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
public class MyPane extends Pane {
private Label lblTitel;
private Button btnStart;
public MyPane(Runnable sceneChanger) {
this.lblTitel = new Label("Title");
lblTitel.setFont(Font.font(16));
this.btnStart = new Button("Change Scene");
btnStart.setOnAction(e -> sceneChanger.run());
getChildren().addAll(lblTitel, btnStart);
}
#Override
protected void layoutChildren() {
lblTitel.setLayoutX(getWidth() / 2 - lblTitel.getWidth() / 2);
lblTitel.setLayoutY(4);
btnStart.setLayoutX(getWidth() / 2 - btnStart.getWidth() / 2);
btnStart.setLayoutY(getHeight() - 4 - btnStart.getHeight());
super.layoutChildren();
}
}
Displaying that Pane as root node of a scene of a stage works fine. But when I change the scene and then change it back again, the panes size doesn't fit the stages viewport anymore.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class App extends Application {
private Stage window;
private Scene firstScene;
private Scene secondScene;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage window) {
this.window = window;
this.firstScene = new Scene(new MyPane(() -> window.setScene(secondScene)));
this.secondScene = new Scene(new SecondPane());
window.setScene(firstScene);
window.setWidth(800);
window.setHeight(600);
window.show();
}
private class SecondPane extends Pane {
public SecondPane() {
Button btnBack = new Button("back");
btnBack.setOnAction(e -> window.setScene(firstScene));
getChildren().add(btnBack);
}
}
}
After changing back to the first scene the pane is far to large, you can see that by the title being more on the right side than in the horizontal center. As soon as I change the size of the window, the panes size perfectly fits the stages viewport again and everything is fine. So I added a custom increase of size to the window right after I switch scenes.
Platform.runLater(() -> window.setWidth(window.getWidth() + 1));
It works in most of the cases, but its a ridiculous solution and doesn't work when the stage is e.g. maximized.
Is there any way to make a customly layouted pane fit into the stages viewport after setting its scene to the stage, that works in all cases?

First, note that the layout you give in the example code can readily be accomplished using existing layout panes. Something like
BorderPane myPane = new BorderPane();
myPane.setTop(lblTitel);
myPane.setBottom(btnStart);
BorderPane.setAlignment(lblTitel, Pos.CENTER);
BorderPane.setAlignment(btnStart, Pos.CENTER);
BorderPane.setMargin(lblTitle, new Insets(4, 0, 0, 0));
BorderPane.setMargin(btnStart, new Insets(0, 0, 4, 0));
should give you the layout you want.
In general, you should always prefer the built-in layouts to a custom layout.
If you find you really do need a custom pane, then there is a lot more work to do than simply laying out the child nodes. Your pane needs to override the methods to determine its resizable range, which means overriding the methods computeMin/Pref/MaxWidth() and computeMin/Pref/MaxHeight(). You should also determine the content bias by overriding getContentBias(). The layoutChildren() method should determine the size of the child nodes as well as their positions. It should do this by determining their preferred sizes and using those if possible, and using a size in the min-max range for each otherwise. You can determine those sizes by calling prefWidth(), prefHeight() etc on the child nodes.
Finally, to ensure the custom layout properly respects borders and padding, you should account for any insets in the layout calculations. The utility methods snappedTop/Right/Bottom/LeftInsets() give you the values for the insets coming from borders or padding.
Here's an example which works for me: this assumes both child nodes have HORIZONTAL content bias (which makes sense here), so I pass -1 to the methods computing the width, and the computed width to the methods computing the height.
import javafx.geometry.Orientation;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;
public class MyPane extends Pane {
private Label lblTitel;
private Button btnStart;
public MyPane(Runnable sceneChanger) {
// updated to test for long text, wrapping, etc.
this.lblTitel = new Label("This is a really long title that might end up having to span multiple lines of text");
this.lblTitel.setWrapText(true);
this.lblTitel.setTextAlignment(TextAlignment.CENTER);
lblTitel.setFont(Font.font(16));
this.btnStart = new Button("Change Scene");
btnStart.setOnAction(e -> sceneChanger.run());
getChildren().addAll(lblTitel, btnStart);
}
#Override
public Orientation getContentBias() {
return Orientation.HORIZONTAL ;
}
#Override
public double computePrefWidth(double height) {
return Math.max(lblTitel.prefWidth(height), btnStart.prefWidth(height));
}
#Override
public double computeMinWidth(double height) {
return Math.max(lblTitel.minWidth(height), btnStart.minWidth(height));
}
#Override
public double computeMaxWidth(double height) {
return Math.max(lblTitel.maxWidth(height), btnStart.maxWidth(height));
}
#Override
public double computePrefHeight(double width) {
return lblTitel.prefHeight(width) + btnStart.prefHeight(width) + 8 ;
}
#Override
public double computeMinHeight(double width) {
return lblTitel.minHeight(width) + btnStart.minHeight(width) + 8 ;
}
#Override
public double computeMaxHeight(double width) {
return lblTitel.maxHeight(width) + btnStart.maxHeight(width) + 8 ;
}
#Override
protected void layoutChildren() {
double usableWidth = getWidth() - snappedLeftInset() - snappedRightInset() ;
double usableHeight = getHeight() - snappedTopInset() - snappedBottomInset() ;
double lblTitleWidth = lblTitel.prefWidth(-1);
if (lblTitleWidth > usableWidth) {
lblTitleWidth = Math.max(lblTitel.minWidth(-1), usableWidth);
}
double lblTitleHeight = lblTitel.prefHeight(lblTitleWidth);
if (lblTitleHeight > usableHeight) {
lblTitleHeight = Math.max(lblTitel.prefHeight(lblTitleWidth), usableHeight);
}
double lblTitleX = snappedLeftInset() + usableWidth / 2 - lblTitleWidth / 2 ;
lblTitel.resizeRelocate(lblTitleX, 4 + snappedTopInset(), lblTitleWidth, lblTitleHeight);
double btnStartWidth = btnStart.prefWidth(-1);
if (btnStartWidth > usableWidth) {
btnStartWidth = Math.max(btnStart.minWidth(-1), usableWidth);
}
double btnStartHeight = btnStart.prefHeight(btnStartWidth);
if (btnStartHeight > usableHeight) {
btnStartHeight = Math.max(btnStart.minHeight(btnStartWidth), usableHeight);
}
double btnStartX = snappedLeftInset() + usableWidth / 2 - btnStartWidth / 2 ;
double btnStartY = snappedTopInset() + getHeight() - 4 - btnStartHeight ;
btnStart.resizeRelocate(btnStartX, btnStartY, btnStartWidth, btnStartHeight);
}
}

How can I build map with region selection?

I trying to build map which consist of regions(states) and when mouse entered to some region, I need handle it. Have many png images which represent each region separately. I blend my images and got what I want, but I can't handle some region.
For instance:
It's a first region img
This is a second region img
As result I got:
Code:
#Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("view/MapView.fxml"));
Pane root = loader.load();
primaryStage.setTitle("Map");
primaryStage.setScene(new Scene(root, 700, 700));
primaryStage.show();
//First region
File file = new File("src/res/img/region1.png");
Canvas canvas = new Canvas(700, 700);
canvas.addEventHandler(MouseEvent.MOUSE_ENTERED_TARGET, event -> System.out.println("Region 1"));
GraphicsContext graphicsContext = canvas.getGraphicsContext2D();
graphicsContext.drawImage(new Image(file.toURI().toString()), 0, 0);
root.getChildren().add(canvas);
//Second region
file = new File("src/res/img/region2.png");
canvas = new Canvas(700, 700);
canvas.addEventHandler(MouseEvent.MOUSE_ENTERED_TARGET, event -> System.out.println("Region 2"));
graphicsContext = canvas.getGraphicsContext2D();
graphicsContext.drawImage(new Image(file.toURI().toString()), 0, 0);
root.getChildren().add(canvas);
}
In console I got always "Region 2".
Please give me tips for research. Thanks in advance!

You can use an ImageView and setPickOnBounds for that.
Example code:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class LayersWithMouseEvents extends Application {
#Override
public void start(Stage primaryStage) {
// root
StackPane root = new StackPane();
// create layers
Pane region1Layer = new Pane();
Pane region2Layer = new Pane();
// add layers
root.getChildren().addAll(region1Layer, region2Layer);
// load images
ImageView region1ImageView = new ImageView( new Image( getClass().getResource("region1.png").toExternalForm()));
ImageView region2ImageView = new ImageView( new Image( getClass().getResource("region2.png").toExternalForm()));
// add images
region1Layer.getChildren().add(region1ImageView);
region2Layer.getChildren().add(region2ImageView);
// mouse handler
region1Layer.setOnMousePressed(e -> System.out.println("Region 1: " + e));
region2Layer.setOnMousePressed(e -> System.out.println("Region 2: " + e));
// this is the magic that allows you to click on the separate layers, but ONLY(!) as long as the layer is transparent
region1Layer.setPickOnBounds(false);
region2Layer.setPickOnBounds(false);
primaryStage.setScene(new Scene(root, 800, 600));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
In the future please create an MCVE with focus on complete. Nobody wants to waste their time in order to make your incomplete example work.

To my opinion using a canvas here is not the right approach. If you would define your regions as polygons and add them to the scene graph you can attach a listener to each of these polygons and then react accordingly if the mouse is over some region. Maybe this is also possible with image views but I have never tried wether a transparent region of an image is also mouse transparent which seems to be necessary in that case. For a program of mine I used polygons and it works nicely.

The image data can be used to determine the color of the pixels under the mouse cursor. If the pixel is not fully transparent, then the cursor is on that region.
To retrieve this information you need to use a listener for the mouse moved event. For simplicity you can use a property with a listener attached to trigger the region enter/leave events:
The following example assumes you keep references to the images used for the regions named image1 and image2:
PixelReader reader1 = image1.getPixelReader();
PixelReader reader2 = image2.getPixelReader();
SimpleIntegerProperty region = new SimpleIntegerProperty(-1);
region.addListener((observable, oldValue, newValue) -> {
if (newValue.intValue() < 0) {
System.out.println("region left");
} else {
System.out.println("Region " + (newValue.intValue() + 1));
}
});
canvas.setOnMouseMoved(event -> {
int x = (int) event.getX();
int y = (int) event.getY();
if (x < image1.getWidth() && y < image1.getHeight() && reader1.getColor(x, y).getOpacity() != 0) {
region.set(0);
} else if (x < image2.getWidth() && y < image2.getHeight() && reader2.getColor(x, y).getOpacity() != 0) {
region.set(1);
} else {
region.set(-1);
}
});
Also there is no need to create multiple Canvas to paint the images.