WPF 多点漫游实现：纯数学计算方式解析

在 WPF 中，除了使用 Manipulation 系列进行触摸的多点漫游外，还可以利用 WPF 提供的 ManipulationProcessor2D 纯数学库来实现多点漫游元素功能。这是一个位于 System.Windows.Input.Manipulations 命名空间内的独立 WPF 程序集。通过这个程序集，可以利用与 WPF 交互无关的纯数学计算方式实现多点漫游元素功能。只需向 ManipulationProcessor2D 提供多点的 Id、时间和坐标信息，就可以利用 Manipulation 的数学计算获取平移、缩放和旋转等信息，以及累计量、差量和速度。这些信息可以用于实现元素的漫游。

与 WPF 交互中的 Manipulation 系列相比，使用 System.Windows.Input.Manipulations 中的 ManipulationProcessor2D 的优势在于可以传入许多虚拟点，可以忽略具体的交互，直接从传入的多个点获取平移、缩放和旋转等信息，并通过多次传入的时间值计算出累计量、差量和速度。

本文介绍的 System.Windows.Input.Manipulations 中的 ManipulationProcessor2D 也是在 WPF 开源仓库中完全开源的。你可以在 https://github.com/dotnet/wpf 上找到所有的计算源代码。这些开源代码基于友好的 MIT 协议，意味着大家可以随意修改，开源或不开源都无所谓。本来我打算写这一篇的原理，但阅读完代码后，我发现自己没有能力写出如此数学化的博客。因此，本文仅介绍如何使用 ManipulationProcessor2D。

在阅读本博客之前，如果你是带着需求阅读的，那么请优先考虑使用默认的 Manipulation 系列是否满足需求。原因在于 WPF 交互中的 Manipulation 系列已经处理了足够多的细节，并且通过底层的优化具有非常好的性能。但使用 ManipulationProcessor2D 如果用于多点触摸，意味着你需要处理大量的触摸交互细节。本文后续的逻辑仅处理了很少的细节，不建议你直接复制下面的代码用于你的产品应用。如果你期望将其用于多点触摸，请在阅读本文之前，确保你对触摸有足够的了解。

在开始之前，先展示一下效果：

我们先在界面上放置一个 Rectangle 作为元素，接下来将对这个元素进行漫游。

代码语言：JavaScript 运行次数：0

<Rectangle Fill="Red" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" x:Name="Rectangle">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform x:Name="RotateTransform"></RotateTransform>
            <ScaleTransform x:Name="ScaleTransform"></ScaleTransform>
            <TranslateTransform x:Name="TranslateTransform"></TranslateTransform>
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

使用 System.Windows.Input.Manipulations 库的入口是 ManipulationProcessor2D 类。首先需要创建该类的对象，在创建对象时可以设置当前的数学计算对什么生效，如仅允许平移，或仅旋转等。例如，在给定多个点时，判断这些点当前是否在进行旋转等逻辑，就可以使用这部分功能，不一定仅用于多点触摸。

代码语言：JavaScript 运行次数：0

public MainWindow()
{
    InitializeComponent();
    ManipulationProcessor2D = new ManipulationProcessor2D(Manipulations2D.All);
}
private ManipulationProcessor2D ManipulationProcessor2D { get; }