Однолинейная анимация управления холстом UWP - PullRequest
Новая
       17

Однолинейная анимация управления холстом UWP

0 голосов
/ 18 января 2020

У меня есть строчная анимация в этом примере, мне нужно получить однострочный пример. Я пытался изменить код, удаляя, например, RemoveRange, но я не получил результатов. С Win2d Canvas Control.

MainPage.xaml: 

<canvas:CanvasControl x:Name="canvas" Margin="5" Draw="Canvas_OnDraw" />

MainPage.xaml.cs: 

    private int ColumnAvgDataRange = 100;
    private float ColumnWidth => (float)(40 * ColumnAvgDataRange * 0.01);
    private int DataPointsPerFrame = 10;
    private readonly List<double> _data = new List<double>();
    private readonly Random _rand = new Random();
    private double _lastValue = 0.5;

    private void Canvas_OnDraw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
    {
        for (int i = 0; i < DataPointsPerFrame; i++)
        {
            var delta = _rand.NextDouble() * .1 - .05;
            _lastValue = Math.Max(0d, Math.Min(1d, _lastValue + delta));
            _data.Add(_lastValue);
        }

        if (_data.Count > (int)canvas.ActualWidth)
        {
            _data.RemoveRange(0, _data.Count - (int)canvas.ActualWidth);
        }

        args.DrawingSession.Clear(Colors.White);

        //var padding = .5 * (ColumnAvgDataRange - ColumnWidth);
        for (int start = 0; start < _data.Count; start += ColumnAvgDataRange)
        {
            double total = 0;
            var range = Math.Min(ColumnAvgDataRange, _data.Count - start);

            for (int i = start; i < start + range; i++)
            {
                total += _data[i];
            }

            args.DrawingSession.FillRectangle(start ,  (float)(canvas.ActualHeight * (1 - total / range)), ColumnWidth, (float)(canvas.ActualHeight * (total / range)), Colors.Green);
        }
        canvas.Invalidate();
    }

Как я могу уменьшить пример до одной строки? Возможно без использования RemoveRange?

Заранее спасибо.

1 Ответ

0 голосов
/ 27 января 2020

Из этого сделать c: CanvasDrawingSession.FillRectangle Method и ваш следующий код: 

args.DrawingSession.FillRectangle(start ,  (float)(canvas.ActualHeight * (1 - total / range)), ColumnWidth, (float)(canvas.ActualHeight * (total / range)), Colors.Green);

Мы можем знать, что ширина для одной строки равна ColumnWidth , тогда из приведенного ниже определения: 

private float ColumnWidth => (float)(40 * ColumnAvgDataRange * 0.01);

Мы можем знать, что ColummWidth равно 40, поэтому для того, чтобы ваш код отображал только одну строку, первый метод заключается в установите для параметра Width CanvasControl только одну строку, например Width = 50 , как указано ниже: 

<canvas:CanvasControl x:Name="canvas" Margin="5" Width="50" Draw="Canvas_OnDraw"/>

После этого он должен работать нормально.

Второй метод заключается в изменении этого кода: 

args.DrawingSession.FillRectangle(start ,  (float)(canvas.ActualHeight * (1 - total / range)), ColumnWidth, (float)(canvas.ActualHeight * (total / range)), Colors.Green);

Из этого метода args.DrawingSession.FillRectangle мы видим первый параметр start является осью X для линии прямоугольника, если мы хотим показать только на линии прямоугольника, у нас может быть только одна ось X , поэтому, пожалуйста, установите фиксированное значение для оси X. Например: 1,2,3,4 ..., пока эта ось X все еще находится в диапазоне CanvasControl, тогда любое значение в порядке.

Например, я установил 1 в качестве оси X следующим образом: 

args.DrawingSession.FillRectangle(1,  (float)(canvas.ActualHeight * (1 - total / range)), ColumnWidth, (float)(canvas.ActualHeight * (total / range)), Colors.Green);

Надеюсь, это поможет.

...