c# - ViewportControl 双指缩放中心

Question

嘿，我正在使用 MVVM 玩一个适用于 Windows Phone 8 的应用程序。

我在获取缩放中心和完全理解视口(viewport) Controller 上的边界时遇到问题。最后重新配置 viewportcontroller 以仍然滚动整个图片。我的 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>

据我了解，边界是我希望能够滚动的区域，高度和宽度是控件的窗口大小，对吗？

回答 是的，这是正确的。

关于第二部分 :) 获取缩放运动的中心。

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 事件中找到的不同中心。没有任何成功。我在计算中心时做错了什么？

最后，在我缩放之后，我无法再对整个图片进行平移。因此，我需要更改一些变量，但在调试或搜索网络时无法确定它的位置。有什么想法吗？

回答图像应该调整大小，视口(viewport)的边界应该设置为调整后图像的新大小。

编辑最后一个问题是找到中心，问题是出现这种情况时: 因为 e.PinchManipulation.Current 相对于浅蓝色方 block ，我希望它相对于大方 block ，即边界。如何做到这一点？

Answer 1

为了克服这个问题，我将执行以下操作。 viewportcontroller，里面有一个scrollviewer，还有viewport。

基础是这样的:

虽然您拥有的图像是“未缩放”的，但滚动查看器具有完全控制权，而 ViewportControl 什么都不做。当您开始捏合时，通过禁用垂直滚动条并设置 viewport.height = scrollviewer.height 来锁定滚动查看器。这中和了 scollviewer。您可以使用 Image ScaleTransform 进行临时缩放。捏合完成后，调整实际图像的大小，使其占据 ViewportControl 内的实际空间。现在，您的 viewportControl 将让您平移整个缩放后的图像，并且回弹效果很好。当您再次缩小时，重新启用滚动查看器。 (设置高度为屏幕高度并开启滚动条。)仅供引用，我完全忘记了为什么那里有 Canvas ，但我觉得它很重要。见下文:

虽然下面的示例没有做您想做的事情，但我的代码基于此示例中的 MediaViewer 并对其进行了修改:Basic Lens Sample

但需要注意的是，它是用于图片缩放的。