如何在JavaFX的TextFlow中禁用Line节点的平滑效果？

问题说明 #

我在两个TextFlow组件中分别添加贯穿的竖线，需要实现1px的线条宽度。虽然已经设置line.setSmooth(false)，但线条仍呈现类似2px的模糊效果，实际渲染未达到预期。

原代码 #

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        var textFlow1 = createTextFlow();
        textFlow1.setStyle("-fx-background-color: cyan");
        var textFlow2 = createTextFlow();
        textFlow2.setStyle("-fx-background-color: yellow");

        VBox vbox = new VBox(textFlow1, textFlow2);
        Scene scene = new Scene(vbox, 300, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private TextFlow createTextFlow() {
        Text textA = new Text("ABC ");
        textA.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
        Line line = new Line();
        line.setManaged(false);
        line.setSmooth(false);
        Text textB = new Text(" DEF");
        textB.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
        TextFlow textFlow = new TextFlow(textA, line, textB) {
            @Override
            protected void layoutChildren() {
                super.layoutChildren();
                double x = textB.getBoundsInParent().getMinX();
                line.setStartX(x);
                line.setEndX(x);
                line.setEndY(getHeight());
            }
        };
        return textFlow;
    }

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

渲染效果 #

解决方法 #

问题核心是线条的X坐标未对齐到整数像素边界，即使关闭平滑，跨像素的线条依然会被渲染成模糊的宽线条。只需调整线条坐标到整数像素位置即可解决：

修改后的代码 #

private TextFlow createTextFlow() {
    Text textA = new Text("ABC ");
    textA.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
    Line line = new Line();
    line.setManaged(false);
    line.setSmooth(false);
    line.setStrokeWidth(1); // 明确指定线条宽度
    Text textB = new Text(" DEF");
    textB.setStyle("-fx-font-family: 'monospace'; -fx-font-size: 14;");
    TextFlow textFlow = new TextFlow(textA, line, textB) {
        @Override
        protected void layoutChildren() {
            super.layoutChildren();
            double x = textB.getBoundsInParent().getMinX();
            // 将X坐标取整，确保线条落在单个像素列上
            x = Math.round(x);
            line.setStartX(x);
            line.setEndX(x);
            line.setStartY(0); // 对齐起始Y坐标，避免垂直方向模糊
            line.setEndY(getHeight());
        }
    };
    return textFlow;
}

关键调整点 #

• 像素坐标对齐：通过Math.round(x)将线条X坐标转为整数，让线条完全覆盖单个像素列，消除跨像素渲染的模糊。
• 显式设置strokeWidth：明确指定线条宽度为1px，避免默认值或隐式设置导致的偏差。
• 垂直坐标对齐：将线条起始Y设为0，确保垂直方向也对齐像素边界，进一步优化渲染效果。

内容的提问来源于stack exchange，提问作者SilverCube