WPF中的填充弧答案

【问题标题】：Filled Arcs in WPFWPF中的填充弧
【发布时间】：2021-01-13 20:26:33
【问题描述】：

我正在尝试绘制类似这样的图形：

我需要为每个弧段设置一个独特的元素，我可以根据需要处理事件并重新着色。我有点不确定如何在 WPF 中创建正确的几何图形。我可以根据圆的半径和与中心的角度轻松计算每个弧段的四个点。外圆半径为 100，内圆半径为 50，红色的四个点是（从左上角顺时针，原点在圆的顶部）：

使用这些点，我创建了一个简单的路径来绘制线段：

<Path Stroke="Black" Fill="Black" StrokeThickness="1" >
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="0,0">
          <PathFigure.Segments>
            <ArcSegment Point="70,30" />
            <LineSegment Point="35,65" />
            <ArcSegment Point="0,50" />
          </PathFigure.Segments>
        </PathFigure>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

但这只是用直线绘制梯形。我知道我可以更改 ArcSegments 上的大小，但我似乎无法弄清楚这会如何影响曲率。我希望弧线跟随主圆，但我不知道如何表达。如何使圆弧具有正确的曲率？

另外，我如何在后面的c#代码中而不是在xaml中表达和添加路径？

【问题讨论】：

这是我正在开发的一款棋盘游戏。
Size 用作Size="XX,YY"，其中XX 是x 半径，YY 是弧的y 半径。对于完美的圆弧，您会希望它们相等。根据您提供的尺寸，内弧应该是50,50，外弧应该是100,100。

标签： c# wpf geometry

【解决方案1】：

我已经画出了这样的形状（两个同轴弧和两个连接它们的径向）：

new LineSegment(new Point(x2, y2), true),
new ArcSegment(new Point(x3,y3),new Size(100*outerRadius,100*outerRadius), 0,largeAngle, SweepDirection.Clockwise, true),
new LineSegment(new Point(x4, y4), true),
new ArcSegment(new Point(x1, y1),new Size(100*innerRadius,100*innerRadius), 0,largeAngle, SweepDirection.Counterclockwise, true),

显然这是代码而不是 XAML，但它可能会给你一个启动。

【讨论】：

完美，Size 只需为圆的大小即可。他们在这方面的文档并不像实际上那么简单。我只需要小心获得正确的 SweepDirection 并且效果很好。
@captncraig 您能否发布更新后的 XAML，以便其他人可以看到您接受的解决方案？
@Pete，如果我没记错的话，我实际上最终将它编码在后面的代码中。这对我的特定用例更有意义。
这对我很有用，但我确实必须将第一条线段向下移动到底部，最后添加到 PathSegmentCollection 以便它显示为一个中风，所以我可以有我的轮廓轮廓。我不知道为什么，但它有效，所以我很好。

【解决方案2】：

XAML 代码

<Window x:Class="PopupTargetElement.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"         
        mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">        
    <Grid>
        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="300"
                Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="300"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="220"
            Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="220"/>
        
        <Ellipse   Width="140"  Height="140" Fill="Black" Stroke="Black" StrokeThickness="1" />

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="45" Fill="Black" HorizontalAlignment="Center" Height="300" 
            Stretch="None" Stroke="Black" StartAngle="0" VerticalAlignment="Center" Width="300"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="135" Fill="Black" HorizontalAlignment="Center" Height="300"
            Stretch="None" Stroke="Black" StartAngle="90" VerticalAlignment="Center" Width="300"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel"  EndAngle="225" Fill="Black" HorizontalAlignment="Center" Height="300" 
            Stretch="None" Stroke="Black" StartAngle="180" VerticalAlignment="Center" Width="300"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel"  EndAngle="315" Fill="Black" HorizontalAlignment="Center" Height="300"
            Stretch="None" Stroke="Black" StartAngle="270" VerticalAlignment="Center" Width="300"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="90" Fill="Black" HorizontalAlignment="Center" Height="220" 
            Stretch="None" Stroke="Black" StartAngle="45" VerticalAlignment="Center" Width="220"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="180" Fill="Black" HorizontalAlignment="Center" Height="220" 
                Stretch="None" Stroke="Black" StartAngle="135" VerticalAlignment="Center" Width="220"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="270" Fill="Black" HorizontalAlignment="Center" Height="220"
            Stretch="None" Stroke="Black" StartAngle="225" VerticalAlignment="Center" Width="220"/>

        <ed:Arc ArcThickness="40" ArcThicknessUnit="Pixel" EndAngle="360" Fill="Black" HorizontalAlignment="Center" Height="220"
            Stretch="None" Stroke="Black" StartAngle="315" VerticalAlignment="Center" Width="220"/>
    </Grid>
</Window>

在您的项目中添加程序集引用。 Microsoft.Expression.Drawing

对于 xmlns:ed=http://schemas.microsoft.com/expression/2010/drawing

输出

【讨论】：

【解决方案3】：

另一种选择是将表达式 2010 绘图命名空间拉入 XAML。这样就很容易了。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="Arcs.MainWindow"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <ed:Arc ArcThickness="30"
            ArcThicknessUnit="Pixel"
            StartAngle="30"
            EndAngle="130"
            HorizontalAlignment="Left"
            Height="179" Margin="195,62,0,0"
            Stretch="None"
            Stroke="CornflowerBlue"
            Fill ="CornflowerBlue"
            VerticalAlignment="Top"
            Width="179" />
</Grid>

编辑：这将引入安装 Blend 时安装的“Microsoft.Expression.Drawing”。如果客户端机器没有这个，那么这将失败。另一方面，您可以使用您的软件打包和重新分发 dll。微软允许这样做。

【讨论】：