如何使 WPF GeometryGroup 中的路径正确对齐?
How can I get paths in a WPF GeometryGroup correctly aligned?
我正在使用 GeometryGroup
在圆心画一个符号。
下面的示例显示了我对此进行试验时的尝试之一。它具有从同一原点 (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>
渲染时这三条线没有相同的端点,尽管它们似乎在这个中心点 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 M 32,32 L 19,32 M 32,32 L 19,19 Z"/>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
渲染结果看起来不同,但也很奇怪:第三条(对角线)线穿过原点,另外两条线结束于原点,19 的 x 和 y 坐标不匹配。
为什么会发生这种情况,我该如何解决?
观察到的渲染行为显然主要是由于用于线条的 Shape.StrokeMiterLimit
value, which is 10 and thus 10 times larger than the StrokeThickness
默认值。
这会导致线条的渲染端点位置出现舍入和跳跃。
虽然我无法解释为什么这会导致我的第一个示例(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>
具有以下(正确)渲染结果:
针对 converting svg to xaml and in a related question:
报告了具有类似解决方案的类似问题
我正在使用 GeometryGroup
在圆心画一个符号。
下面的示例显示了我对此进行试验时的尝试之一。它具有从同一原点 (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>
渲染时这三条线没有相同的端点,尽管它们似乎在这个中心点 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 M 32,32 L 19,32 M 32,32 L 19,19 Z"/>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
渲染结果看起来不同,但也很奇怪:第三条(对角线)线穿过原点,另外两条线结束于原点,19 的 x 和 y 坐标不匹配。
为什么会发生这种情况,我该如何解决?
观察到的渲染行为显然主要是由于用于线条的 Shape.StrokeMiterLimit
value, which is 10 and thus 10 times larger than the StrokeThickness
默认值。
这会导致线条的渲染端点位置出现舍入和跳跃。
虽然我无法解释为什么这会导致我的第一个示例(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>
具有以下(正确)渲染结果:
针对 converting svg to xaml and in a related question: