0

我有一个非常简单的要求（我想），一个窗口显示某个起点和大小的图像并将其移动/缩放到某个终点和大小。这不是 pan&zoom 的典型 Image Viewer 要求。更像一个精灵动画。

我尝试了几种方法，例如使用 ThicknessAnimation 来改变 Margin 以移动图像，但性能还不够好。不过，我不得不承认我对 WPF 没有太多经验。

以下是我的最后一个版本，性能方面还可以。图像元素覆盖整个窗口，大小和位置由 ScaleTransform 和 TranslateTransform 设置。如果结束位置在开始位置的右下角，例如从 0,0 到 800,600，它工作得很好（并且显示相对平滑的移动）。但是，如果反过来，图像会像弹弓一样移动到窗口的右下角，离开窗口，然后最终返回并停在其结束位置。

我将不胜感激对这种行为的解释以及解决方案。如果你知道一种不同的工作方式并且在性能方面相似或更好，我也想听听。

<Window x:Class="ViewBoxText.AnimatedImageWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimatedImageWindow" 
    WindowStyle="None" 
    SizeToContent="WidthAndHeight" 
    AllowsTransparency="True" 
    ShowInTaskbar="False" 
    Left="0" 
    Top="0"
    Height="{Binding TotalHeight}" 
    Width="{Binding TotalWidth}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
    <Image x:Name="image" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding TotalWidth}" Height="{Binding TotalHeight}" Stretch="Uniform">
        <Image.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="{Binding HorizontalStart}" Y="{Binding VerticalStart}" />
                <ScaleTransform />
            </TransformGroup>
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard>
                    <Storyboard Completed="OnStoryBoardCompleted">
                        <DoubleAnimation Storyboard.TargetName="image" 
                                         Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" 
                                         From="{Binding ScaleStart}" To="{Binding ScaleEnd}" DesiredFrameRate="30"
                                         Duration="0:0:2" BeginTime="0:0:0" />
                        <DoubleAnimation Storyboard.TargetName="image"
                                         Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" 
                                         From="{Binding ScaleStart}" To="{Binding ScaleEnd}" DesiredFrameRate="30"
                                         Duration="0:0:2" BeginTime="0:0:0" />
                        <DoubleAnimation Storyboard.TargetName="image"
                                         Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" 

                                         By="{Binding HorizontalOffset}"
                                         Duration="0:0:2" BeginTime="0:0:0" />
                        <DoubleAnimation Storyboard.TargetName="image"
                                         Storyboard.TargetProperty="(Image.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" 
                                         From="{Binding VerticalStart}" To="{Binding VerticalEnd}"
                                         Duration="0:0:2" BeginTime="0:0:0" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>   
    </Image>
</Grid>

4

1 回答 1

1

问题是比例缩放大约为 0,0。我相信您想缩放您感兴趣的点，这可能是也可能不是您的垂直/水平端点。

通常，您会进行平移，使中心位于原点、比例尺上，然后将整个东西放回去。

例如，围绕点 A、B 按 X 缩放

  • 翻译-A,-B
  • 规模 X
  • 翻译 A,B

幸运的是，该规模有几个中心属性，使这更容易。

所以CenterX尝试CenterY调整ScaleTransform.

于 2013-08-28T10:20:48.707 回答