Ellipse-Zeichnung WPF-Animation

Question

Ich entwickle ein Steuerelement, das ein Rechteckbereich ist und eine Ellipse im Rechteckbereich zeichnet, wenn ein Trigger auftritt. Dieses Steuerelement kann andere Steuerelemente wie Textfelder, Schaltflächen usw. enthalten, sodass der Kreis um sie herum gezeichnet wird, wenn sie ausgelöst werden. Ich möchte, dass der Kreis als Animation gezeichnet wird, so wie Sie die inneren Steuerelemente mit einem Stift umkreisten.

Meine Frage ist, was der beste Weg ist, dies zu erreichen. Ich habe einige Nachforschungen angestellt und ich könnte WPF-Animation verwenden oder ich könnte GDI + verwenden, um die Aufgaben zu erledigen. Ich bin neu in der WPF-Animation, deshalb stelle ich die Frage.

Answer 1

WPF-Animation macht dies extrem einfach. Hier ist die grundlegende Technik:

1. Ellipse Create visuelle Erscheinung mit, was WPF Funktionen, die Sie mögen (Formen, Pfade, Geometries, Bürsten, Zeichnungen, Bilder, usw.). Dies kann eine einfache Ellipse oder eine ausgefallene Zeichnung sein, die von Ihrem Grafikdesigner erstellt wurde, oder irgendetwas dazwischen.

2. Wenden Sie eine OpacityMask an, die aus einer breiten elliptischen gestrichelten Linie mit einem einzelnen Null-Strich besteht. Da der Strich null ist, ist die gesamte Ellipse im benutzerdefinierten Stil unsichtbar.

3. Animieren Sie die Länge des Gedankenstrichs. Wenn es länger wird, werden Teile der Ellipse undurchsichtig (so wird es sichtbar sein), bis alles sichtbar ist. Standardmäßig wird Ihre Ellipse gleichmäßig von 0 bis 1 animiert, aber Sie können die Geschwindigkeit, mit der die Ellipse angezeigt wird, über die Animationsparameter steuern und variieren, zum Beispiel könnten Sie zuerst langsam und dann schneller starten.

Gesamtstruktur der Lösung

Hier ist die grundlegende Control Struktur:

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

Erstellen der Ellipse visuelle

WPF ist unglaublich reich Visuals zum Ausdruck, so Der Himmel ist die Grenze, wenn es darum geht, was Ihre Ellipse kann aussehen wie.

Zeichnen Sie Ihre Ellipse genau so, wie Sie möchten, indem Sie eine beliebige WPF-Zeichnungstechnik verwenden. Je nachdem, wie viel „künstlerischen Stil“ Sie von der Ellipse wollen Sie tun können, eine einfache (und langweilig) strich Ellipse oder etwas willkürlich Phantasie, wie zum Beispiel:

• Stroke einen Weg, der etwa eine Ellipse, aber nicht geschlossen und vielleicht ausgeflammt.
• Füllen Sie einen Pfad, der von einem Grafikdesigner erstellt wurde, der beginnt, als ob ein Pinsel es tun würde und vielleicht breiter wird, wenn Sie herumgehen und in einem Blob enden.
• Erstellen Sie eine Vektorzeichnung in Expression Design (oder Adobe Illustrator), konvertieren Sie sie in eine XAML-Zeichnung.
• ein Bitmap-Bild erstellen (beachten Sie, dass im Allgemeinen Bitmaps Nachteile Treue und Leistung im Vergleich zu Vektorzeichnungen haben)
• mehrere Formen auf einer Leinwand Zeichnen Sie eine letztlich einfache Ellipse Expression Blend

hier mit:

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

Animieren Ellipse

Auch hier gibt es eine große var Es gibt viele Möglichkeiten, wie Sie dies tun können, je nachdem, wie Ihre Animation aussehen soll. Für eine einfache 0-360 Animation Ihre Double kann so einfach sein wie:

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

Die Konstante 3,1416 leicht über pi ist, die den Umfang eines Kreises mit einem Durchmesser ist 1. Dies bedeutet, dass die Ellipse vollständig sichtbar ist nur am Ende der Animationsdauer.

Eine alternative Lösung

Stackoverflow Benutzer Simon Fox eine Antwort geschrieben hatte einen Link zu this article by Charles Petzold, aber seine Antwort verschwand ein paar Minuten später enthält. Ich nehme an, er hat es gelöscht. Der Petzold-Code zeigt eine einfachere Möglichkeit, dies mit PathGeometry und ArcSegment zu tun. Wenn alles, was Sie wollen, eine einfache Ellipse ohne Schnickschnack ist, ist das Modellieren Ihres Codes auf seinem Beispiel wahrscheinlich der Weg zu gehen.