JavaFX Entered Mouse Event Delay/Lag

Question

I've created a grid of Rectangle objects and added them to a Pane. Each rectangle has a mouse event listener attached to it which get triggered by the MouseEvent.Entered trigger. The handler simply changes the colour of the rectangle when the user moves the mouse over the rectangle. The issue is that the trigger seems to have a considerable delay before it gets executed. Any ideas how to speed this up so its realtime with the mouse?

I've uploaded a recording here: https://screencast-o-matic.com/watch/cFQI0lqdHe

public class WarehouseMap extends Pane {

    private int xSpaces = 200;
    private int ySpaces = 100;
    private ArrayList gridReferences = new ArrayList ();

    public WarehouseMap() {
        setWidth(2000);
        setHeight(1000);
        initGrid();
    }

    public void initGrid() {
        double rectWidth = getWidth() / xSpaces;
        double rectHeight = getHeight() / ySpaces;

        for(int x=0; x () {
                    @Override
                    public void handle(MouseEvent event) {
                        gr.setFill(Color.DARKGRAY);
                    }

                });

                gr.addEventHandler(MouseEvent.MOUSE_EXITED, new EventHandler () {
                    @Override
                    public void handle(MouseEvent event) {
                        gr.setFill(Color.TRANSPARENT);
                    }

                });

                gridReferences.add(gr);
                this.getChildren().add(gr);
            }
        }
    }
}

user_6154431 · Answer

You can use Canvas to create a more faster view:

public class WarehouseCanvasMap extends Pane {
    private int xSpaces = 200;
    private int ySpaces = 100;
    private int cellSize = 10;
    private int lineSize = 1;
    private Canvas canvas;

    public WarehouseCanvasMap() {
        setWidth(xSpaces * cellSize);
        setHeight(ySpaces * cellSize);
        initGrid();
    }

    public void initGrid() {
        canvas = new Canvas();
        canvas.setWidth(getWidth());
        canvas.setHeight(getHeight());
        getChildren().add(canvas);
        GraphicsContext graphic = canvas.getGraphicsContext2D();

        graphic.setStroke(Color.GRAY);
        graphic.setFill(Color.DARKGRAY);
        graphic.setLineWidth(lineSize);

        canvas.setOnMouseMoved(event -> {
            graphic.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());

            graphic.fillRect(event.getX() - event.getX() % cellSize, event.getY() - event.getY() % cellSize, cellSize, cellSize);

            for (int x = 0; x <= xSpaces; x++) {
                graphic.strokeLine(x * cellSize, 0, x * cellSize, canvas.getHeight());
            }
            for (int y = 0; y <= xSpaces; y++) {
                graphic.strokeLine(0, y * cellSize, canvas.getWidth(), y * cellSize);
            }
        });
    }
}

This solution looks like this:

And it looks faster that original:

JavaFX Entered Mouse Event Delay/Lag

1 Answers