2011-03-20 136 views
2

嘿,大家好,我一直在玩WPF的Path形状,但我有点恼怒一些行为。 具体来说,路径并不像我想的那样大小。如果你看下面的图片,我想要的是整个路径在白色方块内(代表路径控制的边界),但弧线稍微偏离一点。我认为这是因为路径根据用于绘制形状的点而不是根据实际绘制的形状来确定其大小。WPF路径大小问题

我的问题是:有谁知道如何克服这个问题?我的意思是,除了明确设定路径的尺寸之外。是否有一些选项可以忽略,以便根据形状获得自己尺寸的路径,而不是根据用于制作形状的点?感谢任何答案。

My path problem with data bindingsMy path problem with mini-language


这里是(应该是什么),相当于码两种版本:

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 " /> 

我认为两者应该大致相同,但显然迷你版的尺寸几乎是正确的,而原来的差别很大。

回答

2

好的,所以我找到了问题并解决了它。我已经在迷你语言版本中设置了IsLargeArc标志,而在纯粹的XAML版本中,我将其留作False。所以我把它改成True,我神奇地得到了我预期的结果。

这对我来说似乎是一个错误,因为在这种情况下,大弧和小弧是同一个,因为我画的是半弧。如果有人知道这种行为的原因,听到它会是真棒!

3

基本上,你的路径XAML说的话,就是:

  1. 开始在Point0,划出一道弧线,以点1。
  2. 从Point1开始,画一条线到Point2。
  3. 从Point2向第3个点绘制一条圆弧。
  4. 'IsClosed'从Point3到Point0绘制另一条线。

enter image description here

你定义究竟是什么正在生产什么 - 你可以改变它的唯一方法是改变你的位置 - 但电弧仍然会超越Point0延长X轴,因为这是你已经定义了什么。

如果你需要你的形状完全适合某个边界,你可以在你的形状周围放置一个边界,边界为1/2半径(我确定有一个确切的突起公式)在底部和右侧。

由于第二张截图与第一张截图看起来不同,因此我会断定它们是不同的形状 - 这只能表示路径数据翻译不正确。

+0

这是什么做我也推断第一个样本。但是,当我使用迷你语言时,它的工作方式不同。在那种情况下,它确实是有限的(几乎)完美。 – 2011-03-20 23:37:09

+0

第二个例子的路径数据来自哪里? – 2011-03-20 23:39:12

+0

第一个示例从数据绑定中获取其数据,并且我手动检索了该数据并将其插入到第二个示例中的数据字符串中。 – 2011-03-20 23:41:33

1

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

这里是如何做到这样的例子:

首先(可选)绘制的形状在矢量程序像Inkscape或CorelDraw中!我使用CorelDraw创建了.svg File注意:当使用程序创建矢量时,使页面大小与100 X 100像素类似,这是您要将“画布大小”设置为的内容。如果您正在手动编写路径,这也是一个非常方便的方法,只需选取100 X 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> 

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

然后使用这个只是把ContentControl中所需的路径在像这样显示的宽度为一视框和高度的内部:

<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> 

还有吨的其他东西,你可以做,什么可以与任何其他形状,效果,动画等