时间戳

首页 > 解决方案 > 如何在 ResourceDictionary 的 CombinedGeometry-tag 中使用从 InkScape 导出的 Xaml 多边形

c# - 如何在 ResourceDictionary 的 CombinedGeometry-tag 中使用从 InkScape 导出的 Xaml 多边形

问题描述

在我们的项目中，我们使用 ResourceDictionary 来定义应用程序中的所有图标。它们主要通过以下方式定义：

<PathGeometry
    x:Key="BellIconSm"
    presentationOptions:Freeze="True"
    Figures="m 20.941 16.048 c 0 0 -0.005 -0.008 -0.006 -0.012 l -0.352 -0.391 0"
    FillRule="NonZero" />

但有时我们使用<CombinedGeometry>来组合 2 个或更多形状。

大多数情况下，我将图标作为 .svg 文件获取，然后在 InkScape 中打开该文件，然后将其另存为 Xaml 格式。通常，从 InkScape 导出的 Xaml 文件可能如下所示（截断，即仅包含开头部分）：

<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
  <Canvas Name="Layer_2_1_" Canvas.Left="0" Canvas.Top="0" Width="71.6" Height="98">
    <Canvas.RenderTransform>
      <TranslateTransform X="0" Y="0"/>
    </Canvas.RenderTransform>
    <Canvas.Resources/>
    <!--Unknown tag: metadata-->
    <!--Unknown tag: sodipodi:namedview-->
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path13" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M0.4 50c1.6 1.3 2.7 3.2-0.6c0.5-1.1-1.8-4.8 2.7-6.9c4.5-2.1 9.5 3 9.5 3s3.5-9 11.1-9.1  c8.2-0.1 12.1 7.2 12.1 7.2s6.5-5.8 11.7-2.6c4.6 2.8 2.1 8 3 9.2c0.8 1.2 2.8 0.9 3.4 0c0.5-0.9 1.3-10.8-3.5-14  c-6.4-4.3-13.4 1.5-13.4 1.5s-2.9-6.3-11.8-6.5c-8.8-0.2-13.1 6.4-13.1 6.4S10 34.8 4.2 37.8C-1.6 40.8-1.2 48.8 0.4 50z" FillRule="NonZero"/>
      </Path.Data>
    </Path>
.
.
.
  </Canvas>
</Viewbox>

..我只是将<PathGeometry Figures="...>InkScape 导出的 Xaml 中的部分复制到我的<PathGeometry>或<CombinedGeometry>我的 ResourceDictionary 中，一切正常。

现在第一次，在 InkScape 导出的 Xaml 文件中包含 2 行带有<Polygon>标记的文件，如下所示（截断，仅包含最后一部分）：

.
.
.
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path21" Fill="#000000">
      <Path.Data>
        <PathGeometry Figures="M53.4 15" FillRule="NonZero"/>
      </Path.Data>
    </Path>
    <Polygon xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Points="60.1,16.9 62.6,26.1 71.6,27.8 62.8,30.1 60.5,40.2 57.8,30.1 49,28.4 57.8,26.5 " Name="polygon23" FillRule="NonZero" Fill="#000000"/>
    <Polygon xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Points="40.7,0 44.5,13.9 58,16.4 44.8,19.8 41.4,35 37.3,19.8 24,17.3 37.3,14.5 " Name="polygon25" FillRule="NonZero" Fill="#000000"/>
  </Canvas>
</Viewbox>

我的问题是如何将它们包含在<CombinedGeometry>ResourceDictionary 的标签中？据我所知，我不能<Polygon>直接使用标签，所以我最好的办法是按照以下方式进行（截断，只包括最后一部分：

<CombinedGeometry.Geometry2>
    <CombinedGeometry GeometryCombineMode="Union">
        <CombinedGeometry.Geometry1>
            <PathGeometry Figures="M53.4 15" FillRule="NonZero" />
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
            <CombinedGeometry GeometryCombineMode="Union">
                <CombinedGeometry.Geometry1>
                    <PathGeometry FillRule="Nonzero">
                        <PathFigure>
                            <PolyLineSegment Points="40.7,0 44.5,13.9 58,16.4 44.8,19.8 41.4,35 37.3,19.8 24,17.3 37.3,14.5 " />
                        </PathFigure>
                    </PathGeometry>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <PathGeometry FillRule="Nonzero">
                        <PathFigure>
                            <PolyLineSegment Points="60.1,16.9 62.6,26.1 71.6,27.8 62.8,30.1 60.5,40.2 57.8,30.1 49,28.4 57.8,26.5 " />
                        </PathFigure>
                    </PathGeometry>
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </CombinedGeometry.Geometry2>
    </CombinedGeometry>
</CombinedGeometry.Geometry2>

但是在运行应用程序时，图标的一部分没有正确的形状，所以显然缺少一些东西。该图标应如下所示：

正确的图标

但在应用程序中结果如下：

不正确的图标

所以很明显<Polygon>/<PolyLineSegment>标签是错误的，或者缺少部分。这里可能有什么问题？

谢谢，彼得

标签： c#wpfxaml

解决方案

设置StartPointPathFigures 的属性并通过设置关闭它们IsClosed="True"：

<CombinedGeometry.Geometry1>
    <PathGeometry FillRule="Nonzero">
        <PathFigure StartPoint="40.7,0" IsClosed="True">
            <PolyLineSegment Points="44.5,13.9 58,16.4 44.8,19.8 41.4,35 37.3,19.8 24,17.3 37.3,14.5"/>
        </PathFigure>
    </PathGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
    <PathGeometry FillRule="Nonzero">
        <PathFigure StartPoint="60.1,16.9" IsClosed="True">
            <PolyLineSegment Points="62.6,26.1 71.6,27.8 62.8,30.1 60.5,40.2 57.8,30.1 49,28.4 57.8,26.5"/>
        </PathFigure>
    </PathGeometry>
</CombinedGeometry.Geometry2>

推荐阅读