椭圆绘图 WPF 动画

Question

我正在开发一个矩形区域的控件，当触发发生时，它将在矩形区域中绘制一个椭圆。该控件将能够承载其他控件，例如文本框、按钮等，因此在触发时将围绕它们绘制圆圈。我希望将圆圈绘制为动画，就像您用笔在内部控件上画圈一样。

最好的方法是什么？

我一直在做一些研究，我可以使用 WPF 动画或者我可以使用 GDI+ 来完成任务。想法？

Answer 1

WPF 动画使这变得非常简单。这是基本技术：

1. 使用您喜欢的任何 WPF 功能（形状、路径、几何、画笔、绘图、图像等）创建椭圆的视觉外观。这可以是一个简单的椭圆或由您的图形设计师创建的精美绘图，或介于两者之间的任何东西。

2. 应用由一条宽椭圆虚线和一条零长度虚线组成的 OpacityMask。由于破折号的长度为零，整个自定义样式的椭圆将不可见。

3. 为破折号的长度设置动画。随着它变得更长，椭圆的部分将变得不透明（因此它将是可见的），直到它全部可见。默认情况下，您的椭圆会从 0 到 1 平滑地动画，但您可以通过动画参数控制和改变椭圆出现的速率，例如，您可以先开始缓慢然后加速。

解决方案的整体结构

这是基本的 ControlTemplate 结构：

<ControlTemplate TargetType="MyCustomControl">
  <Grid>

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}">
      <Rectangle.OpacityMask>
        <VisualBrush>
          <VisualBrush.Visual>
            <Ellipse
              x:Name="opacityEllipse"
              StrokeDashArray="0 10"
              Stroke="Black" StrokeThickness="0.5"
              Width="1" Height"1" />
          </VisualBrush.Visual>
        </VisualBrush>
      </Rectangle.OpacityMask>
    </Rectangle>

    <ContentPresenter />   <!-- This presents the actual content -->

  </Grid>
</ControlTemplate>

创建椭圆视觉效果

WPF 在表达视觉效果方面非常丰富，因此对于椭圆的外观而言，天空是极限。

使用任何 WPF 绘图技术完全按照您希望的方式绘制椭圆。根据您想要从椭圆中获得多少“艺术风格”，您可以制作一个简单（且无聊）的描边椭圆或任意花哨的东西，例如：

• 绘制一条大致呈椭圆形但未闭合且可能向外展开的路径。
• 填充由平面设计师创建的路径，该路径开始时好像画笔正在做的一样，随着您四处走动可能会变得更宽，并以斑点结束。
• 在 Expression Design（或 Adob​​e Illustrator）中创建矢量绘图，将其转换为 XAML 绘图。
• 创建位图图像（请注意，与矢量图相比，位图通常具有保真度和性能劣势）
• 使用 Expression Blend 在画布上绘制多个形状

这是一个最终简单的椭圆：

<VisualBrush x:Key="EllipseVisualAppearance">
  <VisualBrush.Visual>
    <Ellipse StrokeThickness="0.1" Stroke="Blue" />
  </VisualBrush.Visual>
</VisualBrush>

为你的椭圆设置动画

同样，您可以通过多种方式执行此操作，具体取决于您希望动画的外观。对于简单的 0 到 360 度动画，您的 DoubleAnimation 可以很简单：

 <DoubleAnimation
   StoryBoard.TargetName="opacityEllipse"
   StoryBoard.TargetProperty="StrokeDashArray[0]"
   From="0" To="3.1416" Duration="0:0:0.5" />

常数 3.1416 略高于 pi，即直径为 1 的圆的周长。这意味着椭圆将在动画持续时间结束时完全可见。

另一种解决方案

StackOverflow 用户Simon Fox 发布了一个包含this article by Charles Petzold 链接的答案，但几分钟后他的答案消失了。估计他删了Petzold 代码显示了使用 PathGeometry 和 ArcSegment 执行此操作的更简单方法。如果您想要的只是一个没有多余装饰的简单椭圆，那么在他的示例上建模您的代码可能是可行的方法。