移动&;缩放图像
本文关键字:缩放 图像 amp 移动 | 更新日期: 2023-09-27 18:29:22
我有一个非常简单的需求(我想),一个在某个起点显示图像的窗口&大小并将其移动/缩放到某个终点和大小。这不是pan&快速移动更像是精灵动画。
我尝试了几种方法,例如ThicknessAnimation来更改边距以移动图像,但性能不够好。不过,我不得不承认,我对WPF没有太多经验。
下面是我的最后一个版本,在性能方面还可以。图像元素覆盖整个窗口,大小和位置由ScaleTransform和TranslateTransform设置。如果结束位置在开始位置的右下角,例如从0,0到800600,它工作得很好(并且显示出相对平稳的移动)。然而,如果是相反的方向,图像会像弹弓一样移动到窗户的右下角,离开窗户,然后最终返回并停在其末端位置。
我希望能对这种行为做出解释,并提出解决方案。如果你知道一种不同的工作方式,并且在性能方面相似或更好,我也想听听。
<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>
问题是缩放比例约为0,0。我相信你想缩放你感兴趣的点,它可能是也可能不是你的垂直/水平终点。
通常情况下,你会进行翻译,使中心位于原点、刻度上,然后将整个东西放回。
例如关于点A、B 按X缩放
- 翻译-A,-B
- 缩放X
- 翻译A、B
幸运的是,天平有几个中心属性,这使它更容易。
因此,尝试调整ScaleTransform
的CenterX
和CenterY
属性。