Улучшение анимации линий win2d UWP - PullRequest
Новая
       22

Улучшение анимации линий win2d UWP

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

Я создал звуковой спектр частот и для анимации линий я использовал CanvasAnimatedControl, но анимация линий идет в кадре.

Событие Code of Draw: 

    private void OnDraw(Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl 
        sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedDrawEventArgs args)
    {
        double height = sender.Size.Height;
        double width = sender.Size.Width;

        for (int a = 0; a < nBands; a++)
        {
            _data.Add(new List<double>());
            for (int i = 0; i < DataPointsPerFrame; i++)
            {
                _lastValue = Math.Max(0d, Math.Min(1d, _lastValue + (list[a] * 0.00001)));
                _data[a].Add(list[a]);
            }
        }

        for (int a = 0; a < nBands; a++)
        {
            double total = 0;
            double range = 0;

            double widthBand = (width - 120 - ((nBands - 1) * 1)) / nBands;
            var padding = 60 + (a * widthBand) + (a * 1);
            for (int start = 0; start < _data[a].Count; start += ColumnAvgDataRange)
            {
                total = 0;
                range = Math.Min(ColumnAvgDataRange, _data[a].Count - start);

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

            total = total * 0.0008;

            var point1 = new Vector2((float)padding, (float)height);
            var point2 = new Vector2((float)padding, (float)height - (float)(height * (total / range)));
            args.DrawingSession.DrawLine(point1, point2, Colors.Green, (float)widthBand);
        }
        canvasBands.Invalidate();
    }

Я загрузил проект по этой ссылке .

Как можно улучшить анимацию линий, чтобы избежать у вас есть снимки?

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

ОБНОВЛЕНИЕ 

    private void canvasBands_Update(Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender, 
        Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedUpdateEventArgs args)
    {
        double height = sender.Size.Height;
        double width = sender.Size.Width;

        point2 = new Vector2((float)padding, (float)height - (float)(height * (total / range)));
    }

Я пытался изменить, как вы сказали, но я не смог получить хороший результат, потому что с обновлением Событие меняется только один раз и возвращает только одну точку два. Я загрузил файл здесь . Как я могу измениться к лучшему?

Всегда спасибо.

1 Ответ

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

Вам не нужно вызывать invalidate на холсте.
Вам нужно отделить свой код: необходимо обновить геометрию в обработчике события Update элемента управления, а затем просто нарисовать в обработчике события Draw.

Вот пример, который использует генератор случайных чисел для создания значений. Вы можете адаптировать это к вашим потребностям. Обратите внимание, что в функции Draw ничего не происходит: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Numerics;
using Windows.UI;
using Windows.UI.Xaml.Controls;

namespace Test_One_Bar_UWP
{
    public sealed partial class MainPage : Page
    {
        private List<double> _values = new List<double>();
        private List<Vector2> _points = new List<Vector2>();
        private Random _random = new Random();
        private float _barWidth = 30.0f;

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedDrawEventArgs args)
        {
            lock (_points)
            {
                double height = sender.Size.Height;

                foreach (var point in _points)
                {
                    args.DrawingSession.DrawLine(
                        point.X * _barWidth,
                        Convert.ToSingle(height),
                        point.X * _barWidth,
                        Convert.ToSingle(height) - point.Y,
                        Colors.Green, 1);
                }
            }
        }

        private void canvas_Update(Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedUpdateEventArgs args)
        {
            _values.Add(_random.NextDouble());

            double width = sender.Size.Width;

            var lastPoints = _values.TakeLast(Convert.ToInt32(width / _barWidth));

            lock (_points)
            {
                _points.Clear();

                for (var i = 0; i < lastPoints.Count(); i++)
                {
                    _points.Add(new Vector2(i, Convert.ToSingle(sender.Size.Height * lastPoints.ElementAt(i))));
                }
            }
        }
    }
}
...