UWP рисует линию без XAML, используя события - PullRequest
Новая
       6

UWP рисует линию без XAML, используя события

0 голосов
/ 14 сентября 2018

Я довольно новичок в UWP. В настоящее время я разрабатываю приложение, которое проверяет целостность и функциональность сенсорного экрана, для чего я записываю нажатия клавиш, используя события, сделанные Grid на главной странице.

Сетка имеет имя Сетка Я использую прослушиватели событий: Grid_pointermoved и Grid_PointerReleased соответственно, чтобы получить массив пути, где был произведен удар, чтобы я мог проанализировать путь. Эта часть уже сделана и в настоящее время работает хорошо.

Что я пробовал :

Теперь мне нужно нарисовать линию на экране, где выполняется свайп. Я попытался найти в Google информацию об этом, но не смог найти решения о том, как построить линию на основе набора координат, который я только что получил от слушателей событий.

Также у меня есть отдельное событие, которое останавливает запись пролистываний, и это событие также должно быть в состоянии очистить экран от любых ранее сделанных строк. Поскольку каждый тест имеет разное количество строк, я также не могу заранее жестко кодировать строковые объекты. Любая соответствующая помощь о том, как просто нарисовать линию без использования XAML и опираться на уже сделанные события, приветствуется.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Вот демоверсия для вас, надеюсь, она вам поможет.

Страница 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;
        }
    }
}
0 голосов
/ 14 сентября 2018

У вас есть набор точек, вы можете нарисовать 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 в 'grid'.

И включает сенсорную функциональность из кода: 

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

Вот и все.

А чтобы очистить чернила от InkCanvas, вы можете просто вызвать это в отдельное событие вы упомянули, 

inkCanvas.InkPresenter.StrokeContainer.Clear();
...