沿曲线路径移动箭头 [英] Moving arrow along curve path
问题描述
我想沿着曲线路径移动箭头（M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100）我的箭头方向也随着方向的变化而变化（即它随着曲线角度的变化而变化）路径。但出于某种原因，它离开了实际的道路。它移动类似但不完全像指定的路径。我希望我的箭头应该与实际路径相同。
我的代码是
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
<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
推荐答案
我让它工作，最后的动画将是三角形多边形和正弦路径，一旦我们移动鼠标指针移动三角形开始沿着路径移动，其尖端方向
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.MyArrowAnimxmlns：x =＃unknown>
xmlns =http：// schemas。 microsoft.com/winfx/2006/xaml/presentation
xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
标题=MyArrowAnimWidth =400Height =400MouseEnter =Window_MouseEnter>
< canvas width =400height =400>
< polygon points =0,0 17.3,10 0,20x：name =rct>
Fill =Red
Canvas。 Top = - 1
StrokeThickness =2
Panel.ZIndex =1Width =17Height =21Canvas.Left =1 RenderTransformOrigin =0.333,0.333>
< polygon.rendertransform>
< matrixtransf orm x：name =MyMatrixTransform>
< polygon.triggers>
< eventtrigger routedevent =FrameworkElement.MouseEnter >
< beginstoryboard>
< storyboard autoreverse =Falserepeatbehavior =Forever>
< matrixanimationusingpath storyboard。 targetname =MyMatrixTransformstoryboard.targetproperty =Matrixdoesrotatewithtangent =Trueduration =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 =SkyBluestrokethickness =8>
可见度=可见>
< 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>
并使用此课程进行翻译转换
<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
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();
}
}
}
对于上面的Xaml代码，请调用上面的C＃代码资源字典如下
For above Xaml code to work call the above C# code in Resource Dictionary as follow
<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>
这篇关于沿曲线路径移动箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
