uwp - 在 UWP 中旋转、缩放和平移元素

Question

我的目标很简单。我希望能够主要使用触摸屏手势在我的 UWP 应用程序中对图像进行多重转换。更精确的是，我想处理每个操作，例如

Pan (Translate) - One finger gesture to pan image around the canvas.

Scale - pinch to zoom, use center of gestures as zoom center.

Rotate - Standard two finger gesture, use center of gesture as rotation center.

我创建了一个非常简单的POC，可以找到here

POC 非常简单，如下所示

<Page
    x:Class="GesturesManipulations.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GesturesManipulations"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Canvas x:Name="container" Background="Silver">
        <Image
            x:Name="image"
            Stretch="Uniform"
            Canvas.Left="100" Canvas.Top="200"
            Source="Assets/windows10-uwp.jpg"
            ManipulationMode="TranslateX,TranslateY,Scale,Rotate"
            ManipulationDelta="OnManipulationDelta">

            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="scaleTransform" />
                    <RotateTransform x:Name="rotateTransform" />
                    <TranslateTransform x:Name="translateTransform" />
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Page>

[隐藏代码]

private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    FrameworkElement origin = sender as FrameworkElement;
    FrameworkElement parent = origin.Parent as FrameworkElement;

    var localCoords = e.Position;
    var relativeTransform = origin.TransformToVisual(parent);
    Point parentContainerCoords = relativeTransform.TransformPoint(localCoords);
    var center = parentContainerCoords;

    // translate/panning
    translateTransform.X += e.Delta.Translation.X;
    translateTransform.Y += e.Delta.Translation.Y;

    rotateTransform.CenterX = center.X;
    rotateTransform.CenterY = center.Y;
    rotateTransform.Angle += e.Delta.Rotation;

    scaleTransform.CenterX = center.X;
    scaleTransform.CenterY = center.Y;
    scaleTransform.ScaleX *= e.Delta.Scale;
    scaleTransform.ScaleY *= e.Delta.Scale;
}

总体而言，该功能似乎有效。但看来改造中心也存在一些问题。开始新手势时，图像经常会发生跳跃/偏移，并且操作有时会使用错误的中心。

过去几天我尝试了很多东西，但我似乎无法解决真正的问题。也许我这样做只是为了简单。我是否必须在其他一些操纵事件中做一些事情？希望有人能帮助我。

提前致谢。

Answer 1

在解决中心旋转问题后，我终于找到了解决方案。

根据 Microsoft Blog entry实现方法如下:

void ManipulateMe_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    previousTransform.Matrix = transforms.Value;

    // Get center point for rotation
    Point center = previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y));
    deltaTransform.CenterX = center.X;
    deltaTransform.CenterY = center.Y;

    // Look at the Delta property of the ManipulationDeltaRoutedEventArgs to retrieve
    // the rotation, scale, X, and Y changes
    deltaTransform.Rotation = e.Delta.Rotation;
    deltaTransform.TranslateX = e.Delta.Translation.X;
    deltaTransform.TranslateY = e.Delta.Translation.Y;
}

但问题是，e.Position 值不是相对于调用 ManipulationDelta 事件的元素，而是相对于被触摸的元素!因此，如果元素内有多个元素(例如网格)，则 e.Position 相对于被触摸的子元素。因此，我们首先需要将 e.Position 转换为容器元素，然后将其转换为屏幕位置。

所以正确的代码应该是:

void ManipulateMe_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    previousTransform.Matrix = transforms.Value;

    // Get center point for rotation

    var posX = e.Position.X;
    var posY = e.Position.Y;


    ////// FIRST GET TOUCH POSITION RELATIVE TO THIS ELEMENT ///
    if(e.Container != null)
    {
        var p = e.Container.TransformToVisual(this).TransformPoint(new Point(posX, posY)); //transform touch point position relative to this element
        posX = p.X;
        posY = p.Y;
    }        

    Point center = previousTransform.TransformPoint(new Point(posX, posY));
    deltaTransform.CenterX = center.X;
    deltaTransform.CenterY = center.Y;

    // Look at the Delta property of the ManipulationDeltaRoutedEventArgs to retrieve
    // the rotation, scale, X, and Y changes
    deltaTransform.Rotation = e.Delta.Rotation;
    deltaTransform.TranslateX = e.Delta.Translation.X;
    deltaTransform.TranslateY = e.Delta.Translation.Y;
}