java - StrokeType.OUTSIDE 在 ScrollPane 内的标签上使用时会导致大量滞后

Question

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        ScrollPane scrollPane = new ScrollPane();
        VBox vbox = new VBox();

        for (int i = 0; i < 50; i++) {
            Label label = new Label("Label " + i);
            label.getStyleClass().add("test");
            vbox.getChildren().add(label);
        }

        scrollPane.setContent(vbox);

        Scene scene = new Scene(scrollPane, 500, 500);
        primaryStage.setScene(scene);
        scene.getStylesheets().add("/style.css");
        primaryStage.show();
    }

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

样式.css:

.test.label .text {
    -fx-fill: white;
    -fx-stroke: red;
    -fx-stroke-type: outside;
}

JDK 和 JavaFX 13

标签渲染得很好，但当我尝试滚动时，它确实滞后了很多。

我希望它能像不使用 -fx-lines-type: Outside; 时一样平滑，例如，将 style.css 的内容替换为

.test.label .text {
    -fx-fill: white;
    -fx-stroke: red;
    /* -fx-stroke-type: outside; */
}

修复了滚动滞后，但笔画在文本内部绘制时与填充重叠。

我也尝试过使用 Java 和 JavaFX 11 运行，但没有区别。

Answer 1

我研究出了如何在不使用 Nand 的解决方法的情况下获得更好的滚动性能。我使用了这个问题的一些建议:

• JavaFx animation poor performance, consumes all my CPU

具体来说，缓存节点的建议:

node.setCache(true);
node.setCacheShape(true);
node.setCacheHint(CacheHint.SPEED);

一旦我将这些函数调用添加到 Nand 测试程序中生成的标签中，滚动性能就非常好(而不是明显令人难以置信的滞后)。

在渲染被缓存之前，场景的初始绘制有点慢(需要一秒钟左右)。如果将标签数量从 50 个增加到 500 个，则可以最好地观察到初始绘制的缓慢程度。但是，一旦绘制了一次场景并缓存了节点，滚动就不再降低应用程序的每秒帧数性能。

在上下文中，这个解决方案是:

public void start(Stage primaryStage) {
    ScrollPane scrollPane = new ScrollPane();
    VBox vbox = new VBox();

    for (int i = 0; i < 500; i++) {
        Label label = new Label("Label " + i);
        label.getStyleClass().add("test");
        vbox.getChildren().add(label);

        label.setCache(true);
        label.setCacheShape(true);
        label.setCacheHint(CacheHint.SPEED);
    }

    scrollPane.setContent(vbox);

    Scene scene = new Scene(scrollPane, 500, 500);
    primaryStage.setScene(scene);
    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
    primaryStage.show();
}

其中 style.css 是问题中提供的。

要加快场景的初始绘制速度，您可以使用投影效果，它可以模拟轮廓，提供类似的外观。不同的效果设置(例如使用单 channel 框而不是高斯)将提供略有不同的渲染，因此它是可以定制的。

.shadow-outline.label .text {
    -fx-fill: white;
    -fx-effect: dropshadow(gaussian, red, 1, 1.0, 0, 0);
}