使用给定坐标移动三角形 [英] Moving a triangle using given coordinate
本文介绍了使用给定坐标移动三角形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究一个项目，我想动画一个矩形来移动我之前设置的一定数量的坐标。
Ex：我的矩形位于（x = 0，y = 0）的位置。我想要点击一个按钮使其在100毫秒的间隔内移动到位置（x = 150，y = 230）。因此，只需单击一下，它将在前100毫秒（10,35）进入第二个100毫秒，依此类推，直到矩形到达最终位置（x = 150，y = 230）...
我正在使用visual studio并融入Visual C＃wpf。在此先感谢！:)
我尝试过：
public partial class MainWindow：Window
{
public MainWindow（）
{
InitializeComponent（）;
}
private void Button_Click（ object sender，System.Windows.RoutedEventArgs e）
{
var myRect =（Rectangle） this .FindName（ myRect）;
double x = Canvas.GetLeft（myRect）;
double y = Canvas.GetTop（myRect）;
Canvas.SetLeft（myRect，x + 10）;
Canvas.SetTop（myRect，y）;
这是XAML代码：
< Window x：Class = move .MainWindow
xmlns = http://schemas.microsoft.com/winfx/ 2006 / xaml / presentation
xmlns：x = http://schemas.microsoft .com / winfx / 2006 / xaml
xmlns：d = http：// schemas.microsoft.com/expression/blend/2008
xmlns：mc = http ：//schemas.openxmlformats.org/markup-compatibility/2006
xmlns：local = clr-namespace：move
mc：Ignorable = d
Title = < span class =code-string> MainWindow高度= 350宽度= 525 >
< StackPanel>
< Border BorderThickness = 1 BorderBrush = Aqua >
< Canvas Name = PointCanvas宽度= 500高度= 294 Margin = 9,0,6,0 >
< Rectangle x：Name = myRect Fill = ＃FFF5F4F5高度= 39 Canvas.Left = 170 Stroke = 黑色 Canvas.Top = 89宽度= 89 />
< / 画布 >
< / Border >
<按钮名称= 移动 Click = Button_Click>移动< / 按钮 >
< / < span class =code-leadattribute> StackPanel >
解决方案
如果您正在使用Blend，那么它将为您生成XAML Storyboard动画。
1.添加新故事板
2.单击要设置动画的对象
3.点击时间线上的目的地时间
4移动对象& /或更改属性
5.创建故事板
按播放按钮查看动画。可以进行进一步的调整。
现在，您可以在Xaml中为Button设置事件触发器并清理生成的代码。它看起来像这样：
< 窗口 x：Class = AnimateCanvasObject.MainWindow
xmlns = http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns：x = http://schemas.microsoft.com/ winfx / 2006 / xaml
xmlns：d = http://schemas.microsoft.com/expression/blend/2008
< span class =code-attribute>
xmlns：mc = http://schemas.openxmlformats.org/markup-compatibility/2006
xmlns：local = clr-namespace：AnimateCanvasObject
mc：可忽略 = d
标题 = < span class =code-keyword> MainWindow 高度 = 350 宽度 = 525 >
< Window.Resources >
< 故事板 x：键 = Storyboard1 >
< DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty = （UIElement.RenderTransform）。（TransformGroup.Children）[3]。（TranslateTransform.X）
< span class =code-attribute> Storyboard.TargetName = 矩形 >
< EasingDoubleKeyFrame KeyTime = 0：0：1 值 = 300 / >
< / DoubleAnimationUsingKeyFrames >
< / Storyboard >
< / Window.Resources >
< Grid >
< Grid.RowDefinitions >
< RowDefinition / >
< RowDefinition 高度 = < span class =code-keyword>自动 / >
< / Grid.RowDefinitions >
< 画布 < span class =code-attribute> x：名称 = canvas VerticalAlig nment = 拉伸 背景 = 绿色 >
< 矩形 < span class =code-attribute> x：名称 = 矩形
填充 < span class =code-keyword> = ＃FFF4F4F5 笔划 = 黑色
高度 = 100 宽度 = 100
< span class =code-attribute> Canvas.Left = 10 Canvas.Top = 10
< span class =code-attribute> RenderTransformOrigin = 0.5,0.5 >
< Rectangle.RenderTransform >
< TransformGroup >
< ScaleTransform / >
< SkewTransform / >
< RotateTransform / >
< TranslateTransform / >
< / TransformGroup >
< / Rectangle.RenderTransform >
< / Rectangle >
< / Canvas >
< 按钮 内容 = 按钮
HorizontalAlignment = 中心 < span class =code-attribute>
< span class =code-attribute> VerticalAlignment = 中心
填充 = 10 5 保证金 = 10 Grid.Row = 1 >
< Button.Triggers >
< EventTrigger RoutedEvent = Button.Click >
< BeginStoryboard 故事板 = {StaticResource Storyboard1} / >
< / EventTrigger >
< / Button.Triggers >
< /按钮 >
< / Grid >
< / Window >
如果您只想在代码后面执行此操作，那么我将把练习留给您。以下是如何执行此操作的示例... WPF：从代码中动画化TranslateTransform [ ^ ]
I'm working on a project and I want to animate a rectangle to move a certain amount of coordinate that i have set earlier.
Ex: My rectangle is at the position (x=0,y=0). I want with a click of a button to make it move at position (x=150, y=230) in interval of 100 milliseconds. So with one click, it would go to (10,25) at first 100 milliseconds,(20,35) for second 100 milliseconds and so on until the rectangle reach the final position(x=150, y=230)...
I'm working with visual studio and blend on Visual C# wpf. Thanks in advance!:)
What I have tried:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
var myRect = (Rectangle)this.FindName("myRect");
double x = Canvas.GetLeft(myRect);
double y = Canvas.GetTop(myRect);
Canvas.SetLeft(myRect,x+10);
Canvas.SetTop(myRect,y);
And this is in XAML code:
<Window x:Class="move.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:move"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Border BorderThickness="1" BorderBrush="Aqua">
<Canvas Name="PointCanvas" Width="500" Height="294" Margin="9,0,6,0">
<Rectangle x:Name="myRect" Fill="#FFF5F4F5" Height="39" Canvas.Left="170" Stroke="Black" Canvas.Top="89" Width="89"/>
</Canvas>
</Border>
<Button Name="Move" Click="Button_Click">Move</Button>
</StackPanel> 解决方案
If you are using Blend, then it will generate XAML Storyboard animation for you.
1. Add new Storyboard
2. Click on the object to animate
3. click on destination time on timeline
4. move the object &/or change properties
5. Storyboard created
Press play button to see the animation. Further tweaking can be done.
Now you can set the event trigger for the Button in Xaml and clean up the generated code. It will look something like this:
<Window x:Class="AnimateCanvasObject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:AnimateCanvasObject" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Storyboard x:Key="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="300"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Canvas x:Name="canvas" VerticalAlignment="Stretch" Background="Green"> <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Stroke="Black" Height="100" Width="100" Canvas.Left="10" Canvas.Top="10" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Canvas> <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10 5" Margin="10" Grid.Row="1"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> </EventTrigger> </Button.Triggers> </Button> </Grid> </Window>
If you want to do this in code behind only, then I will leave the exercise to you. Here is an example of how to do it... WPF: Animating TranslateTransform from code[^]
这篇关于使用给定坐标移动三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
