椭圆绘制WPF动画 [英] Ellipse Drawing WPF Animation

问题描述

我正在开发一个控件是一个矩形区域，并触发时将绘制一个椭圆的矩形区域。这种控制就可以承载其他控件，如，文本框的，按钮等，所以圆将他们周围绘制时触发。我想圆被画成就像你用钢笔盘旋内部控制的动画。

I am developing a control that is a rectangle area and will draw an ellipse in the rectangle area when a trigger occurs. This control will be able to host other controls like, textbox's, buttons, etc. so the circle will be drawn around them when triggered. I want the circle being drawn as an animation like you were circling the inner controls with a pen.

我的问题是什么最好的办法做到这一点。我一直在做一些研究，我可以使用WPF动画我也可以使用GDI +完成的任务。我是新来的WPF动画所以这就是为什么我要问的问题。

My question is whats the best way to accomplish this. I've been doing some research and I could use WPF animation or I could use GDI+ to accomplish the tasks. I am new to WPF animation so that is why I am asking the question.

推荐答案

WPF动画使这个非常容易。这里是基本技术：

WPF animation makes this extremely easy. Here is the basic technique:

1. 创建使用你喜欢的（形状，路径，几何，画笔，绘图，图像等），无论WPF功能的椭圆形的外观。这可以是一个简单的椭圆形或图形设计师创造了一个奇特的图纸，或者两者之间的任何东西。

1. Create your ellipse's visual appearance using whatever WPF functionality you like (Shapes, Paths, Geometries, Brushes, Drawings, Images, etc). This can be a simple ellipse or a fancy drawing created by your graphics designer, or anything in between.

应用的OpacityMask由宽椭圆形虚线用一个零长度冲刺。由于仪表板的长度为零，整个定制风格的椭圆将是不可见的。

Apply an OpacityMask consisting of a wide elliptical dashed line with a single zero-length dash. Since the dash is zero-length the entire custom-styled ellipse will be invisible.

动画划线长度。因为它得到椭圆的较长的部分变成不透明（因此这将是可见的），直到它是所有可见。默认情况下你的椭圆将顺利动画从0到1，但你可以控制和改变通过动画参数的椭圆显示的价格，例如，你可以开始先慢再加速。

Animate the length of the dash. As it gets longer parts of the ellipse will become opaque (so it will be visible) until it is all visible. By default your ellipse will animate smoothly from 0 to 1 but you can control and vary the rate the ellipse appears via the animation parameters, for example you could start slow at first then speed up.

解决方案整体结构

下面是基本的ControlTemplate结构：

Here is the basic ControlTemplate structure:

<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是令人难以置信的丰富的EX pressing的视觉效果，所以天空才是极限，当涉及到你的椭圆可以是什么样子。

WPF is incredibly rich at expressing visuals, so the sky is the limit when it comes to what your ellipse can look like.

你的画椭圆正是你想要它出现使用任何WPF绘图技术的方式。根据你多少艺术风格想从你那里可以做椭圆的简单（无聊）抚摸椭圆形或任何擅自花哨，如：

Draw your ellipse exactly the way you want it to appear using any WPF drawing technique. Depending on how much "artistic style" you want from the ellipse you can do a simple (and boring) stroked ellipse or anything arbitrarily fancy, such as:

• 描边，大约一个椭圆，但不是封闭的，也许路径爆发出来。
• 在填补一个平面设计师启动，就好像画笔在做它，可能变宽，你去走一走，结束于一个blob创建的路径。
• 创建防爆pression设计（或Adobe Illustrator中）一个矢量绘图，将其转换为XAML绘图。
• 创建一个位图图像（注意，通常有位图相比，矢量图形逼真度和性能的缺点）
• 在使用绘制多个形状在画布前pression混合

下面是一个简单的最终椭圆：

Here is an ultimately simple ellipse:

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

动画您椭圆

再有一个巨大的各种方法可以做到这一点，这取决于你希望你的动画看看。对于一个简单的0到360的动画你DoubleAnimation是可以很简单，如：

Again there are a huge variety of ways you can do this, depending on how you want your animation to look. For a simple 0 to 360 animation your DoubleAnimation can be as simple as:

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

常数3.1416略高于圆周率，这是直径1的一个圆的圆周上这意味着该椭圆将完全可见只是在动画的持续时间的结束。

The constant 3.1416 is slightly over pi, which is the circumference of a circle of diameter 1. This means that the ellipse will be fully visible just at the end of the animation duration.

另一种解决方案

StackOverflow的用户西蒙·福克斯已发布包含链接的本文由Charles Petzold的，但他的答案消失了几分钟后。我猜他删除了它。该彼佐尔德code显示了一个简单的方法来做到这一点使用的PathGeometry和ArcSegment。如果你想要的是一个简单的椭圆形，没有多余的装饰，在他的榜样建模您code可能是要走的路。

StackOverflow user Simon Fox had posted an answer containing a link to this article by Charles Petzold, but his answer disappeared a few minutes later. I guess he deleted it. The Petzold code shows a simpler way to do this using PathGeometry and ArcSegment. If all you want is a simple ellipse with no frills, modeling your code on his example is probably the way to go.

这篇关于椭圆绘制WPF动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！