将图像平移、缩放和旋转（C#、XAML）放在一起答案

【问题标题】：Putting together image pan, zoom and rotation (C#, XAML)将图像平移、缩放和旋转（C#、XAML）放在一起
【发布时间】：2012-10-27 11:04:20
【问题描述】：

我想显示用户提供的图像。这些图像可能大于屏幕分辨率（因此需要缩放和平移功能），而且图像可能无法正确定位到屏幕（因此需要能够旋转）。

实现平移和缩放似乎有些简单：

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" />
</ScrollViewer>

这很好用并且满足我的需要，虽然我希望能够设置初始缩放系数，以便如果图像大于屏幕，设置缩放系数以填充屏幕，如果图像不大于屏幕，设置缩放系数以使图像以全尺寸显示，即不放大。

但是，我正在努力让轮换工作以可接受的方式进行。我试过这个：

<ScrollViewer HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto">
   <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" AutomationProperties.Name="{Binding Title}" >
      <Image.Projection>
         <PlaneProjection RotationZ="{Binding ImageRotation}"/>
      </Image.Projection>
    </Image>
 </ScrollViewer>

虽然这确实会旋转图像，但问题是 ScrollViewer 然后滚动错误。我还尝试将 Projection 放到 ScrollViewer 而不是 Image 上，结果更糟。

将项目放到图像上似乎是最有意义的，因为 ScrollViewer 应该获得投影图像的尺寸，但情况似乎并非如此。

请问我这里有什么误解？

谢谢。

菲利普

【问题讨论】：

标签： image winrt-xaml scrollviewer image-rotation

【解决方案1】：

解决方案是使用 RenderTransform 而不是 Projection：

            <Image x:Name="pannableImage" Source="{Binding FullSizedImage}" ManipulationMode="All" Loaded="pannableImage_Loaded" IsDoubleTapEnabled="False" IsHitTestVisible="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ScrollViewer.VerticalScrollBarVisibility="Disabled" LayoutUpdated="pannableImage_LayoutUpdated">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="Scale" />
                        <RotateTransform x:Name="Rotate" />
                        <TranslateTransform x:Name="Translate" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>

【讨论】：