5

当缩放中心因 Metro 风格应用程序中的捏合（缩放）或其他手势而发生变化时，如何在画布对象上缩放时避免“跳跃”

我试图存档的行为类似于预装的 win8 地图应用程序的缩放行为。如果您执行捏合手势（放大或缩小），则缩放中心设置在手指之间的中间。如果你抬起一个手指，将它放在另一个点上，你可以立即执行另一个缩放操作，缩放中心正确变化，没有任何跳跃（画布中对象的UI坐标跳跃）。

我正在尝试使用复合转换对大型 Canvas 对象（在 C# WinRT 应用程序中）实现类似的行为。我想允许平移和缩放，没有旋转（现在，也许我稍后会添加它）：

我这样初始化，将缩放中心放在屏幕中心：

this.compositeTransform = new CompositeTransform();
this.compositeTransform.CenterX = this.mainPage.Width / 2.0;
this.compositeTransform.CenterY = this.mainPage.Height / 2.0;

this.innerCanvas.RenderTransform = compositeTransform;

然后我将使用操作增量事件来获取输入数据

private void InnerCanvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{                        
    this.compositeTransform.ScaleX *= e.Delta.Scale;
    this.compositeTransform.ScaleY *= e.Delta.Scale;

    this.compositeTransform.CenterX = e.Position.X;
    this.compositeTransform.CenterY = e.Position.Y;

    this.compositeTransform.TranslateX += e.Delta.Translation.X;
    this.compositeTransform.TranslateY += e.Delta.Translation.Y;                      
}

只要我执行相同的手势，它就可以正常工作。当我执行捏合手势时，新中心计算正确。但是，更改缩放中心会导致突然跳跃，例如在捏合手势后抬起一根手指时。当然，我可以只为捏合手势改变中心，但跳跃的问题仍然存在。这当然是合乎逻辑的，因为缩放与新的缩放中心一起工作。我还没有想出办法，如何避免跳跃。由于比例值本身保持不变，因此必须有可能具有相同的外观（未更改的坐标）和更改的中心。

我目前的推理是，我必须以某种方式更改 TranslateX 和 TranslateY 坐标，以便以某种方式平衡新的中心点，即 ui 元素的当前屏幕坐标保持不变。像这样的东西（scaleTransform 是一个 ScaleTransform，它只获取缩放数据）......

Point reverseScaleTransform =
    this.scaleTransform.Inverse.TransformPoint(new Point(e.Position.X,e.Position.Y));

this.compositeTransform.TranslateX += reverseScaleTransform.X - e.Position.X;
    this.compositeTransform.TranslateY += reverseScaleTransform.Y - e.Position.Y;

但这也不起作用。整个事情似乎是平板电脑上的一个标准问题，但是尽管搜索过多，我还没有找到解决方案，也许我使用了错误的关键字。

4

3 回答 3

2

我终于想通了，如何通过手动转换来解决问题，而不是使用 ScrollViewer。

    TranslateTransform tmpTranslate = new TranslateTransform();

    private void InnerCanvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {                                       
        //Transform world space into local space (origin: Scale center from the last manipulation event)            

        this.tmpTranslate.X = this.compositeTransform.CenterX;
        this.tmpTranslate.Y = this.compositeTransform.CenterY;

        Point center = this.compositeTransform.Inverse.TransformPoint(e.Position);

        Point localPoint = tmpTranslate.Inverse.TransformPoint(center);                        

        //Now scale the point in local space

        localPoint.X *= this.compositeTransform.ScaleX;
        localPoint.Y *= this.compositeTransform.ScaleY;

        //Transform local space into world space again
        Point worldPoint = tmpTranslate.TransformPoint(localPoint);

        //Take the actual scaling...
        Point distance = new Point(
            worldPoint.X - center.X,
            worldPoint.Y - center.Y);

        //...amd balance the jump of the changed scaling origin by changing the translation            

        this.compositeTransform.TranslateX += distance.X;
        this.compositeTransform.TranslateY += distance.Y;

        //Also set the scaling values themselves, especially set the new scale center...

        this.compositeTransform.ScaleX *= e.Delta.Scale;
        this.compositeTransform.ScaleY *= e.Delta.Scale;            

        this.compositeTransform.CenterX = center.X;
        this.compositeTransform.CenterY = center.Y;

        //And consider a translational shift

        this.compositeTransform.TranslateX += e.Delta.Translation.X;
        this.compositeTransform.TranslateY += e.Delta.Translation.Y;                                    
    }
于 2012-12-29T23:37:47.660 回答
0

我建议查看示例windows 8 XAML 滚动、平移和缩放示例。

缩放已经为您实现，只需使用打开缩放的滚动查看器。这符合您的要求吗？

于 2012-12-23T15:15:06.187 回答
0

如果我们只是添加

distance.x = (currentcenter.x - previouscenter.x) * (scalefactortillnow - 1)

相似地

distance.y = (currentcenter.y - previouscenter.y) * (scalefactortillnow - 1)

和

composite.translatex += distance.x; 
composite.translatey += distance.y;

那么它就足以补偿由于中心变化而引起的跳跃。我个人遇到了这个问题，发现这行得通。

于 2015-09-03T08:54:45.470 回答