椭圆图形WPF动画

Question

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

完成此操作的最佳方法是什么？

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

Answer 1

WPF动画使这一过程非常容易。这是基本技术：

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

2. 应用不透明蒙版，该不透明蒙版由一条宽椭圆形虚线和一个零长度破折号组成。由于破折号为零长度，因此整个自定义样式的椭圆都是不可见的。

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（或Adobe 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上略微超过pi，这是直径1的圆的周长。这意味着椭圆将在动画持续时间结束时完全可见。

一种替代解决方案

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