question

EmonHaque-1485 avatar image
0 Votes"
EmonHaque-1485 asked EmonHaque-1485 edited

How to draw ArcSegment using PointAnimation?

I've these in Mainwindow.xaml:

 <Grid Margin="20">
     <Path x:Name="ellipse" Fill="Blue">
         <Path.Data>
             <EllipseGeometry RadiusX="10" RadiusY="10"/>
         </Path.Data>
     </Path>
     <Path x:Name="arc" Stroke="Red" StrokeThickness="3">
         <Path.Data>
             <PathGeometry>
                 <PathFigure StartPoint="300, 100">
                     <PathSegmentCollection>
                         <ArcSegment Point="400,200" Size="1 1" SweepDirection="Clockwise"/>
                     </PathSegmentCollection>
                 </PathFigure>
             </PathGeometry>
         </Path.Data>
     </Path>
     <Path x:Name="circle" Stroke="Green" StrokeThickness="3">
         <Path.Data>
             <PathGeometry>
                 <PathFigure StartPoint="300, 100">
                     <PathSegmentCollection>
                         <ArcSegment Point="400,200" Size="1 1" SweepDirection="Clockwise"/>
                         <!--<ArcSegment Point="300,100" Size="1 1" SweepDirection="Clockwise"/>-->
                     </PathSegmentCollection>
                 </PathFigure>
             </PathGeometry>
         </Path.Data>
     </Path>
 </Grid>

and in Mainwindow.xaml.cs these:

 public MainWindow() {
     InitializeComponent();
     var geo = circle.Data as PathGeometry;
     var a = (arc.Data as PathGeometry).Figures[0].Segments[0] as ArcSegment;
     var e = ellipse;
     e.RenderTransform = new MatrixTransform();
     var anim1 = new PointAnimationUsingPath() {
         PathGeometry = geo,
         Duration = TimeSpan.FromSeconds(2),
         RepeatBehavior = RepeatBehavior.Forever
     };
     var anim2 = new MatrixAnimationUsingPath() {
         PathGeometry = geo,
         Duration = TimeSpan.FromSeconds(2),
         RepeatBehavior = RepeatBehavior.Forever
     };
     a.BeginAnimation(ArcSegment.PointProperty, anim1);
     e.RenderTransform.BeginAnimation(MatrixTransform.MatrixProperty, anim2);
 }

this is what I see when I run the App:

84156-test1.gif

So the PointAnimation makes different red arc instead of drawing it over the green arc. I want the red to be drawn over the green, how to do that?

windows-wpf
test1.gif (135.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

Viorel-1 avatar image
1 Vote"
Viorel-1 answered EmonHaque-1485 edited

It seems to work if you set Size="70.711 70.711" to both of arcs and also change the order of paths in XAML.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I've to specify the radius for the one I want to animate. I can leave the size of the green one as 1,1. Anyway, it took a while to recall that there was a^2 + b^2 = c^2 in high school!

0 Votes 0 ·