gdi在固定范围内绘图_掌控板教程 | 让掌控板像 Mixly 串口监视器一样绘图

全文约1500字，阅读时间5分钟

起因

事情的缘由是这样的，早上掌控板群里有老师讨论到掌控板能不能像 Mixly 串口监视器一样绘图，如下图所示：

解决方案

感觉是个蛮有意思的挑战，而且最近又在学习掌控板，权当练习了，所以就尝试着写了一个程序，最开始实现的效果是这样的：

程序如下图所示。本文采用的软件是掌控板官方图形化编程软件 mPython X 0.3.2，当然用 Mind+ 和 Mixly 也是可以编写的哦，这两个也都是很棒的编程软件。

我用了掌控板自带的声音传感器采集数据，声音传感器的数值则存储在一个“声音”列表中。掌控板上声音传感器的输入范围是 0-4095，但是 OLED 显示屏 y 轴的坐标最大是 63，所以用到了映射，将声音传感器检测到的数值映射到 0-60 的范围内。为什么不是 0-63 呢？因为想要上下各留些白，图像好看些。

然后不断去读取声音的值，然后添加到“声音”列表中。这个过程中还要去检测“声音”列表中的数据量是否多于 128 了，因为数据太多，显示屏也一样是画不下的，所以当数据太多的时候，不断去移除列表前面的数据，让列表中的数据进行移动，这样在绘图的过程中，就可以形成动态的效果啦。

绘图时，会用到一些坐标知识，尤其是绘制线条的过程，它要将前一个点和后一个点连接起来，横坐标很容易处理，就是 “i” 和 “i+1”，纵坐标就是声音列表相应位置的声音值。这里有一个需要注意的地方是，绘图时用了“使用i从范围……”这条重复执行语句，它的起始点设置为 0 容易理解，但是终点为什么设置为“声音列表的长度-2”呢？这是因为如果设置为“声音列表的长度-1”(或者“声音列表的长度”)，那么最后一项(或2项)会溢出列表，因为列表是从 0 开始计数的。理解了这些之后，就是让掌控板显示曲线了。

很简单，是不是？

升级

再仔细看看掌控板画的图，和 Mixly 串口监视器相比，是不是感觉特别毛刺？而且 Mixly 中每个点都用实心小圆标注了出来。

作为一个强迫症患者，可不能就这么完事了。怎么办呢？

先来解决第 1 个问题。看起来特别毛刺，是因为掌控板屏幕太小，我们把曲线横向拉长就好了。拉长多少合适呢？做一下实验发现横向拉长 6 倍看起来还是蛮舒服的。既然要拉长 6 倍，就代表声音列表要存储的数据就要相应减少，128÷6 取整后是 21，那么就存储 21 个数据吧，同样绘图时横坐标的值就要乘以 6。

再来解决第 2 个问题，这个好办，掌控板不是有绘制实心圆功能么？用绘制实心圆代替描点就行了。

修改程序如下：

最终效果如下：

是不是跟 Mixly 串口监视器很类似？

思考

当然为了追求完美的效果，还可以思考下做曲线拟合，让绘制的图像更加平滑平缓。这里就留给读者思考了，留给我思考的时间已经不多了(因为老板已经在我身后盯了很久了……)

---

*欢迎转发朋友圈。如需转载，请注明出处和原作者。

更多精彩内容，请扫码关注！