JavaFX:鼠标落后于绘图

Question

我有一个 JavaFX 应用程序，我可以在 Canvas 上绘图。绘图跟随鼠标。这个移动有点滞后，因为渲染需要一些时间。到目前为止还可以。但是当我停止鼠标时，它的坐标有时仍然在旧位置。

以下代码重现了该问题:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.EllipseBuilder;
import javafx.stage.Stage;

public class TestApp extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        Pane p = new Pane();

        final Ellipse ellipse = EllipseBuilder.create().radiusX(10).radiusY(10).fill(Color.RED).build();
        p.getChildren().add(ellipse);

        p.setOnMouseMoved(event ->
        {
            ellipse.setCenterX(event.getX());
            ellipse.setCenterY(event.getY());
            Platform.runLater(() -> doSomeWork());
        });

        Scene scene = SceneBuilder.create().root(p).width(1024d).height(768d).build();
        primaryStage.setScene(scene);

        primaryStage.show();
    }

    void doSomeWork()
    {
        try
        {
            Thread.sleep(100);
        }
        catch (Exception ignore) { }
    }
}

当您快速移动鼠标并突然停止时，圆圈有时不在鼠标下方。

我尝试过使用或不使用 Platform.runLater() 或调用顺序。没有成功。

编辑:我无法在 Windows 下重现此行为。

Answer 1

我的假设是，onMouseMoved 在 UI 线程以及 Platform.runLater 上被调用。这会阻塞 UI 线程，因此最后一次 onMouseMoved 调用将被丢弃(这使得圆圈位于 onMouseMoved 最后一次调用的位置)。如 Platform.runLater-Doc 中所定义:

Additionally, long-running operations should be done on a background thread where possible, freeing up the JavaFX Application Thread for GUI operations.

因此，请尝试在额外线程上完成工作，并通过 runLater 在计算完成后将其发布到 UI:

public class TestApp extends Application
{

    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        Pane p = new Pane();

        final Ellipse ellipse = EllipseBuilder.create().radiusX(10).radiusY(10).fill(Color.RED).build();
        p.getChildren().add(ellipse);

        p.setOnMouseMoved(event ->
        {
            ellipse.setCenterX(event.getX());
            ellipse.setCenterY(event.getY());
            doSomeWork();
        });

        Scene scene = SceneBuilder.create().root(p).width(1024d).height(768d).build();
        primaryStage.setScene(scene);

        primaryStage.show();
    }

    void doSomeWork()
    {
        new Thread(){
            public void run(){

                try
                {
                    Thread.sleep(100);
                    Platform.runLater(() -> {
                        // ui updates
                    });
                }
                catch (Exception ignore) { }
            }
        }.start();
    }
}