Animierte Objekte (Canvas) dynamisch per Linie verbinden

Question

Hallo zusammen,

gibt es eine Möglichkeit 2 animierte Objekte mit einer Linie dynamisch zu verbinden. Jedes Objekt wird durch sein eigenes Storyboard endlos auf der Bühne bewegt. Zur Laufzeit dieser Storyboards soll die Linie jedes Mal neu gezeichnet werden bzw. den Objekten folgen.

Für eine schnell Antwort wäre ich sehr dankbar.

Gruss

Answer 1

Hi Stephy,

ich hab's mir bislang noch nicht genauer angeschaut, aber Sacha Barber und Fredrik Bornander haben mal einen Artikel auf CodeProject gepostet, der IIRC u.a. genau das macht. Im Artikel ist auch ein Video hinterlegt, aber leider ist der Link dahinter tot (und mir fehlt jetzt die die Zeit, die Beispiel-Solution herunterzuladen und auszuprobieren), daher probier's bitte selbst mal. :-)

---

Cheers,
Olaf
http://blogs.intuidev.com

Answer 2

Hallo S.,

ich denke, es sollte auch einfacher gehen. Zum Beispiel eine DoubleAnimation:

<Window x:Class="DeinNamespace.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="MainWindow" Height="326" Width="710">
 <Canvas Name="cvs">
 <Canvas.Resources>
 <Storyboard x:Key="myStoryboard">
 <DoubleAnimationUsingKeyFrames
  Storyboard.TargetName="MyAnimatedTranslateTransform"
  Storyboard.TargetProperty="X" Duration="0:0:10">
  <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
  <SplineDoubleKeyFrame 
  KeySpline="0.6,0.0 0.9,0.00" 
  Value="0" KeyTime="0:0:6" />
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>

 <Storyboard x:Key="myLineStoryboard">
 <DoubleAnimationUsingKeyFrames
  Storyboard.TargetName="linie"
  Storyboard.TargetProperty="X1" Duration="0:0:10">
  <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
  <SplineDoubleKeyFrame 
  KeySpline="0.6,0.0 0.9,0.00" 
  Value="0" KeyTime="0:0:6" />
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 </Canvas.Resources>

 <Rectangle 
 MouseLeftButtonDown="Mouse_Clicked" Fill="Blue"
 Width="50" Height="50" Canvas.Left="0" Canvas.Top="40">
 <Rectangle.RenderTransform >
 <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" />
 </Rectangle.RenderTransform>
 </Rectangle>
 <TextBlock 
 Text="aufs Rechteck klicken"
 Canvas.Left="35" Canvas.Top="20" />
 <Ellipse 
 Canvas.Left="315" Canvas.Top="231" Height="25" 
 Name="ellipse1" Stroke="Black" Width="29" />
 <Line 
 Name="linie" StrokeThickness="5" Stroke="DarkBlue"
 RenderTransformOrigin="0.5,0.5" X1="0" X2="330" Y1="60" Y2="240">
 <!--<Line.RenderTransform >
 <TranslateTransform x:Name="LinienTranslateTransform" X="0"/>
 </Line.RenderTransform>-->
 </Line>
 </Canvas>
</Window>

_______________
Aufruf dann etwa:

    // When the user clicks the Rectangle, the animation begins.
    private void Mouse_Clicked(object sender, MouseEventArgs e)
    {
      (cvs.FindResource("myStoryboard") as Storyboard).Begin();
      (cvs.FindResource("myLineStoryboard") as Storyboard).Begin();
    }

---

ciao Frank

Answer 3

Huhu!

@Frank - Du hast natürlich Recht - hatte gar nicht mehr im Kopf, was das für eine Monsteranwendung ist; das Physics-Geraffel dort ist hier sicherlich absolut überflüssig.

Ich habe auch mal was zusammengebastelt. In meiner Version braucht's nur jew. ein Storyboard für die Zielobjekte (Rectangle/Ellipse) - die Linie ist einfach an deren akt. Position (resp. den auf sie angewendeten TranslateTransform) gebunden. Das gefällt mir besser, weil sich das hierdurch auf beliebige Objekte anwenden lässt, ohne Rücksicht auf die Art und Weise, wie oder wodurch diese nun tatsächlich animiert werden.

Das Ganze dann in mehr oder weniger zwei Varianten: In der Basisvariante (auskommentiert) wird kein Converter benötigt, da immer ganz einfach die linke obere Ecke verwendet wird. Da ich das für die Ellipse nicht wirklich hübsch finde, habe ich noch einen Converter dazugepackt, der jew. das Zentrum eines Objekts zurückgeben kann (einmal für X, einmal für Y). Den könnte nun man mit ein wenig Trigonometrie natürlich auch noch so umschreiben, dass er nicht auf das Zentrum abzielt, sondern auf einen Punkt auf dem Kreisrand.

In der im XAML aktiven Fassung jedenfalls ließe sich das Binding für X1/Y1 der Linie auch, analog zu X2/Y2, über den Converter regeln, so dass die Linie auch im Zentrum des Rechtecks platziert wäre.

XAML:

<Window x:Class="WpfTests.Line_AnimatedBetweenRectangleAndEllipse_OR"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfTests"
    Title="Line_AnimatedBetweenRectangleAndEllipse" 
    Height="450" Width="450">
  <Canvas Name="cvs">
   <Canvas.Resources>
     <!-- The converter -->
     <local:ObjTranslateTransformWidthHeightToCenterPointConverter x:Key="mvc"/>

     <!-- The Rectangle's animation (path) -->
     <Storyboard x:Key="sb_Rect">
      <!-- The X-axis animation -->
      <DoubleAnimationUsingPath
         Storyboard.TargetName="ttAnimationTarget_Rect"
         Storyboard.TargetProperty="X" 
         Source="X"
         Duration="0:0:3"
         RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingPath.PathGeometry>
         <PathGeometry Figures="M50,120 C75,20 175,20 200,120 
                     220,220 325,220 350, 120 325,20 220,20 
                     200,120 175,220 75,220 50,120" />
        </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
      <!-- The Y-axis animation -->
      <DoubleAnimationUsingPath
         Storyboard.TargetName="ttAnimationTarget_Rect"
         Storyboard.TargetProperty="Y" 
         Source="Y"
         Duration="0:0:3"
         RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingPath.PathGeometry>
         <PathGeometry Figures="M50,120 C75,20 175,20 200,120 
                     220,220 325,220 350, 120 325,20 220,20 
                     200,120 175,220 75,220 50,120" />
        </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
     </Storyboard>

     <!-- The Ellipse's animation (path) -->
     <Storyboard x:Key="sb_El">
      <!-- The X-axis animation -->
      <DoubleAnimationUsingPath
         Storyboard.TargetName="ttAnimationTarget_Ellipse"
         Storyboard.TargetProperty="X" 
         Source="X"
         Duration="0:0:5"
         RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingPath.PathGeometry>
         <PathGeometry Figures="M25,300 a150,80 0 1,1 0.5,0.5"/>
        </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
      <!-- The Y-axis animation -->
      <DoubleAnimationUsingPath
         Storyboard.TargetName="ttAnimationTarget_Ellipse"
         Storyboard.TargetProperty="Y" 
         Source="Y"
         Duration="0:0:5"
         RepeatBehavior="Forever" AutoReverse="False">
        <DoubleAnimationUsingPath.PathGeometry>
         <PathGeometry Figures="M25,300 a150,100 0 1,1 0.5,0.5"/>
        </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
     </Storyboard>
   </Canvas.Resources>

   <Rectangle x:Name="rct" 
         Fill="LightBlue" Width="50" Height="50" 
         Stroke="DarkBlue" StrokeThickness="2">
     <Rectangle.RenderTransform>
      <TranslateTransform x:Name="ttAnimationTarget_Rect" X="0" Y="0" />
     </Rectangle.RenderTransform>
     <Rectangle.Triggers>
      <!-- Start the animation as soon as the ellipse has been created -->
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource sb_Rect}"/>
      </EventTrigger>
     </Rectangle.Triggers>
   </Rectangle>

   <Ellipse x:Name="el"        
        Width="40" Height="25" 
        Stroke="Red" StrokeThickness="2"
        Fill="Orange" >
     <Ellipse.RenderTransform>
      <TranslateTransform x:Name="ttAnimationTarget_Ellipse" X="0" Y="0" />
     </Ellipse.RenderTransform>
     <Ellipse.Triggers>
      <!-- Start the animation as soon as the ellipse has been created -->
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource sb_El}"/>
      </EventTrigger>
     </Ellipse.Triggers>
   </Ellipse>

   <!-- 
     Simple (no offset, always using upper left),
     but works without a converter.
   -->
   <!-- 
   <Line StrokeThickness="3" Stroke="Brown"
      X1="{Binding ElementName=rct, Path=RenderTransform.X}"
      Y1="{Binding ElementName=rct, Path=RenderTransform.Y}"
      X2="{Binding ElementName=el, Path=RenderTransform.X}"
      Y2="{Binding ElementName=el, Path=RenderTransform.Y}"/>
   -->

   <!-- 
     Using a converter for X2/Y2 so the line's end-coordinate
     is pointing to the center of the Ellipse 
   -->
   <Line StrokeThickness="3" Stroke="Brown"
      X1="{Binding ElementName=rct, Path=RenderTransform.X}"
      Y1="{Binding ElementName=rct, Path=RenderTransform.Y}">
     <Line.X2>
      <MultiBinding Converter="{StaticResource mvc}"
             ConverterParameter="True">
        <Binding ElementName="el" Path="RenderTransform"/>
        <Binding ElementName="el" Path="Width"/>
        <Binding ElementName="el" Path="Height"/>
      </MultiBinding>
     </Line.X2>
     <Line.Y2>
      <MultiBinding Converter="{StaticResource mvc}"
             ConverterParameter="False">
        <Binding ElementName="el" Path="RenderTransform"/>
        <Binding ElementName="el" Path="Width"/>
        <Binding ElementName="el" Path="Height"/>
      </MultiBinding>
     </Line.Y2>
   </Line>
  </Canvas>
</Window>

Und noch der Converter:

  public class ObjTranslateTransformWidthHeightToCenterPointConverter 
   : IMultiValueConverter
  {
   public object Convert(
      object[] values,
      Type targetType,
      object parameter,
      System.Globalization.CultureInfo culture
     )
   {
     if (values == null || values.Length != 3) return null;

     TranslateTransform tt = (TranslateTransform)values[0];
     double dblWidth = (double)values[1];
     double dblHeight = (double)values[2];
     bool fGetX = bool.Parse(parameter.ToString());

     //Calc the center of the object
     Point pt = new Point(
        tt.X + dblWidth / 2,
        tt.Y + dblHeight / 2
      );

     //Return the requested axis
     return (fGetX ? pt.X : pt.Y);
   }

   public object[] ConvertBack(
      object value,
      Type[] targetTypes,
      object parameter,
      System.Globalization.CultureInfo culture
     )
   {
     throw new NotImplementedException();
   }
  }

---

Cheers,
Olaf
http://blogs.intuidev.com

Answer 4

Hallo Olaf,

     > habe ich noch einen Converter dazugepackt, der jew. das Zentrum
     > eines Objekts zurückgeben kann (einmal für X, einmal für Y).

Das sollte ggf. einfacher mit:  -> RenderTransformOrigin="0.5,0.5" gehen.

---

ciao Frank

Answer 5

Hi Frank,

merci für den Hinweis, aber mir ist nicht klar, wo Du den RenderTransformOrigin anbringen wolltest ..? Habe gerade damit herumgespielt (hatte ich auch gestern schon); ob ich das nun auf das Rectangle, die Ellipse oder auch die Line anwende, ich sehe keinerlei Änderung ...

---

Cheers,
Olaf
http://blogs.intuidev.com

Answer 6

Hallo Olaf,

Also bei PathGeometrien kann man RenderTransformOrigin nicht benutzen, denn hier ist die Zentrums-Semantik ggf. vieldeutig und z.T. unentscheidbar. Bei einer Ellipse wäre das zum Beispiel möglich.
Hier wäre ein Beispiel (gerade mal SL:) [Download].

Ich will aber Dein schönes Beispiel nicht zerreden (habs gleich mal als hilfreich markiert). Es war eher reflexartig geantwortet, weil das Thema Zentrum eines Objektes oft mit RenderTransformOrigin abbildbar ist.

---

ciao Frank

Answer 7

Hi Vrank ;-),

mach Dir bloß keine Sorgen: Ich bin zwar permanent auf der Suche, habe den Stein der Weisen aber noch immer nicht gefunden. Ergo nehm ich's absolut nicht übel, wenn mich jemand auf Schwächen oder Verbesserungsmöglichkeiten aufmerksam macht - im Gegenteil, ich lerne mit jedem Posting hier (und anderswo); unter anderem deswegen bin ich hier! :-)

Was RenderTransformOrigin bezogen auf mein Beispiel anbelangt - ich hatte das testweise auch mal auf das Rectangle und die Ellipse angewendet, konnte aber keine Veränderung feststellen. Der Grund dafür ist aber absolut simpel, denn logischerweise wird RenderTransformOrigin vor dem TranslateTransform angewendet; da nun die Linie an das Ergebnis des TranslateTransforms gebunden ist, verschiebt sich logischerweise das gesamte Konstrukt.

---

Cheers,
Olaf
http://blogs.intuidev.com

Answer 8

Hallo Olaf,

       > im Gegenteil, ich lerne mit jedem Posting hier (und anderswo);

das geht mir allerdings auch oft so.

Schön, schaun wir mal, ob unsere Postings auch für den Fragesteller hilfreich sind/waren (denke schon). Schönes Wochenende.

 

---

ciao Frank

Answer 9

Hi Frank,

Schön, schaun wir mal, ob unsere Postings auch für den Fragesteller hilfreich sind/waren (denke schon). Schönes Wochenende.

jau, dafür, dass um "eine schnelle Antwort" gebeten wurde, hat sich Stephy arg rar gemacht ... :-)

Dir auch ein schönes WE!

---

Cheers,
Olaf
http://blogs.intuidev.com

Answer 10

Huhu!

Falls es noch jemanden interessiert (den OP ja ganz offensichtlich nicht mehr :-P ...): Ich habe kürzlich dazu einen Blogartikel geschrieben, weil mich die Geschichte mit dem Verbinden der zwei Shapes an deren äußeren Rand gereizt hatte. Dort findet sich auch eine IMHO elegantere/sauberere und umfassendere Lösung/Erklärung.

---

Cheers,
Olaf
http://blogs.intuidev.com