单线动画画布控件 UWP [英] Single Line Animation Canvas Control UWP

问题描述

我在这个例子中有一个线动画，我必须得到一个单线的例子.我尝试修改删除代码，例如 RemoveRange，但没有得到结果.使用 Win2d 画布控件.

I have a line animation in this example, I have to get a one-line example. I tried modifying the code removing, for example, RemoveRange but I didn't get results. With 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?

How can I reduce the example to one line? Possibly without using RemoveRange?

提前致谢.

推荐答案

来自此文档:CanvasDrawingSession.FillRectangle 方法和你下面的代码:

From this doc: CanvasDrawingSession.FillRectangle Method and your below code:

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

我们可以知道单行的宽度是ColumnWidth，那么从下面的定义:

We can know the width for one single line is ColumnWidth, then from the below definition:

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

我们可以知道ColumnWidth是40，所以为了减少你的代码只显示一行，第一种方法是设置CanvasControl的宽度只包含一行，例如 Width=50 如下:

We can know that the ColumnWidth is 40, so in order to reduce your code to show only one line, the first method is to set the width of the CanvasControl to only contain one line, for example Width=50 as following:

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

之后它应该可以正常工作了.

After that it should work fine.

第二种方法是修改这段代码:

The second method is to modify this code:

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的范围内，那么任何值都可以.

From this args.DrawingSession.FillRectangle method, we can see the first parameter start is the X axis for the rectangle line, if we want to show only on rectangle line, we can only have one X axis, so please set a fixed value for X axis. For example: 1,2,3,4..., as long as this X axis is still inside the range of the CanvasControl, then any value is ok.

例如我将 1 设置为 X 轴，如下所示:

For example I set the 1 as the X axis as following:

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

希望能帮到你.

这篇关于单线动画画布控件 UWP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！