ViewportControl 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>

據我了解，邊界是我想要滾動的區域，高度和寬度是控件的窗口大小，這是否正確？

回答是的，它是正確的。

轉到第二部分：）獲取捏縮放運動的中心。

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情況下if（！isZooming），我嘗試計算中心。 我還嘗試了在事件e中可以找到的不同中心。 沒有任何成功。 我計算中心出了什么問題？

最終，在縮放后，我將無法再平移整個圖片。 因此，在調試或搜索網絡時，我需要更改一些變量，但無法查明。 任何想法嗎？

答案 ：應該調整圖像的大小，並且視口的邊界應設置為調整后圖像的新大小。

編輯最終問題是找到中心，而問題是這種情況發生的時間： 因為e.PinchManipulation.Current相對於淺藍色正方形，我希望它相對於大正方形，即邊界。 這該怎么做？

Answer 1

為了克服這個問題，我將執行以下操作。 視口控制器，內部有一個滾動查看器，以及一個視口。

基本內容是這樣的：

當您擁有的圖像是“未縮放”時，scrollviewer具有完全控制權，而ViewportControl則不執行任何操作。 當您開始捏住時，請通過禁用verticalscrollbar並設置viewport.height = scrollviewer.height來鎖定scrollviewer。 這將中和查看器。 您可以使用Image ScaleTransform進行臨時縮放。 捏完后，調整實際圖像的大小，以使其占據ViewportControl內部的實際空間。 現在，您的viewportControl可以讓您平移整個縮放的圖像，並具有良好的反彈效果。 再次縮小時，請重新啟用滾動查看器。 （將高度設置為屏幕高度，然后打開滾動條。）僅供參考，我完全忘記了為什么里面有畫布，但是我覺得這很重要。 見下文：

盡管下面的示例無法完成您想要的操作，但是我將代碼基於該示例內部的MediaViewer並進行了修改：基本鏡頭示例

但是應注意，它是用於圖片縮放的。