使用Unity UGUI根据实时数据动态绘制图线（心电图）

同志们想我了吗？！我想也没有。

最近因为工程需要，通过UGUI设计了能够根据实时数据更新的动态图线，也就是像心电图那样。我从凯尔八阿哥的博客中得到绘制图线的启发，但添加了自己的实时设计，并且消耗的内存较小。

1.首先创建一个UI ==>RawImage作为呈现图像的窗口。

2.使用代码创建texture，赋给RawImage，作为呈现图线的纹理。

//初始化纹理
        m_texture = new Texture2D(graphWidth, graphHeight);
        m_rawImage.texture = m_texture;
        m_rawImage.SetNativeSize();

3.创建一个一维颜色数组（用于迭代图线）和一个一维列表（用于记录获取的数据）。

        pixels = new Color[graphWidth * graphHeight];
        data = new List();
        data.Add(0);//0 时刻接受的数据值为0 

4.设置图线背景颜色

        for (int i = 0; i < pixels.Length; i++)
        {
            pixels[i] = GraphBackground;
        }
        m_texture.SetPixels(pixels);
        m_texture.Apply();

5.在update中接收数据并绘画图线

        data.Add(datapoint);

        for (int j = data.Count - 1; j >= Mathf.Max(0, data.Count - graphWidth); j--)
        {
            pixels[data[j] * graphWidth + graphWidth - data.Count + j] = LineColor;
        }
        m_texture.SetPixels(pixels);
        m_texture.Apply();
        for (int j = data.Count - 1; j >= Mathf.Max(0, data.Count - graphWidth); j--)
        {
            pixels[data[j] * graphWidth + graphWidth - data.Count + j] = GraphBackground;
        }

倘若高度200，宽度200，那么整幅图共有40000点。

正常情况渲染时计算出40000个点后对整张图片进行渲染更新。而我在每一帧渲染完图线之后立刻沿着图线点、用背景色重新覆盖了一遍——只是将图线点重新赋值为背景色。也就是说我每一帧只有400次像素赋值——200次划线、200次擦除。

而且同样每帧只调用一次apply（）。

这次没办法上传gif，以下三张图片是连贯的变化，是不是可以用来呈现心电图数据呢？

Unity工程链接