视口控件 Pinch 缩放中心

Question

你好，我正在使用MVVM开发Windows Phone 8的应用程序。

我遇到了一个问题，无法获取缩放后屏幕中心点，并完全理解视口控制器的范围。最终需要重新配置视口控制器以便仍然可以滚动整张图片。我的XAML代码如下：

<Grid>
    <StackPanel>
        <ViewportControl Bounds="0,0,1271,1381.5" Height="480" Width="800" CacheMode="BitmapCache" RenderTransformOrigin="{Binding KontaktPunkter}" Canvas.ZIndex="1">
            <ViewportControl.RenderTransform>
                <CompositeTransform x:Name="myTransform" ScaleX="1" ScaleY="1" TranslateX="0" TranslateY="0" />
            </ViewportControl.RenderTransform>

            <View:Picture/>

        </ViewportControl>


    </StackPanel>
    <View:PopUpUC DataContext="{Binding PopUp}"/>
</Grid>

据我了解，Bounds 是我想要滚动的区域，而 Height 和 Width 则是控件窗口的大小，这是正确的吗？

回答：是的，你理解的是正确的。

接下来是第二部分：获取捏合缩放运动的中心。

public void ZoomDelta(ManipulationDeltaEventArgs e)
    {

        FrameworkElement Element = (FrameworkElement)e.OriginalSource;
        ViewportControl Picture;
        Grid PictureGrid;
        double MainWidth = Application.Current.RootVisual.RenderSize.Height;
        double MainHeight = Application.Current.RootVisual.RenderSize.Width;

        if (Element is ViewportControl)
        {
            Picture = Element as ViewportControl;
        }
        else
        {
            Picture = FindParentOfType<ViewportControl>(Element);
        }

        if (Element is Grid)
        {
            PictueGrid = Element as Grid;
        }
        else
        {
            PictureGrid = FindParentOfType<Grid>(Element);
        }

        Grid ScreenGrid = FindParentOfType<Grid>(PictureGrid);

        if (e.PinchManipulation != null)
        {

            var newScale = e.PinchManipulation.DeltaScale * Map.previousScale;


            if (!IsZooming)
            {
                Point FingerOne = e.PinchManipulation.Current.PrimaryContact;
                Point FingerTwo = e.PinchManipulation.Current.SecondaryContact;
                Point center = new Point((FingerOne.X + FingerTwo.X) / 2, (FingerOne.Y + FingerTwo.Y) / 2);
                KontaktPunkter = new Point(center.X / Picture.Bounds.Width, center.Y / Picture.Bounds.Height);

                IsZooming = true;
            }


            var newscale = Map.imageScale * newScale;
            var transform = (CompositeTransform)Picture.RenderTransform;

            if (newscale > 1)
            {
                Map.imageScale *= newScale;

                transform.ScaleX = Map.imageScale;
                transform.ScaleY = Map.imageScale;

               }
            else
            {

                transform.ScaleX = transform.ScaleY = 1;
            }


        }

        e.Handled = true;
    }

在 if(!isZooming) 的情况下，我尝试计算中心点。我还尝试过使用事件 e 中的不同中心点，但没有成功。我在计算中心点方面做错了什么?

最后，当我缩放后，我不能再在整张图片上滑动。因此，我需要更改一些变量，但是在调试或搜索网络时没有找到问题所在。有什么建议吗？

答案 图片应该被重新调整大小，并且视口的边界应该设置为重新调整后的图片的新大小。

编辑 最终问题是找到中心点，问题出在这种情况下： 由于 e.PinchManipulation.Current 是相对于浅蓝色正方形的位置，而我想要相对于大正方形即边界的位置。如何做到这一点？

- JTIM

Answer 1

为解决这个问题，我会执行以下操作。ViewportController内部有一个ScrollViewer和Viewport。

基本步骤如下：

当所拥有的图像为“未缩放”状态时，ScrollViewer具有完全的控制权，而ViewportControl无法做任何事情。 当您开始收缩时，通过禁用垂直滚动条并设置viewport.height = scrollviewer.height来锁定滚动查看器。这将使滚动查看器中立。 您可以使用图像ScaleTransform进行临时缩放。 在调整图像大小以便它占据ViewportControl内的实际空间之后，现在您的ViewportControl将让您在整个缩放的图像上漫游，并带有美观的反弹效果。 当您再次缩小时，请重新启用ScrollViewer。（将高度设为屏幕高度并打开滚动条。） 顺便提一句，我完全忘记了canvas的作用，但我感觉它很重要。请参见下文：

虽然下面的示例不能实现您想要的功能，但我基于此示例中的MediaViewer进行了代码修改：Basic Lens Sample

但是应该注意它仅适用于图片缩放。

- JonasN89