如何在JavaFX 17中创建可自适应尺寸的多色分段十字图形？

问题原因分析 #

你当前的问题核心在于：

• 叠加的虚线线条与底层实线线条起始位置完全重合，导致颜色覆盖而非交替显示；
• strokeDashArray的数值是沿线条路径的长度，但不调整虚线偏移的话，两种颜色的分段会重叠，无法形成无空白的交替效果；
• 当线条总长度不是分段长度的整数倍时，末端会出现不完整分段，视觉显示异常。

方案一：调整虚线偏移实现交替分段 #

通过设置strokeDashOffset让虚线线条的起始位置偏移一个段长，刚好填补底层线条的空白区域，实现无间隙的颜色交替：

public void initialize(URL url, ResourceBundle resourceBundle) {
    // 垂直段配置
    double verticalSegment = 50.0;
    var line = new Line(200, 200, 200, 600);
    line.setStroke(Paint.valueOf("#FF0000"));
    line.setStrokeWidth(10.0);
    line.getStrokeDashArray().addAll(verticalSegment, verticalSegment);

    var line2 = new Line(200, 200, 200, 600);
    line2.setStroke(Paint.valueOf("#00FF13"));
    line2.setStrokeWidth(10.0);
    line2.getStrokeDashArray().addAll(verticalSegment, verticalSegment);
    line2.setStrokeDashOffset(verticalSegment); // 偏移一个段长，错开显示

    // 水平段配置
    double horizontalSegment = 9.7;
    var line3 = new Line(250, 650, 650, 650);
    line3.setStroke(Paint.valueOf("#FF0000"));
    line3.setStrokeWidth(10.0);
    line3.getStrokeDashArray().addAll(horizontalSegment, horizontalSegment);

    var line4 = new Line(250, 650, 650, 650);
    line4.setStroke(Paint.valueOf("#00FF13"));
    line4.setStrokeWidth(10.0);
    line4.getStrokeDashArray().addAll(horizontalSegment, horizontalSegment);
    line4.setStrokeDashOffset(horizontalSegment); // 偏移一个段长

    var root = new Group(line, line2, line3, line4);
    anchorPane.getChildren().add(root);
}

这里把底层实线也改为虚线模式，通过偏移让两种颜色的分段完全交替，消除空白间隙。

方案二：动态生成小段线条（更适合绑定调整） #

如果需要随时调整分段尺寸或总长度，直接生成独立的小段线条更灵活，也能避免虚线偏移带来的计算问题：

public void initialize(URL url, ResourceBundle resourceBundle) {
    Group root = new Group();
    anchorPane.getChildren().add(root);
    double strokeWidth = 10.0;

    // 生成垂直十字段
    double verticalStartX = 200;
    double verticalStartY = 200;
    double verticalEndY = 600;
    double verticalSegment = 50.0;
    int verticalCount = (int) Math.floor((verticalEndY - verticalStartY) / verticalSegment);
    
    for (int i = 0; i < verticalCount; i++) {
        double y1 = verticalStartY + i * verticalSegment;
        double y2 = y1 + verticalSegment;
        Line segment = new Line(verticalStartX, y1, verticalStartX, y2);
        segment.setStrokeWidth(strokeWidth);
        segment.setStroke(i % 2 == 0 ? Paint.valueOf("#FF0000") : Paint.valueOf("#00FF13"));
        root.getChildren().add(segment);
    }

    // 生成水平十字段
    double horizontalStartX = 250;
    double horizontalStartY = 650;
    double horizontalEndX = 650;
    double horizontalSegment = 9.7;
    int horizontalCount = (int) Math.floor((horizontalEndX - horizontalStartX) / horizontalSegment);
    
    for (int i = 0; i < horizontalCount; i++) {
        double x1 = horizontalStartX + i * horizontalSegment;
        double x2 = x1 + horizontalSegment;
        Line segment = new Line(x1, horizontalStartY, x2, horizontalStartY);
        segment.setStrokeWidth(strokeWidth);
        segment.setStroke(i % 2 == 0 ? Paint.valueOf("#FF0000") : Paint.valueOf("#00FF13"));
        root.getChildren().add(segment);
    }

    // 若需绑定分段尺寸，可将段长设为DoubleProperty并监听变化重绘
    // 示例：
    // DoubleProperty verticalSegProp = new SimpleDoubleProperty(50.0);
    // verticalSegProp.addListener((obs, oldVal, newVal) -> {
    //     root.getChildren().clear();
    //     // 重新执行垂直段生成逻辑
    // });
}

这种方式可直接将段长、总长度等参数绑定到UI控件（如Slider），实现实时调整的效果。

注意事项 #

• 使用虚线方案时，需确保线条总长度是分段长度的整数倍，否则末端会出现不完整分段；
• 动态生成线段时，若总长度无法被段长整除，可选择忽略末端剩余部分，或单独处理最后一段的长度。

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