如何在使用Flat LineCap时填充铁路模拟线条的缺失拐角

我之前做过类似的轨道可视化需求，完全懂你遇到的痛点——用Round端点会导致轨道接头出现冗余半径，换成Flat端点又补不上拐角，叠加渲染还会带来颜色重叠和末端露边的问题。这里有几个经过验证的可行方案，你可以参考试试：

方案一：用Path替代Line，借助LineJoin处理拐角 #

Line控件本质是单线段组件，没法处理连续轨道的拐角衔接，换成Path控件会更灵活。你可以把连续的轨道坐标序列转换成PathGeometry，通过设置LineJoin属性补全拐角，同时保持端点为Flat：

<Path Stroke="{Binding DataContext.LineColor, RelativeSource={RelativeSource AncestorType=ContentPresenter, AncestorLevel=2}}"
      StrokeThickness="2"
      StrokeLineCap="Flat"
      StrokeLineJoin="Round"> <!-- 用Round或Bevel都能顺滑补全拐角 -->
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="{Binding FirstTrackPoint, Converter={StaticResource ScaleCoordConverter}}">
                <LineSegment Point="{Binding SecondTrackPoint, Converter={StaticResource ScaleCoordConverter}}" />
                <LineSegment Point="{Binding ThirdTrackPoint, Converter={StaticResource ScaleCoordConverter}}" />
                <!-- 多段轨道可以通过绑定集合动态生成，比如结合ItemsControl遍历坐标列表生成LineSegment -->
            </PathFigure>
        </PathGeometry>
    </Path.Data>
    <Path.InputBindings>
        <MouseBinding Gesture="LeftClick" Command="{Binding DataContext.OccupyTrackCommand, RelativeSource={RelativeSource AncestorType=ContentPresenter, AncestorLevel=2}}"/>
    </Path.InputBindings>
</Path>

如果你的轨道是独立线段组成的（非连续路径），可以给相邻线段的交点处额外绘制一个小圆形（半径等于StrokeThickness的一半），颜色和轨道保持一致，这样既不会有Round端点的冗余，又能补上Flat端点的拐角缺口。

方案二：自定义TrackLine控件，手动补全拐角 #

如果必须保留Line控件的原有结构，可以自定义一个继承自Shape的TrackLine控件，在OnRender方法里先绘制Flat端点的线条，再手动在拐角位置补全图形：

public class TrackLine : Shape
{
    public static readonly DependencyProperty X1Property = Line.X1Property.AddOwner(typeof(TrackLine));
    public static readonly DependencyProperty Y1Property = Line.Y1Property.AddOwner(typeof(TrackLine));
    public static readonly DependencyProperty X2Property = Line.X2Property.AddOwner(typeof(TrackLine));
    public static readonly DependencyProperty Y2Property = Line.Y2Property.AddOwner(typeof(TrackLine));

    public double X1
    {
        get => (double)GetValue(X1Property);
        set => SetValue(X1Property, value);
    }

    // X2/Y1/Y2属性同理实现...

    protected override Geometry DefiningGeometry
    {
        get
        {
            var lineGeometry = new LineGeometry(new Point(X1, Y1), new Point(X2, Y2));
            var combinedGeometry = new GeometryGroup();
            combinedGeometry.Children.Add(lineGeometry);
            // 这里可以根据相邻线段的坐标计算拐角位置，添加EllipseGeometry补全
            return combinedGeometry;
        }
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);
        var pen = new Pen(Stroke, StrokeThickness);
        pen.StartLineCap = PenLineCap.Flat;
        pen.EndLineCap = PenLineCap.Flat;
        // 假设已通过逻辑获取到拐角点cornerPoint
        // drawingContext.DrawEllipse(Stroke, null, cornerPoint, StrokeThickness/2, StrokeThickness/2);
    }
}

使用时直接替换原来的Line控件，绑定相同的属性即可，这样能精准控制拐角和端点的显示，完全避免叠加带来的颜色问题。

方案三：优化叠加渲染细节（应急过渡方案） #

如果暂时不想调整整体结构，也可以通过参数优化缓解叠加问题：

• 底层Round线条的StrokeThickness设置为比上层Flat线条小0.5（比如底层1.5，上层2），让末端的Round部分不会突出
• 只在有拐角的线段上渲染底层Round线条，而非所有线段都叠加
• 给底层线条添加Clip，用RectangleGeometry裁剪掉末端多余的部分

不过这个方案仍存在边缘情况，优先推荐前两个方案。

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