C#动态绘制心率折线图（串口通信）

硬件背景：基于stm32芯片，挂载心率监测传感器通过蓝牙传输数据的 心率监测仪

本文将介绍下如何根据 接收到的数据进行动态绘制心率折线图（大神请绕步，此乃菜鸟分享show）

首先，本案例是比较粗糙的动态绘制心率折线图，所以这里拿时间变量来刷新绘制折线图

一：在可视化界面中添加 Timer 控件，命名为TimRead.如下：

二：在可视化界面中添加PictureBox控件，此控件用于显示折线图，命名为picDataDraw；

    （坐标以及坐标轴如图所示）

三：准备一个数组和一个变量，用于定位绘图的坐标

窗口初始化的一下设置：

  //窗体初始化
        private void Form1_Load(object sender, EventArgs e)
        {
            //初始化下拉串口名称列表框
            string[] ports = SerialPort.GetPortNames();
            Array.Sort(ports);
            comboPortName.Items.AddRange(ports);
            comboPortName.SelectedIndex = comboPortName.Items.Count > 0 ? 0 : -1;
            comboBaudrate.SelectedIndex = comboBaudrate.Items.IndexOf("9600");

            //初始化SerialPort对象
            comm.NewLine = "\r\n";
            comm.RtsEnable = true;//根据实际情况吧。
            comm.ReceivedBytesThreshold = 6;//触发字节数是11   ##特别重要 这是根据实际收发数据协议而定的，譬如数据包大小

            //添加事件注册
            comm.DataReceived += comm_DataReceived;
        }

因为所使用的心率传感器发送过来的数据是有三部分的，所以每一部分都进行数据打包，有包头包尾

也可以参考我另一篇（C#上位机之多编辑框输出）

根据代码，容易看出，是根据 Q 开头的数据包进行绘图

四.回到可视化界面，双击之前定义的Timer(命名为TimRead的那个控件)，编码如下：

 private void timRead_Tick(object sender, EventArgs e)
        {
            //MessageBox.Show("timRead_Tick", "系统提示");
            Bitmap image = new Bitmap(600, 256);              //设定位图的大小
            Graphics graphics = Graphics.FromImage(image);    //获得图象对象
            Pen pen = new Pen(Color.Red);                     //获得画笔
            int rawY = this.RawY0;                            //RawY0就是之前的数组坐标，表示在位图中的Y轴的位置
            for (int i = 0; i < 599; i++)                     //容错优化
            {
                int num = rawY + i;
                if (num > 599)
                {
                    num -= 600;
                }
                int num2 = rawY + i + 1;
                if (num2 > 599)
                {
                    num2 -= 600;
                }
                graphics.DrawLine(pen, i, (1024 - this.RawY[num]) / 4, i + 1, (1024 - this.RawY[num2]) / 4);
                //graphics.DrawLine(pen, 0, 0, 599, 255);
                //绘画两点之间的直线
            }
            this.picDataDraw.Image = image;
        }

上面就是具体绘图涉及到的算法了。有什么疑问可以和我讨论。

效果如下：

后续会完善这个软件。