2

嘿伙计们，我一直在玩 WPF 的路径形状，但我对一些行为有点恼火。具体来说，路径不会像我想要的那样自行调整大小。如果你看下面的图片，我想要的是整个路径都在白色方块内（代表路径控件的边界），但弧线有点悬空。我认为这是因为路径根据用于绘制形状的点来调整自身的大小，而不是根据实际绘制的形状。

我的问题是：有谁知道如何克服这个问题？我的意思是，除了明确设置路径的尺寸。是否有一些我忽略的选项，以便根据形状而不是根据用于制作形状的点来调整大小的路径？感谢您的任何回答。

我的数据绑定路径问题 我的迷你语言路径问题

这是（应该是）等效代码的两个版本：

1）首先，使用数据绑定（以非常冗长的方式写出来）：

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:OrbitTrapWpf"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="Root" Background="White">
<UserControl.Resources>
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/>
    <local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
<Path Name="path" Stroke="Black">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure IsClosed="True">
            <PathFigure.StartPoint>
              <Binding ElementName="Root" Path="point0"></Binding>
            </PathFigure.StartPoint>
            <PathFigure.Segments>
              <PathSegmentCollection>
                <ArcSegment SweepDirection="Counterclockwise" >
                  <ArcSegment.Size>
                    <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
                  </ArcSegment.Size>
                  <ArcSegment.Point>
                    <Binding ElementName="Root" Path="point1" />
                  </ArcSegment.Point>
                </ArcSegment>
                <LineSegment>
                  <LineSegment.Point>
                    <Binding ElementName="Root" Path="point2" />
                  </LineSegment.Point>
                </LineSegment>
                <ArcSegment SweepDirection="Counterclockwise">
                  <ArcSegment.Size>
                    <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
                  </ArcSegment.Size>
                  <ArcSegment.Point>
                    <Binding ElementName="Root" Path="point3" />
                  </ArcSegment.Point>
                </ArcSegment>
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

2）这个，使用迷你语言：

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:OrbitTrapWpf"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="Root" Background="White">
<UserControl.Resources>
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/>
    <local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
  <Grid Name="grid">
  <Path Name="path" Stroke="Black" Data="M 0.146446609406726,1.14644660940673 A 0.5,0.5 0 1 0 0.853553390593274,1.85355339059327 L 1.85355339059327,0.853553390593274 A 0.5,0.5 0 1 0 1.14644660940673,0.146446609406726 Z " />

我认为两者应该大致相同，但显然迷你语言版本的大小几乎正确，而原始版本则大不相同。

4

3 回答 3

3

基本上，您的路径 xaml 所说的是：

  1. 从 Point0 开始，向 Point1 画一条弧线。
  2. 从 Point1 到 Point2 画一条线。
  3. 从 Point2 到 Point 3 画一条弧线。
  4. 'IsClosed' 从 Point3 到 Point0 绘制另一条线。

在此处输入图像描述

您所定义的正是正在生成的内容 - 您可以更改它的唯一方法是更改​​您的位置 - 但圆弧仍将延伸到 X 轴上的 Point0 之外，因为这就是您所定义的。

如果您需要您的形状完全适合某个边界，您可以在您的形状周围放置一个边框，在底部和右侧的边距为 1/2 半径（我确信有一个精确突出的公式） .

由于第二个屏幕截图看起来与第一个不同，我会得出结论它们是不同的形状 - 这只能意味着路径数据被错误地转换。

于 2011-03-20T23:32:54.637 回答
3

好的，所以我发现了问题并解决了它。我IsLargeArc在迷你语言版本中设置了标志，而在纯 XAML 版本中我将其保留为False. 所以我把它改成了True，我神奇地得到了我期望的结果。

这对我来说似乎是一个错误，因为在这种情况下，大圆弧和小圆弧是相同的，因为我正在绘制半圆弧。如果有人知道这种行为的原因，那么听到它会很棒！

于 2011-03-21T02:26:27.510 回答
1

我遇到了这篇文章，并认为我会发布一个答案，以防有人正在寻找一种简单的方法来调整路径或图标的大小。我发现的最简单的方法是对我的所有路径显示使用 Viewbox。这是因为路径会在 Viewbox 内很好地缩放。我使用 Canvas 来保存每条路径，如果您希望能够使用“Nice”数字，则此 Canvas 的大小非常重要。

以下是如何执行此操作的示例：

首先（可选）在Inkscape或 CorelDraw等矢量程序中绘制您的形状！我使用 CorelDraw 创建了.svg 文件。注意：当使用程序创建矢量时，将页面大小设置为 100 X 100 像素，这就是您要设置的画布大小。如果您手动编写路径，这也是一种非常方便的方法，只需选择 100 X 100 之类的尺寸，并且您的所有路径测量值都小于 100，换句话说，使用它作为您的比例。

接下来使用Vector to Xaml Converter之类的翻译程序并生成路径。将其保存到资源字典中或将其放入您需要的文件中。将路径放在画布中，如下所示：

<Canvas x:Key="someName" Width="100" Height="100">
    <Path Fill="#FF000000" Stroke="#FF373435" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>

再次注意画布的大小，这应该与“绘图板”的尺寸相匹配。

然后要使用它，只需在 ViewBox 中放置一个 ContentControl ，该 ViewBox 具有您希望路径显示的宽度和高度，如下所示：

<Viewbox x:Name="btnClose" Width="30" Height="30">
    <ContentControl Content="{StaticResource someName}" />
</Viewbox>

就是这样！使用路径的另一个好处是您可以绑定背景（填充）或前景（描边）的颜色。以我们的例子为例，如何控制颜色：

<SolidColorBrush x:Key="stForeColor" Color="#FFD4D7EA" />

<Canvas x:Key="someName" Width="100" Height="100">
    <Path Fill="{StaticResource stForeColor}" Stroke="Transparent" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>

还有很多其他的事情你可以做，任何你可以用任何其他形状、效果、动画等做的事情。

于 2017-02-22T16:49:50.683 回答