0

特定の開始点とサイズで画像を表示し、特定の終了点とサイズに移動/ズームするウィンドウです。これは、パン&ズームのイメージ ビューアーの一般的な要件ではありません。スプライトアニメーションのようなもの。

たとえば、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 に答える