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

【通知】本文的新升级版发布于/xxxhhhyxy/article/details/117389897，并且已有新的工程包可供下载，请诸位移架观看。

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

最近因为工程需要，通过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<int>();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，以下三张图片是连贯的变化，是不是可以用来呈现心电图数据呢？

--------

【通知】本文的新升级版发布于/xxxhhhyxy/article/details/117389897，并且已有新的工程包可供下载，请诸位移架观看。

Unity工程链接

如果觉得《使用Unity UGUI根据实时数据动态绘制图线（心电图）》对你有帮助，请点赞、收藏，并留下你的观点哦！