如何在 uwp 中获得触摸输入? [英] How can I get touch input in uwp?

问题描述

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

I need that if user touch on canvas control with one finger, drawing process must start and if user touch on the canvas control with two finger, canvas area must scroll/pan. How can I do this?

谢谢

推荐答案

我们可以使用 Pointer 事件来检测 UWP 中的多个手指输入.例如:

We can use Pointer events to detect multiple fingers input in UWP. For example:

<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，这样画布就可以滚动了.背后的代码:

As you can see, I put a ScrollViewer out of the canvas:CanvasControl, so will the canvas be able to be scrolled. Code behind:

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 方法.

When draw with one finger, in my demo the canvas will update its layout only when the pointer is released. You can change the code to let the canvas to update every time when the pointer is moved. But I think for this, you will need to replace the canvas:CanvasControl with another Win2D control, for more information, you can refer to CanvasControl.Invalidate Method.

这篇关于如何在 uwp 中获得触摸输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！