UWP使用事件绘制没有XAML的线

Question

我对 UWP 还很陌生。我目前正在开发一个应用程序，该应用程序使用 Grid 在主页中制作的事件来测试我正在记录按键的触摸屏完整性和功能。Grid 有一个名称grid我正在使用事件侦听器：Grid_pointermoved和Grid_PointerReleased相应地获取进行滑动的路径数组，以便我可以分析路径。这部分已经制作完成，目前运行良好。我尝试了什么：现在我需要在正在滑动的屏幕上画一条线。我试图谷歌并找到一些关于它的信息，但我无法找到任何关于如何根据我刚刚从事件监听器获得的坐标绘制一条线的解决方案。此外，我还有一个单独的事件，它停止记录滑动，这个事件也应该能够从以前制作的任何行中清除屏幕。由于每个测试都有不同数量的行，我也不能事先对行对象进行硬编码。欢迎任何有关如何在不使用 XAML 的情况下简单地画线并依赖于已创建事件的适当帮助。

Answer 1

这是给你的demo，希望对你有帮助。

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

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

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 'grid'。

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

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

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

就这些。

要清除 中的墨水，您可以在您提到的单独事件InkCanvas中简单地调用它，

inkCanvas.InkPresenter.StrokeContainer.Clear();