椭圆绘制WPF动画

Question

我正在开发一个矩形区域的控件,并在触发发生时在矩形区域中绘制一个椭圆.此控件将能够托管其他控件,如文本框,按钮等,以便在触发时围绕它们绘制圆圈.我希望将圆圈绘制为动画,就像用钢笔圈住内部控件一样.

我的问题是什么是实现这一目标的最佳方式.我一直在做一些研究,我可以使用WPF动画,或者我可以使用GDI +来完成任务.我是WPF动画的新手,所以这就是我提出这个问题的原因.

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绘图技术完全按照您希望的方式绘制椭圆.根据您想要从椭圆中获得多少"艺术风格",您可以做一个简单(和无聊)描边椭圆或任何任意想象的任何东西,例如:

• 描绘一条大致呈椭圆形但未闭合的路径,可能会展开.
• 填充由图形设计师创建的路径,该路径就像画笔正在做的那样开始,并且当你四处走动并以blob结束时可能变得更宽.
• 在Expression Design(或Adobe Illustrator)中创建矢量绘图,将其转换为XAML绘图.
• 创建位图图像(请注意,与矢量绘图相比,通常位图具有保真度和性能劣势)
• 使用Expression Blend在Canvas上绘制多个Shapes

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

<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发布了一个答案,其中包含Charles Petzold撰​​写本文的链接,但几分钟后他的回答消失了.我猜他删除了它.Petzold代码使用PathGeometry和ArcSegment显示了一种更简单的方法.如果您想要的只是一个没有多余装饰的简单椭圆,那么在他的示例中对代码进行建模可能就是要走的路.