wpf路径数据差异

Question

所以我试图创建一个由多个形状组成的矢量路径。期望的目标是......

但是我已经看到了以多种方式编写的路径的数据。一种方式就是这样..

M10,0L20,10 0,10z

同样的道路可以写成这样......

M10.2042655289777,2.10534975661348L20.2042655289777,12.1053497566135 0.204265528977683,12.1053497566135z

上面的两个片段都会形成这种形状。

根据我自己的分析，我发现第一段代码是可缩放的，并且适合放置它的按钮的内容。其中第二种方法似乎是路径点的更精确坐标。有没有什么方法可以创建一个精确坐标的路径，然后将其转换为更通用的路径，如 M10,0L20,10 0,10z 。或者，如果有什么我可以创建我想要的形状，同时保持其可扩展性。

这是我的路径数据......

<Path Fill="Blue" Data="M16.5,4.50000035762787L25.5,4.50000035762787 25.5,17.5000002384186 16.5,17.5000002384186z M2.5,4.49999994039536L11.5,4.49999994039536 11.5,25.5000002384186 2.5,25.5000002384186z M0.5,0.5L27.5,0.5 27.5,1.50000023841858 0.5,1.50000023841858z"></Path>

我想我总是可以使用Stretch="Uniform"

Answer 1

如果您希望形状全部为一种颜色，则可以使用一个路径对象来定义它。

<Grid Width="250" Height="250">
    <Border BorderBrush="Black" BorderThickness="1">
        <Path Margin="4" 
              Fill="Red" 
              Stretch="Uniform" 
              VerticalAlignment="Top" 
              Data="M 0,0 L 100,0 L 100,15 L 0,15 z 
                    M 5,20 L 40,20 L 40,100 L 5,100 z 
                    M 60,20 L 95,20 L 95,70 L 60,70 z" />
    </Border>
</Grid>

请注意，由于拉伸设置为统一，因此路径的显示大小受父容器约束。 path元素中使用的坐标只是相对值。更改网格的大小将缩小路径绘图，使边界保持4像素边距。

如果你想用多种颜色绘制形状，那么它会变得稍微复杂一些。您可以使用多个路径对象，但为了正确定位它们，必须通过使用一对移动值将它们强制转换到相同的坐标系中，以定义每个数据开头的总体大小（仍以相对单位）字符串。

<Grid Width="250" Height="250">
    <Border BorderBrush="Black" BorderThickness="1">
        <Grid>
            <Path Margin="4" Fill="Red" Stretch="Uniform" 
                  Data="M 100,100 M 0,0 L 100,0 L 100,15 L 0,15 z" />

            <Path Margin="4" Fill="Blue" Stretch="Uniform" 
                  Data="M 0,0 M 100,100 M 5,20 L 40,20 L 40,100 L 5,100 z" />

            <Path Margin="4" Fill="Green" Stretch="Uniform" 
                  Data="M 0,0 M 100,100 M 60,20 L 95,20 L 95,70 L 60,70 z" />
        </Grid>
    </Border>  
</Grid>

第二个网格是必需的，因为边框只能有一个孩子。