Question

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

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

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

另一种解决方案

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

椭圆绘制WPF动画

1 个答案: