如何在 uwp 中获得触摸输入？

Question

我需要如果用户用一根手指触摸画布控件，则必须开始绘图过程，如果用户用两根手指触摸画布控件，则画布区域必须滚动/平移。我该怎么做？

谢谢

Answer 1

我们可以使用指针事件来检测 UWP 中的多个手指输入。例如：

<ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden"
              VerticalScrollMode="Disabled" HorizontalScrollMode="Disabled">
    <canvas:CanvasControl x:Name="canvasControl" Draw="CanvasControl_Draw" CreateResources="canvasControl_CreateResources" ClearColor="CornflowerBlue"
                          PointerPressed="canvasControl_PointerPressed" PointerReleased="canvasControl_PointerReleased" PointerExited="canvasControl_PointerReleased"
                          PointerCanceled="canvasControl_PointerPressed"
                          PointerMoved="canvasControl_PointerMoved" Width="1200">
    </canvas:CanvasControl>
</ScrollViewer>

如您所见，我在canvas:CanvasControl 中添加了ScrollViewer，这样画布就可以滚动了。后面的代码：

private CanvasRenderTarget renderTarget;

private async void CanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    args.DrawingSession.DrawImage(renderTarget);
}

private void canvasControl_CreateResources(CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{
    renderTarget = new CanvasRenderTarget(sender, (float)sender.ActualWidth, (float)sender.ActualHeight);
}

private List<PointerPoint> m_pt = new List<PointerPoint>();

private void canvasControl_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    PointerPoint cp = e.GetCurrentPoint(canvasControl);
    m_pt.Add(cp);
    if (m_pt.Count == 2)
    {
        scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;
        scrollViewer.VerticalScrollMode = ScrollMode.Enabled;
    }
}

private void canvasControl_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    if (m_pt.Count == 1)
        canvasControl.Invalidate();
    scrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
    scrollViewer.VerticalScrollMode = ScrollMode.Disabled;
    m_pt.Clear();
}

private void canvasControl_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    if (m_pt.Count == 1)
    {
        var pt = e.GetCurrentPoint(canvasControl);
        using (var ds = renderTarget.CreateDrawingSession())
        {
            ds.DrawCircle(new Vector2((float)pt.Position.X, (float)pt.Position.Y), 2, Colors.Black);
        }
    }
    else
    {
        if (m_pt.Count > 2)
            m_pt.Clear();
    }
}

当用一根手指绘制时，在我的演示中，画布只有在释放指针时才会更新其布局。您可以更改代码以让画布在每次移动指针时更新。但我认为为此，您需要将canvas:CanvasControl 替换为另一个Win2D 控件，有关详细信息，您可以参考CanvasControl.Invalidate Method。