不使用事件的XAML的UWP画线

Question

我是UWP的新手。 我目前正在开发一个应用程序，该应用程序使用Grid在主页中进行的事件来测试触摸屏的完整性和功能，以记录按键行为。

Grid有一个我正在使用事件侦听器的名称Grid ： Grid_pointermoved和Grid_PointerReleased相应地获取了进行滑动的路径数组，因此我可以分析路径。 这部分已经完成，目前效果很好。

我试过了

现在，我需要在正在滑动的屏幕上画一条线。 我尝试使用Google并找到有关它的一些信息，但是我找不到关于如何基于从事件监听器获得的一堆坐标绘制线的任何解决方案。

另外，我还有一个单独的事件，该事件停止记录划动，并且该事件也应该能够从以前进行的任何行清除屏幕。 由于每个测试具有不同数量的行，因此我也无法事先对行对象进行硬编码。 欢迎提供任何有关如何在不使用XAML的情况下简单地画线并依靠已经发生的事件的适当帮助。

Answer 1

这是给您的演示，希望对您有帮助。

XAML页面：

<Grid x:Name="rootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</Grid>

后面的代码：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        rootGrid.PointerPressed += RootGrid_PointerPressed;
        rootGrid.PointerMoved += RootGrid_PointerMoved;
        rootGrid.PointerReleased += RootGrid_PointerReleased;
        rootGrid.PointerExited += RootGrid_PointerExited;
    }

    int pointerId = -1;
    Line curLine = null;

    private void RootGrid_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        OnComplete();
    }

    private void RootGrid_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        OnComplete();
    }

    private void OnComplete()
    {
        // reset pointerId so that other pointers may enter live rendering mode
        pointerId = -1;
        curLine = null;
    }

    private void RootGrid_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        var pointerPoint = e.GetCurrentPoint(rootGrid);

        if (pointerId == (int)pointerPoint.PointerId)
        {
            curLine.X2 = pointerPoint.Position.X;
            curLine.Y2 = pointerPoint.Position.Y;
            curLine.Stroke = new SolidColorBrush(Colors.Red);
        }
    }

    private void RootGrid_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        // Make sure no pointer is already drawing (we allow only one 'active' pointer at a time)
        if (pointerId == -1)
        {
            var pointerPoint = e.GetCurrentPoint(rootGrid);
            if (!pointerPoint.Properties.IsLeftButtonPressed)
                return;

            curLine = new Line();
            var position = pointerPoint.Position;
            curLine.X1 = pointerPoint.Position.X;
            curLine.Y1 = pointerPoint.Position.Y;
            curLine.StrokeThickness = 1;

            rootGrid.Children.Add(curLine);

            //save pointer id so that no other pointer can ink until this one is released
            pointerId = (int)pointerPoint.PointerId;
        }
    }
}

Answer 2

您有一个点集合，您可以从这些点绘制一条Ployline ，并将其添加到网格中。

private void CreatePolyline()
{
    // Initialize a new Polyline instance
    Polyline polyline = new Polyline();

    // Set polyline color
    polyline.Stroke = new SolidColorBrush(Colors.Black);

    // Set polyline width/thickness
    polyline.StrokeThickness = 10;

    // Initialize a point collection
    var points = new PointCollection();
    points.Add(new Point(20, 100));
    points.Add(new Point(35, 150));
    points.Add(new Point(60, 200));
    points.Add(new Point(90, 250));
    points.Add(new Point(40, 300));

    // Set polyline points
    polyline.Points = points;

    // Finally, add the polyline to layout
    grid.Children.Add(polyline);
}

另外，出于测试触摸屏完整性的目的，您可以使用其他用户控件InkCanvas ，而不必以编程方式绘制线条。

首先，删除所有已完成的代码，这样您将获得一个空白的网格“ grid”。

在设计器中，将InkCanvas控件拖到“网格”。

并从后面的代码启用触摸功能：

inkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Touch;

就这些。

要清除InkCanvas墨水，您只需在您提到的单独事件中调用它，

inkCanvas.InkPresenter.StrokeContainer.Clear();