Elipse Dibujo Animación WPF

Question

Estoy desarrollando un control que es un área rectangular y dibujaré una elipse en el área rectangular cuando se produzca un disparador. Este control podrá alojar otros controles como botones de texto, botones, etc. para que el círculo se dibuje alrededor de ellos cuando se active. Quiero que dibujen el círculo como una animación como si estuvieras circulando los controles internos con un bolígrafo.

Mi pregunta es ¿cuál es la mejor manera de lograr esto. He estado investigando y podría usar animación WPF o podría usar GDI + para realizar las tareas. Soy nuevo en la animación de WPF, por eso hago la pregunta.

Answer 1

La animación WPF hace que esto sea extremadamente fácil. Aquí es la técnica básica:

1. Crear aspecto visual de su elipse usando cualquier funcionalidad WPF te gusta (formas, caminos, geometrías, cepillos, dibujos, imágenes, etc.). Esto puede ser una elipse simple o un dibujo elegante creado por su diseñador gráfico, o cualquier cosa intermedia.

2. Aplica una OpacityMask que consiste en una línea discontinua ancha elíptica con un solo guión de longitud cero. Como el tablero es de longitud cero, toda la elipse de estilo personalizado será invisible.

3. Animar la longitud del tablero. A medida que se alargue, las partes de la elipse se volverán opacas (para que sean visibles) hasta que todo esté visible. Por defecto, su elipse se animará sin problemas de 0 a 1, pero puede controlar y variar la velocidad a la que aparece la elipse a través de los parámetros de animación, por ejemplo, puede comenzar lento al principio y luego acelerar.

Estructura general de la solución

Aquí está la estructura ControlTemplate básica:

<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> 

Creación de su elipse visual

WPF es increíblemente rico en expresión de efectos visuales, por lo el cielo es el límite cuando se trata de lo que puede hacer tu elipse parece.

Dibuja tu elipse exactamente como quieres que aparezca con cualquier técnica de dibujo WPF. Dependiendo de la cantidad de "estilo artístico" que quiere de la elipse se puede hacer un simple (y aburrido) acariciado elipse o cualquier forma arbitraria de lujo, tales como:

• contornear un trazado que aproximadamente una elipse, pero no cerradas y quizás reventado.
• Llene un camino creado por un diseñador gráfico que comience como si lo estuviera haciendo un pincel y tal vez se ensancha a medida que avanza y termina en un blob.
• Cree un dibujo vectorial en Expression Design (o Adobe Illustrator), conviértalo en un dibujo XAML.
• crear una imagen de mapa de bits (nótese que en los mapas de bits generales tienen fidelidad y rendimiento desventajas en comparación con dibujos vectoriales)
• dibujar varias formas en un lienzo utilizando Expression Blend

Aquí está una elipse en última instancia sencilla:

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

la animación de su elipse

una vez más hay una gran var Depende de la forma en que puede hacer esto, dependiendo de cómo quiera que se vea su animación. Para un simple 0 a 360 animación su DoubleAnimation puede ser tan simple como:

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

La constante de 3,1416 es un poco más de pi, que es la circunferencia de un círculo de diámetro 1. Esto significa que la elipse será totalmente visible justo al final de la duración de la animación.

Una solución alternativa

Stackoverflow usuario Simon Fox había publicado una respuesta que contiene un enlace a this article by Charles Petzold, pero su respuesta desaparecido unos minutos más tarde. Supongo que lo eliminó. El código de Petzold muestra una forma más sencilla de hacerlo mediante PathGeometry y ArcSegment. Si lo único que quieres es una elipse simple sin adornos, modelar tu código en su ejemplo es probablemente el camino a seguir.