一种数字电路仿真平台的设计与实现

严一涵

当今，数字电路的使用越来越广泛，众多的智能设备都依靠数字电路处理逻辑运算，其重要性不言而喻。但作为初学者，学习数字电路的基本原理要面临诸多难题。传统学习方式需购买元器件进行组装，对动手能力有极高的要求，而且实际元件有一定的精度误差，影响电路的运行结果，使初学者难以理解。另一种学习方式为通过仿真软件进行学习研究，但许多仿真软件需要付费，而且对计算机的配置也有一定的要求，也需要用户拥有足够的专业知识，同样对初学者有一定的困难[1]。

基于上述背景，本文设计并实现一种数字电路在线仿真平台，可以直接在浏览器中使用。该平台具有硬盘空间占用少、兼容不同设备及可视化交互的特点，用户无需了解较多的专业知识便可以利用仿真平台直观地理解电路，大大降低了学习成本，为数字电路初学者提供了诸多便利[2-3]。

1 需求分析

1.1 功能性需求

1）添加/删除/拖动/连接节点。为了让用户自由设计电路，平台应允许用户通过鼠标点击，在任意空白位置添加任意数量的节点。如果用户添加的节点有误，或是需要修改或移动部分电路，平台应允许选中若干节点并进行删除或者拖动，并在用户拖动节点时不会破坏原有的电路信息。如果用户希望建立节点之间的关系，可以用导线或者非门连接任意两个节点。最后，如果用户想要重复使用部分电路，或者从示例中拷贝出部分元件，平台应允许用户进行复制、剪切、粘贴等操作。

2）电路展示及运行。添加的电路节点应以不用颜色标识不同的状态。本文设计节点不通电时呈灰色，在通电时，变为蓝色进行标识，如果节点被作为电源，将会变成醒目的红色。导线在通电时同样变成蓝色。而非门由粗细不同的两段组成，用于标识输入端与输出端的位置。当用户想要观察细节，或者纵观全局时，可以自由缩放。当用户改变元件，或者元件被其他元件所影响时，应该实时反映这一变化及其连锁影响，并展示于屏幕上。对于示例电路，同样允许用户对其进行调试和运行[4]。

3）导入导出电路。为保存已设计电路信息，应允许用户将电路信息进行导入导出。

1.2 非功能性需求

1）云服务平台构建。用户往往不希望下载体积巨大的软件，因此，本文以云平台的模式进行仿真平台的设计，以网页的形式将平台呈现给用户。同时，示例电路等数据应存储于云端，当用户需要时再进行加载，这样就可以占用用户更少的内存空间，提升仿真平台的流畅性。

2）多元交互方式。不同用户的个人操作习惯可能存在很大的差别，有些偏好纯鼠标操作，有些更喜欢使用键盘快捷键。所以，仿真平台需要同时支持鼠标和键盘快捷键操作，以适应不同用户的习惯。

3）兼容性。不同的用户可能会使用不同的浏览器，为了让更多的用户都能够正常使用，平台应兼容IE/Chrome/FireFox/Safari 等不同内核的浏览器。

4）移动端。部分用户希望使用手机等移动智能终端对电路进行编辑及运行仿真，因此平台应支持与移动端对应的一系列触屏事件[5]。

2 系统方案设计

2.1 添加/删除/拖动/连接节点功能的设计与实现

首先定义“集合”类保存节点和连接信息，并使用JQuery 响应各类鼠标及键盘事件。当用户单击节点、连接线，或者框出一部分节点时，枚举得到焦点的物件，加入焦点集合，并在这些物件周围渲染明显的黑影提醒用户。

当用户单击按钮或使用快捷键时，响应事件进入添加模式，并让按钮高亮提醒用户。之后，响应用户单击的事件，如果单击的区域属于画布的空白区域，也即添加操作合法时，将节点添加入集合并选中，否则仅仅选中所单击的既有节点。如果进入添加模式前，已经选取若干节点，则让这些节点分别与现在的节点连接，以实现连接节点的功能。接下来响应用户按下Delete 或者在菜单栏中点击删除的事件，删除焦点集合中的物件。如果被删除的节点上还有连接线，则一并删除这些连接线。响应拖动事件，对焦点集合中的物件修改其坐标，并显示在屏幕上。当用户点击“切换状态”时，枚举焦点集合中的所有元素，逐一修改其信息，普通节点与电源互相转换，导线与非门互相转换。

2.2 电路展示及运行的设计与实现

本文使用HTML5Canvas 渲染电路的图形化界面，使用Javascript 对所有的元件状态进行模拟。具体的模拟方式如下：

为每一个节点设定一个自然数“电势”。作为电源的节点拥有最高的电势，未通电的节点电势为零。当一个节点的电势被改变时，或者用户操作了一个节点时，先删去节点原有向外的信号，若它的电势不为零，则向导线连接的所有亲属节点释放一个数值为电势减一的信号；若电势为零，则向此点出发的非门另一端释放一个数值为“最高电势”的信号。收到信号的节点，会取周围存在的信号的最大值设定自己的电势，若数值与先前不同，则重复上述的过程。如此一来，就可以让电流进行传递，并让失去电源供应的电路迅速失去其电势。对于没有变化的部分，不会消耗无意义的计算资源。在此基础上，枚举所有物件及其状态，将其绘制到Canvas 中，就可以实现完整的仿真了。

2.3 导入导出电路功能的设计与实现

当用户点击导出时，将电路转化为JSON 文档。给节点集合中的点标号，将其坐标及其是否是电源分别记入x,y,power 字段，列为points 数组。将连接线集合中每个连接线的两段标号，以及连接线是否作为非门记录入pointFrom,pointTo,notGate字段，列为lines 数组。最终导出的JSON 文档中就含有points,lines 两个字段，分别表示上述两个数组，并将此内容显示在浏览器中，以供复制。当用户点击导入时，显示一个输入框，将JSON 文档复原为电路。枚举points 数组，将每个元素加入节点集合；枚举lines 数组，通过标号找到相应节点并建立连接。在节点被创建或者连接线被创建时，自动向相关节点释放一个信号，更新其状态，那么电路就被复原了。代码详见https∶//github.com/yyhhenry/redstone。

3 系统结果展示

3.1 添加/删除/拖动/连接节点功能的效果展示

单击“添加元素”按钮或单击空白处，可以自由添加节点。选中若干节点并单击“删除元素”，可以自由删去节点。按下鼠标后可以拖动节点，也可以通过先选中节点，再单击“添加元素”，最后单击另一节点这样的操作方式，进行连接线的添加。选中节点或连接线，单击切换状态，可以让普通节点变成电源或让连接线变成非门。Ctrl+A，Ctrl+X，Ctrl+C，Ctrl+V 等快捷键均可以在平台中正常使用。同时打开两个电路时，剪切板可以跨越文件公用。除此之外，本平台在移动端上同样可以编辑和运行数字电路。效果示例如下图所示：

图1 添加电路示例

图2 跨页复制简单逻辑门示例

3.2 电路展示及运行的效果展示

通过菜单栏打开示例电路，根据示例电路附带的文字说明，触发该示例中的复位节点，观察到电路的一系列变化，最终完成复位操作，也就是两侧指示灯在第一位，且输出端全为零的初始状态。在整个电路仿真的运行过程中，节点的变化状态均有所展示。

图3 电路仿真运行示例

图4 导出电路示例

图5 导入电路示例

3.3 导入导出电路的效果展示

当电路编辑完成后，单击菜单栏中的导出电路，电路数据信息被转化为一个JSON 文档，直接Ctrl+A 选中便可进行复制或保存。单击导入并在输入框里粘贴所要打开的电路，就可以复原电路。

4 总结与展望

本文实现了一种数字电路仿真平台，初步实现了模拟简单数字电路的功能，具有简单易懂的操作模式和运行界面，降低了学习数字电路的难度和成本，适合数字电路初学者使用，也可用于课堂教学。

在未来，数字电路仿真平台还将从以下方面进行改进：1）在菜单栏中直接提供封装好的与门、或门、异或门、触发器等常用元件。2）将电路导入导出的方式改为二进制文件的形式，并以拖拽方式打开。3）允许用户注册登录账号，提供将设计电路上传保存至云端的功能。