C#Windows 10应用程序-从X1，Y1到X2，Y2慢慢画线

本文关键字：Y2 X2 慢慢 Y1 应用程序 X1 C#Windows | 更新日期: 2023-09-27 18:20:56

我正在努力解决这个应该很容易解决的问题。我想简单地为画布上的一条线指定X1和Y1以及X2和Y2坐标，并在1秒的时间内在这些点之间绘制一条线。

我的画布名称是cnvML，行的名称是L1。这需要在运行时完成，所以我更喜欢使用C#，但如果我可以修改在XAML中创建的命名故事板，那也没关系。我想我需要一个故事板，尽管我还没能把它发挥作用。以下是我在过去两天里尝试的内容：

  1. 在谷歌上搜索了很多例子。通过更改动画的X和Y属性，我已经能够在画布上设置线条、矩形和椭圆的动画。我一直不知道如何转换线路本身的X2和Y2特性。我在旧的框架中看到了一些这样的例子，但其中一些方法的构造函数不同，不适用于Windows 10应用程序。

  2. 我尝试过在Blend中构建动画，但它只适用于在设计时构建的线的动画。如果我没有指定动画的目标，它会给我一个错误。此外，在Blend中执行它并不能真正按照我想要的方式完成变换。如果我在时间0以一条非常短的线开始，那么在1秒时，我将线拉伸到所需的长度，这将改变线的比例，从而改变路径对象的明显笔划厚度。

如果有人能向我展示如何做到这一点，我会非常感激，甚至不用故事板。我希望一切都在C#中。名为cnvML的画布将在设计时存在，但线条将在运行时创建。

再次，我只想把X1、Y1、X2和Y2传递给一个方法。然后画一条线，在这两个点之间画一秒钟。

谢谢，David

C#Windows 10应用程序-从X1，Y1到X2，Y2慢慢画线

免责声明：我没有WPF，所以这是从其他地方的例子拼凑而成的。

使用故事板，您可以设置X2和Y2属性的动画，如下所示：

    <Storyboard>
        <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/>
        <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/>
    </Storyboard>

如何开始取决于你自己。我刚刚将它添加到按钮控件的Button.Click事件触发器中。

这相当于目标属性在时间上的线性插值，因此在本例中，X1和Y1的值在一秒钟内将在11和100之间平滑变化。这将给出从其原点（在我的测试版本中为10,10）沿着线向100,100的最终端点延伸的线的外观。

这是我测试的完整XAML。由于我没有WPF，我预计可能有几件事我本可以做得更好：）

<Window x:Class="AnimTest.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:AnimTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" VerticalAlignment="Top" Width="426">
            <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/>
        </Canvas>
        <Button Margin="441,279,10,10">
            OK
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/>
                            <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

我安装了通用应用程序工具并进行了试用。事实证明，与WPF相比，他们改变了通用应用程序中的一大堆事情，包括几乎废除了XAML中路由事件的概念。这听起来是惹恼大量开发人员的好方法，是吗？

因此，现在不能给出适用于WPF的仅XAML的答案，而是为Universal（在W10上，VS2015）提供了一个由两部分组成的XAML+代码答案：

首先是XAML：

<Page
    x:Class="UniversalApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalApp1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Storyboard x:Name="btnClick_SB" >
                <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/>
                <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/>
            </Storyboard>
        </Grid.Resources>
        <Canvas HorizontalAlignment="Left" Height="300" Margin="10,50,0,0" VerticalAlignment="Top" Width="426">
            <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/>
        </Canvas>
        <Button Margin="441,279,10,10" Click="Button_Click">OK</Button>
    </Grid>
</Page>

和（相关部分的）代码：

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        btnClick_SB.Stop();
        btnClick_SB.Begin();
    }

btnClick_SB.Stop()调用确保在脚本已经运行时不会调用脚本，这显然是一个被禁止的操作，会引发异常。

相关文章：