2

I am using a GeometryGroup to draw a symbol in the center of a circle.

The example below shows one of my attempts while experimenting with this. It features three straight lines that depart from the same point of origin (32,32):

<Grid>
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,19 Z"/>
                <PathGeometry Figures="M 32,32 L 19,32 Z"/>
                <PathGeometry Figures="M 32,32 L 19,19 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

When this is rendered however the three lines do not have the same endpoint, although they do seem to cross each other at this center point of 32,32.

enter image description here

If I combine these same three lines into one figure:

<Grid>
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,19 M 32,32 L 19,32 M 32,32 L 19,19 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

the rendered result looks different, but also odd: the third (diagonal) line is crossing the origin, the other two are ending in the origin and the x and y-coordinates of 19 do not match.

enter image description here

Why is this happening and how can I fix this?

4

1 回答 1

2

观察到的渲染行为显然主要是由于该值的默认值，该Shape.StrokeMiterLimit值是 10，因此比StrokeThickness用于线条的值大 10 倍。

这会导致线条的渲染端点位置出现舍入和跳跃。

虽然我无法解释为什么这会导致我的第一个示例（3 条单独的几何图形线）与我的第二个示例（组合相同三条线的单个几何图形）的渲染结果如此不同。

不过，我通过使用以下方法解决了我的问题：

<Grid>
    <Path Stroke="Black" StrokeThickness="1" StrokeLineJoin="Round" StrokeMiterLimit="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,16 M 32,32 L 16,32 M 32,32 L 16,16 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

使用以下（正确）渲染结果：

在此处输入图像描述

在将 svg 转换为 xaml和相关问题中报告了具有类似解决方案的类似问题：在 wpf 中绘制来回路径时出现奇怪问题

于 2017-01-20T05:06:42.880 回答