移動和縮放圖像

Question

我有一個非常簡單的需求（我認爲），這個窗口顯示的圖像在某個起始點&大小和移動/縮放到一定的終點和大小。這不是泛&縮放的典型圖像查看器要求。更像是一個精靈動畫。

我嘗試了幾種方法，例如，厚度動畫來改變邊距來移動圖像，但是性能還不夠好。不過，我不得不承認我對WPF沒有多少經驗。

下面是我的最後一個版本，性能明智。 image元素遍歷整個窗口，尺寸和位置由ScaleTransform和TranslateTransform設置。如果結束位置位於開始位置的右下方，則它運作良好（並且顯示相對平滑的運動），例如，從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> 

Answer 1

的問題是規模正在擴大約0,0。我相信你想調整你感興趣的點，這可能是也可能不是你的垂直/水平端點。

通常情況下，您會翻譯以便中心位於原點，縮放比例，然後將整個事件放回原處。

例如到約A點X比例，B

• 翻譯-A，-B
• 縮放X
• 翻譯A，B

幸運的規模有幾個中心性能，使這更容易。

因此請嘗試調整ScaleTransform的CenterX和CenterY屬性。