基于SVG的在线量子电路设计平台的研究与实现

夏帅　徐宇嘉　丁郁文　余霖　周扬　朱蔚　陈赛　李志强

摘要：目前已存在的自动绘图工具能够满足基本需求，但工具本身存在分辨率低、非矢量、需特定运行环境等局限性，制作高清量子电路图不便。利用JavaScript、JQuery、EasyUI、SVG 等技术完成在线绘制量子电路图的功能，平台对用户提交的量子电路TFC文件进行解析并显示，同时运用JavaScript 读取文件内的各项参数，用SVG来绘制文件所描述的量子电路，最终形成用户所需的高清矢量量子电路图。平台也为团队开发者提供了协同编辑的功能，在同一组内的用户可共同编辑同一电路图并实时更新，从而满足了不同用户的各项需求。

关键词：量子电路； SVG ； TFC文件； 在线绘制； 协同编辑

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）36-0267-03

Implementation of SVG-based Quantum Circuit Design Platform

XIA Shuai，XU Yu-jia，DING Yu-wen， YU Lin， ZHOU Yang，ZHU Wei，CHEN Sai，LI Zhi-qiang

（College of Information Engineering， Yangzhou University， Yangzhou 225100， China）

Abstract： At present， automatic drawing tools which exist can meet the basic needs of users. However， the tools have many limitations such as low resolution， non vector， needing specific operating system and so on. All these make it inconvenient to create high-definiton quantum circuit. This project provides the online rendering quantum circuit diagram by using JavaScript and Jquery， EasyUI， SVG and other technical features. Once the quantum circuit TFC document was submitted and then it would be analysed and displayed. The platform would also use JavaScript to read the parameters of files and use SVG to create the corresponding schematics. Finally， drawing the HD schematics required. At the same time， the platform also provides the function of coordinating editor for team developers. Users in the same group can be able to edit the same circuit diagram and update in real time， so as to meet the needs of different users.

Key words： Quantum Circuit， SVG， TFC file， Design online， Cooperative editing

1 項目研究背景

量子计算机等效量子图灵机，而量子图灵机又等价于一个量子逻辑电路，因此可通过量子逻辑门的级联与组合构成量子计算机。在量子计算、可逆计算、纳米技术、光计算及信息加密等领域中，可逆计算机已被广泛应用，人们已提出多种量子门，如NOT 门、SWAP 门、 CNOT门、Toffoli 门、 GT 门等。然而从事量子信息研究的人员无论是书写发表文章还是教学研究交流，发现仍然无法生成这些量子门以及常用的量子电路描述文件自动生成矢量图以及高清的点阵图[1]。

当前生成量子电路图的软件主要有三种：

1）Dmitri Maslov 等人开发的可逆电路绘图软件：开源软件QCViewer和非开源软件RCViewer以及其升级版RCViewer+。

2）Robert Wille等人开发可逆电路设计工具软件RevKit

3）Steve Flammia和Bryan Eastin开发的用Latex绘制量子电路的工具包Q-circuit

尽管三者用户数量庞大，但仍然有很多因素制约用户的使用：

1）三者采用C/S 的两层架构，用户必须下载客户端才能运行，且需要特定操作系统。

2）生成电路图的分辨率低，且点阵无法修改，无法生成独立图片文件。

由此带来的局限性使得许多研究人员仍然手工绘制电路图，导致工作量大、效率低下、操作不便等一系列问题。

本平台基于Web使用SVG矢量图技术自动生成量子电路图，很好地解决了以上问题。

2 基本概念

2.1 SVG

SVG 指可伸缩矢量图形，基于可拓展标记语言，以XML 的格式描述二维矢量图形。与其他诸多图像格式相比，拥有诸多优势：可读性强、可压缩性强、图像在放大时质量不变、与其他标准相兼容。

2.2 EasyUI

EasyUI 是基于JQuery的一组UI插件集合，可以帮助开发者快速开发美观的Web页面，简化JavaScript 编写细节。

本平台使用JavaScript、JQueryEasyUI、SVG 所绘制出的矢量电路图可在网页中直接拖拽，图像清晰度高，电路各项参数可读且允许修改，能够满足各期刊发表论文的要求，利用内部算法可将复杂绘图工作交给计算机自动实现。同时采用B/S架构将SVG 图形的优势带到Web端，摆脱了C/S架构的运行环境局限性。

2.3 TFC文件格式

TFC是保存量子电路信息的一种文件格式，使用它可以方便存储、读取量子电路信息。它主要分为两部分，.v、.i、.o、.c为第一部分，.i、.o分别描述电路的输入端、输出端。Begin与End之间为第二部分，每一行对应着一种量子逻辑门及其参数信息，包含受控端，控制端等。

2.4 JavaScript与JQuery操作SVG方法

利用JavaScript及JQuery来对SVG图形进行操作。在JavaScript中调用document.createElementNS（）方法来创建SVG元素，如圆形、椭圆形、长方形等；调用SVG中Attribute的get和set方法来操作其属性的修改及显示，添加自定义属性以用SVG来更好地描述电路元件。最终利用JS或JQuery向指定位置追加SVG元素。

3 平台实现

3.1 绘制量子门

图1中的量子门电路是利用JS、SVG绘制而成。每个量子门电路是由不同的图形组合而成。利用SVG可以绘制出不同的图形，如线、圆形、椭圆。也可以设置他们的属性。调整Stroke-width控制线的宽度，调整rx， ry属性组合控制椭圆的形状。通过设置这些图形的位置属性就可以组合成量子电路。为每个量子门图设置点击事件来完成量子门的添加或删除功能。

3.2 绘制工具

利用EASYUI组件中的窗体、按钮组件，绘制图2所示的工具条。为其中的按钮设置单击事件，向绘图区追加SVG元素，原理与3.1大致相同。绘制窗体的组件可以自由拖动，这是EASYUI窗体组件本身具有的特性，点击右上方的图标还可以展开折叠绘制工具栏。

3.3 绘制组合量子门

单击对应的图形，再在网格区域单击，根据弹出的参数设置框，设置参数，点击确定即可添加，右击取消添加。参数设置窗口利用了EasyUI中的窗体、按钮、数值输入框等组件。数值输入框中的数值可以通过右面对应的按钮递增递减调节输入框中的值，递增递减的梯度可通过属性设置。点击确定按钮后，读取输入框中的具体参数，通过JavaScript创建对应的圆形、线条，然后组合，在Web端显示。

3.4 参数修改

参数属性窗口利用了EasyUI中的属性表格组件，点击编辑框中的量子电路元素触发事件，调用JavaScript获取对应的属性，封装成json数组，通过属性表格组件的loadData（）方法显示属性，点击属性框，修改后会触发相应的事件从而修改对应的属性值。

本软件所能识别的量子逻辑门种类包括T 门、F 门、H 门、V门、V+门、P3 门、S 门、T 门以及T+门。T 类门可识别T1～T21 这21 种门，对应的端口个数分别为1～21。F 类门可识别F2，F3，F4，F5 四种门，对应的端口个数分别2个。

3.5使用JavaScript和JQuery根据TFV文件绘制电路图的算法

程序在识别TFC文件时，获取TFC文件的全部内容，使用JavaScript字符串处理函数分别得到v， i， o对应的字符数组，T1，F3等不同的量子门类型对应的参数，根据不同的量子门类型逐步创建不同的SVG元素，设置其相应的属性，并添加至根元素SVG标签中，最终在Web端呈现。

首先，读取TFC文件获取.v对应的字符数组，从而确定要绘制的量子矢量图的行数，以及电路的输入与输出标识，判断begin和end之间门的数目，判断门的类型，对应绘制不同的门。

以图5为例，读取begin和end之間的内容后，逐行绘制。绘制时根据每行对应的参数创建对应的SVG图形，图形的属性则根据默认参数设置。因为通用Toffoli 类规定最后一个参数对应的是受控制端，其他均为控制端，所以受控制端对应的SVG圆形图案颜色为白色，并嵌入十字形图案，而控制端对应的SVG圆形图案颜色为黑色。控制点半径，受控点半径，行间距，门间距等参数是默认的，但并不是不变的，绘制完成后可以在属性框中进行更改。受控制点，控制点之间要有直线相连，直线的长度由控制点和受控点的数量决定。根据begin和end之间的参数绘制完之后要绘制平行线，平行线的长度由门类型的数量决定，绘制完的量子电路图如图6所示。

4 核心的量子矢量图编辑思想

事件的委托：例如 onclick、onmouseover、onmouseout等即事件，委托即让其他对象来完成原对象所需完成的实践。委托能带来性能上的优势，例如对html中每个需要添加事件的节点上添加一个或多个事件，click、mouseover等事件不仅会增加内存，增加浏览器的负担，还会降低程序运行效率。如果将事件添加到body或者其他的标签上，利用冒泡的原理，body等标签也会接收到对应的事件，再根据事件本身的参数即可进行处理。SVG图形事件的处理就是利用了这一特点。

5 结束语

平台采用B/S两层架构，使用JavaScript、JQueryEasyUI、SVG等多种语言编写。使用Web分布式技术及SVG 矢量图的绘图编程技术，在Web 平台下实现高清量子电路矢量图的自动生成及后期在线编辑操作功能；使用EasyUI、JQueryUI等JS框架实现功能丰富且美观的用户界面；基于云平台，实现用户权限管理，多用户间可协同编辑，数据实时更新。平台提供的服务适用于个人及团队工作者，其研发与实现能为相关人员绘制高质量电路图带来了极大便利。

参考文献：

[1] 王秋里，蔡松成，纪研雨，等. 基于Visio的量子电路矢量图自动绘制[J]. 电脑知识与技术，2015，11（12）：237-240.

[2] 黄华梅，杨信廷，杨宝祝，等. 基于AJAX和SVG的组态软件WEB发布模型[J]. 计算机工程与设计，2010，31（12）：2629-2633.

[3] 杨晴雯，周宇，李晓. WEB图形格式SVG及基于XML+XSL的动态生成技术[J]. 成都信息工程学院学报，2004，19（4）：545-548.

[4] 尹婷，赵思佳. 基于JQuery的AJAX网站设计模式的研究[J]. 湖南环境生物职业技术学院学报，2010，16（3）：1-4.

[5] 王仲，董欣，陈晓欧. SVG—一种支持可缩放矢量图形的Web浏览语言规范[J]. 中国图像图形学报，2000，5（A）（12）：1039-1043.

[6] 刘华星，杨庚. HTML5——下一代Web开发标准研究[J]. 计算机技术与发展，2011，21（8）：54-62.