ViewportControl捏缩放中心

时间:2014-02-21 14:45:02

标签: c# mvvm windows-phone-8 zoom viewport

Hej我正在玩一个使用MVVM的Windows Phone 8应用程序。

我在获取捏缩放的中心并完全理解视口控制器上的边界时遇到问题。最后重新配置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>

据我所知,Bounds是我想要滚动的区域,而高度和宽度是控件的窗口尺寸是正确的吗?

回答是的,这是正确的。

到第二部分:)获取捏变焦运动的中心。

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 case if(!isZooming)中,我尝试计算中心。我也尝试过在事件e中可以找到的不同中心。没有任何成功。我在计算中心时做错了什么?

最后,在我放大后,我再也无法平移整个画面了。因此,我需要更改一些变量,但在调试或搜索网络时无法确定它。有什么想法?

答案应调整图像大小,并且视口的边界应设置为已调整大小的图像的新大小。

修改 最后的问题是找到中心,问题出在这种情况发生时: enter image description here 因为e.PinchManipulation.Current给出了相对于浅蓝色方块,我希望它相对于大方块,即边界。怎么做?

1 个答案:

答案 0 :(得分:3)

为了解决这个问题,我会做以下几点。 viewportcontroller,里面有一个scrollviewer和viewport。

基础是:

虽然您拥有的图像是“unzoomed”,但是scrollviewer具有完全控制权,而ViewportControl则不执行任何操作。 当您开始捏合时,通过禁用verticalscrollbar并设置viewport.height = scrollviewer.height来锁定scrollviewer。这中和了scollviewer。 您可以使用Image ScaleTransform进行临时缩放。 在压缩完成后,调整实际图像的大小,以便它占用ViewportControl中的真实空间。现在,您的viewportControl将让您在整个缩放图像上进行平移,并获得良好的反弹效果。 再次缩小时,重新启用滚动查看器。 (将高度设置为屏幕高度并打开滚动条。) 仅供参考,我完全忘记为什么那里有画布,但我觉得这很重要。见下文:

虽然下面的示例没有做您想做的事情,但我将我的代码基于此示例中的MediaViewer并对其进行了修改:基本镜头示例

然而,应该注意它是用于图片缩放。