Moving arrow along curve path

Question

0.00/5 (No votes)

See more:

hi,
I want to move an arrow along with curve path (" M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100") My arrow direction also changes along with change in direction(i.e. it changes along with change in the curve angle) of path. But for some reason it move off the actual path. It is moving similiar but not exactly like the specified path. I want my arrow should move same as the actual path.

My code is

XML

<Canvas Width="400" Height="400">        
        <Polygon Points="0,0 17.3,10 0,20" x:Name="rct" 
                          Fill="Red" 
                          Canvas.Top="-1" 
                           StrokeThickness="2"
                          Panel.ZIndex="1" Width="17" Height="21" Canvas.Left="1" RenderTransformOrigin="0.333,0.333">
            <Polygon.RenderTransform>
                <MatrixTransform x:Name="MyMatrixTransform"  />
            </Polygon.RenderTransform>
            <Polygon.Triggers>
                <EventTrigger RoutedEvent="Canvas.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="False">                           
                            <MatrixAnimationUsingPath Storyboard.TargetName="MyMatrixTransform" Storyboard.TargetProperty="Matrix" DoesRotateWithTangent="True" Duration="0:0:5"  >
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="{StaticResource RectanglePathFigureCollection}"/>
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Polygon.Triggers>
        </Polygon>
<!-- The following line of code is just for path display not concern with animation -->
        <Path Stroke="Red" StrokeThickness="2" 
                     Visibility="{Binding ElementName=chkShowPaths, Path=IsChecked,
                        Converter={StaticResource boolToVisibilityConverter}}">
            <Path.Data>
                <PathGeometry Figures="{StaticResource RectanglePathFigureCollection}"/>
            </Path.Data>
        </Path>
        <CheckBox x:Name="chkShowPaths" 
    		Content="Show Path"
    		IsChecked="True"
                Canvas.Left="15" Canvas.Top="5"/>
    </Canvas>

Thanks

Posted 7-May-14 4:01am

rameshKumar1717

Updated 7-May-14 20:11pm

_Maxxx_

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 7-May-14 11:56am

Do you mean animation? I don't know how to do it in predefined WPF animation (you need a property to be animated), but you can always explicitly move any object from point to point in a separate thread.
—SA

rameshKumar1717 8-May-14 3:18am

Yes Animation, Luckily I made it to work,I initially thought to fragment the animation as u said and call them one after the other with fixed interval of time but that was not perfect solution , so finally matrix animation came handy to me.
Thanks

Sergey Alexandrovich Kryukov 8-May-14 3:21am

Pleasure to hear about that. :-)
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

rameshKumar1717 · Accepted Answer · 2014-05-07T21:09:00

I made it to work, Final animation would be with triangle polygon and sinusoidal path to move as soon as we move mouse pointer over triangle it start moving along path with its tip orientation

<pre lang="text"><pre lang="text">

<window x:class="Animation.MyArrowAnim" xmlns:x="#unknown">
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyArrowAnim" Width="400" Height="400" MouseEnter="Window_MouseEnter">
<canvas width="400" height="400">
<polygon points="0,0 17.3,10 0,20" x:name="rct">
Fill="Red"
Canvas.Top="-1"
StrokeThickness="2"
Panel.ZIndex="1" Width="17" Height="21" Canvas.Left="1" RenderTransformOrigin="0.333,0.333">
<polygon.rendertransform>
<matrixtransform x:name="MyMatrixTransform">

<polygon.triggers>
<eventtrigger routedevent="FrameworkElement.MouseEnter">
<beginstoryboard>
<storyboard autoreverse="False" repeatbehavior="Forever">
<matrixanimationusingpath storyboard.targetname="MyMatrixTransform" storyboard.targetproperty="Matrix" doesrotatewithtangent="True" duration="0:0:1">
<matrixanimationusingpath.pathgeometry>
<pathgeometry figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100">

<path stroke="SkyBlue" strokethickness="8">
Visibility="Visible">
<path.data>
<pathgeometry figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100">

<path.rendertransform>
<translatetransform> X="{Binding ElementName=rct,
Path=ActualWidth,
Converter={StaticResource Converter}}"
Y="{Binding ElementName=rct,
Path=ActualHeight,
Converter={StaticResource Converter}}"/>

</canvas>

and use this Class for Translate transform

C#

namespace MyNameSpace
{
public class Converter : IValueConverter
   {
      public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
         if (value == null) return null;
         return ((double)value / 2);
      }

      public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
         //We never convert back.
         throw new NotImplementedException();
      }
   }
}

For above Xaml code to work call the above C# code in Resource Dictionary as follow

XML

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MyNameSpace">
{
<local:divideby2converter x:key="Converter" xmlns:x="#unknown" xmlns:local="#unknown" />
}
}</resourcedictionary>