.net - 椭圆绘图 WPF 动画

Question

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

实现这一目标的最佳方法是什么？

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

Answer 1

WPF 动画使这非常容易。这是基本技术:

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

应用由宽椭圆虚线和单个零长度短划线组成的 OpacityMask。由于破折号的长度为零，因此整个自定义样式的椭圆将不可见。

动画短划线的长度。随着椭圆的变长，椭圆的一部分将变得不透明(因此它将是可见的)，直到它全部可见。默认情况下，您的椭圆将在 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(或 Adob​​e Illustrator)中创建矢量绘图，将其转换为 XAML 绘图。

创建位图图像(请注意，与矢量图相比，通常位图在保真度和性能方面存在缺陷)

使用 Expression Blend 在 Canvas 上绘制多个形状

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

<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 执行此操作的更简单方法。如果你想要的只是一个简单的椭圆，没有多余的装饰，那么在他的例子上对你的代码进行建模可能是要走的路。