如何在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控件，有关更多信息，您可以参考

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屋！