我正在开发一个矩形区域的控件，当触发发生时，将在矩形区域中绘制一个椭圆形。该控件将能够承载其他控件，例如文本框、按钮等，因此在触发时将在它们周围绘制圆圈。我希望将圆圈绘制为动画，就像您用笔圈出内部控件一样。
实现这一目标的最佳方法是什么？
我一直在做一些研究，我可以使用 WPF 动画或者我可以使用 GDI+ 来完成任务。想法？
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.
What is 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. Thoughts?
发布评论
评论（1）
WPF 动画使这变得极其简单。以下是基本技术：
使用您喜欢的任何 WPF 功能（形状、路径、几何图形、画笔、绘图、图像等）创建椭圆的视觉外观。这可以是一个简单的椭圆，也可以是图形设计师创建的精美绘图，或者介于两者之间的任何内容。
应用由一条宽椭圆虚线和一条零长度虚线组成的 OpacityMask。由于短划线的长度为零，因此整个自定义样式的椭圆将不可见。
以动画方式显示破折号的长度。随着它变长，椭圆的部分将变得不透明（因此它是可见的），直到全部可见。默认情况下，您的椭圆会从 0 平滑地动画到 1，但您可以通过动画参数控制和改变椭圆出现的速率，例如，您可以先慢速开始，然后加速。
对
解决方案的总体结构
这是基本的 ControlTemplate 结构：
创建椭圆视觉效果
WPF 在表达视觉效果方面非常丰富，因此对于椭圆形来说，天空是无限的。可以看起来像。
使用任何 WPF 绘图技术按照您希望的显示方式准确绘制椭圆。根据您想要从椭圆中获得多少“艺术风格”，您可以做一个简单（且无聊）的描边椭圆或任何任意花哨的东西，例如：
这是一个最终简单的椭圆：
对椭圆进行动画处理
再次，有一个您可以通过多种方式来实现此目的，具体取决于您希望动画的外观。对于简单的 0 到 360 度动画，您的 DoubleAnimation 可以简单如下：
常数 3.1416 略高于 pi，即直径为 1 的圆的周长。这意味着椭圆在动画结束时将完全可见期间。
替代解决方案
StackOverflow 用户Simon Fox 发布了一个答案，其中包含指向Charles Petzold 的这篇文章，但他的答案消失了几分钟后。估计他删了Petzold 代码显示了使用 PathGeometry 和 ArcSegment 执行此操作的更简单方法。如果您想要的只是一个没有任何装饰的简单椭圆，那么根据他的示例对您的代码进行建模可能是正确的选择。
WPF animation makes this extremely easy. Here is the basic technique:
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.
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.
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.
Overall structure of solution
Here is the basic ControlTemplate structure:
Creating your ellipse visual
WPF is incredibly rich at expressing visuals, so the sky is the limit when it comes to what your ellipse can look like.
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:
Here is an ultimately simple ellipse:
Animating your ellipse
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:
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.
An alternative solution
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.