基于SVG的在線量子電路設(shè)計平臺的研究與實現(xiàn)

夏帥　徐宇嘉　丁郁文　余霖　周揚　朱蔚　陳賽　李志強

摘要：目前已存在的自動繪圖工具能夠滿足基本需求，但工具本身存在分辨率低、非矢量、需特定運行環(huán)境等局限性，制作高清量子電路圖不便。利用JavaScript、JQuery、EasyUI、SVG 等技術(shù)完成在線繪制量子電路圖的功能，平臺對用戶提交的量子電路TFC文件進行解析并顯示，同時運用JavaScript 讀取文件內(nèi)的各項參數(shù)，用SVG來繪制文件所描述的量子電路，最終形成用戶所需的高清矢量量子電路圖。平臺也為團隊開發(fā)者提供了協(xié)同編輯的功能，在同一組內(nèi)的用戶可共同編輯同一電路圖并實時更新，從而滿足了不同用戶的各項需求。

關(guān)鍵詞：量子電路； SVG ； TFC文件； 在線繪制； 協(xié)同編輯

中圖分類號：TP311 文獻標(biāo)識碼：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 項目研究背景

量子計算機等效量子圖靈機，而量子圖靈機又等價于一個量子邏輯電路，因此可通過量子邏輯門的級聯(lián)與組合構(gòu)成量子計算機。在量子計算、可逆計算、納米技術(shù)、光計算及信息加密等領(lǐng)域中，可逆計算機已被廣泛應(yīng)用，人們已提出多種量子門，如NOT 門、SWAP 門、 CNOT門、Toffoli 門、 GT 門等。然而從事量子信息研究的人員無論是書寫發(fā)表文章還是教學(xué)研究交流，發(fā)現(xiàn)仍然無法生成這些量子門以及常用的量子電路描述文件自動生成矢量圖以及高清的點陣圖[1]。

當(dāng)前生成量子電路圖的軟件主要有三種：

1）Dmitri Maslov 等人開發(fā)的可逆電路繪圖軟件：開源軟件QCViewer和非開源軟件RCViewer以及其升級版RCViewer+。

2）Robert Wille等人開發(fā)可逆電路設(shè)計工具軟件RevKit

3）Steve Flammia和Bryan Eastin開發(fā)的用Latex繪制量子電路的工具包Q-circuit

盡管三者用戶數(shù)量龐大，但仍然有很多因素制約用戶的使用：

1）三者采用C/S 的兩層架構(gòu)，用戶必須下載客戶端才能運行，且需要特定操作系統(tǒng)。

2）生成電路圖的分辨率低，且點陣無法修改，無法生成獨立圖片文件。

由此帶來的局限性使得許多研究人員仍然手工繪制電路圖，導(dǎo)致工作量大、效率低下、操作不便等一系列問題。

本平臺基于Web使用SVG矢量圖技術(shù)自動生成量子電路圖，很好地解決了以上問題。

2 基本概念

2.1 SVG

SVG 指可伸縮矢量圖形，基于可拓展標(biāo)記語言，以XML 的格式描述二維矢量圖形。與其他諸多圖像格式相比，擁有諸多優(yōu)勢：可讀性強、可壓縮性強、圖像在放大時質(zhì)量不變、與其他標(biāo)準(zhǔn)相兼容。

2.2 EasyUI

EasyUI 是基于JQuery的一組UI插件集合，可以幫助開發(fā)者快速開發(fā)美觀的Web頁面，簡化JavaScript 編寫細節(jié)。

本平臺使用JavaScript、JQueryEasyUI、SVG 所繪制出的矢量電路圖可在網(wǎng)頁中直接拖拽，圖像清晰度高，電路各項參數(shù)可讀且允許修改，能夠滿足各期刊發(fā)表論文的要求，利用內(nèi)部算法可將復(fù)雜繪圖工作交給計算機自動實現(xiàn)。同時采用B/S架構(gòu)將SVG 圖形的優(yōu)勢帶到Web端，擺脫了C/S架構(gòu)的運行環(huán)境局限性。

2.3 TFC文件格式

TFC是保存量子電路信息的一種文件格式，使用它可以方便存儲、讀取量子電路信息。它主要分為兩部分，.v、.i、.o、.c為第一部分，.i、.o分別描述電路的輸入端、輸出端。Begin與End之間為第二部分，每一行對應(yīng)著一種量子邏輯門及其參數(shù)信息，包含受控端，控制端等。

2.4 JavaScript與JQuery操作SVG方法

利用JavaScript及JQuery來對SVG圖形進行操作。在JavaScript中調(diào)用document.createElementNS（）方法來創(chuàng)建SVG元素，如圓形、橢圓形、長方形等；調(diào)用SVG中Attribute的get和set方法來操作其屬性的修改及顯示，添加自定義屬性以用SVG來更好地描述電路元件。最終利用JS或JQuery向指定位置追加SVG元素。

3 平臺實現(xiàn)

3.1 繪制量子門

圖1中的量子門電路是利用JS、SVG繪制而成。每個量子門電路是由不同的圖形組合而成。利用SVG可以繪制出不同的圖形，如線、圓形、橢圓。也可以設(shè)置他們的屬性。調(diào)整Stroke-width控制線的寬度，調(diào)整rx， ry屬性組合控制橢圓的形狀。通過設(shè)置這些圖形的位置屬性就可以組合成量子電路。為每個量子門圖設(shè)置點擊事件來完成量子門的添加或刪除功能。

3.2 繪制工具

利用EASYUI組件中的窗體、按鈕組件，繪制圖2所示的工具條。為其中的按鈕設(shè)置單擊事件，向繪圖區(qū)追加SVG元素，原理與3.1大致相同。繪制窗體的組件可以自由拖動，這是EASYUI窗體組件本身具有的特性，點擊右上方的圖標(biāo)還可以展開折疊繪制工具欄。

3.3 繪制組合量子門

單擊對應(yīng)的圖形，再在網(wǎng)格區(qū)域單擊，根據(jù)彈出的參數(shù)設(shè)置框，設(shè)置參數(shù)，點擊確定即可添加，右擊取消添加。參數(shù)設(shè)置窗口利用了EasyUI中的窗體、按鈕、數(shù)值輸入框等組件。數(shù)值輸入框中的數(shù)值可以通過右面對應(yīng)的按鈕遞增遞減調(diào)節(jié)輸入框中的值，遞增遞減的梯度可通過屬性設(shè)置。點擊確定按鈕后，讀取輸入框中的具體參數(shù)，通過JavaScript創(chuàng)建對應(yīng)的圓形、線條，然后組合，在Web端顯示。

3.4 參數(shù)修改

參數(shù)屬性窗口利用了EasyUI中的屬性表格組件，點擊編輯框中的量子電路元素觸發(fā)事件，調(diào)用JavaScript獲取對應(yīng)的屬性，封裝成json數(shù)組，通過屬性表格組件的loadData（）方法顯示屬性，點擊屬性框，修改后會觸發(fā)相應(yīng)的事件從而修改對應(yīng)的屬性值。

本軟件所能識別的量子邏輯門種類包括T 門、F 門、H 門、V門、V+門、P3 門、S 門、T 門以及T+門。T 類門可識別T1～T21 這21 種門，對應(yīng)的端口個數(shù)分別為1～21。F 類門可識別F2，F(xiàn)3，F(xiàn)4，F(xiàn)5 四種門，對應(yīng)的端口個數(shù)分別2個。

3.5使用JavaScript和JQuery根據(jù)TFV文件繪制電路圖的算法

程序在識別TFC文件時，獲取TFC文件的全部內(nèi)容，使用JavaScript字符串處理函數(shù)分別得到v， i， o對應(yīng)的字符數(shù)組，T1，F(xiàn)3等不同的量子門類型對應(yīng)的參數(shù)，根據(jù)不同的量子門類型逐步創(chuàng)建不同的SVG元素，設(shè)置其相應(yīng)的屬性，并添加至根元素SVG標(biāo)簽中，最終在Web端呈現(xiàn)。

首先，讀取TFC文件獲取.v對應(yīng)的字符數(shù)組，從而確定要繪制的量子矢量圖的行數(shù)，以及電路的輸入與輸出標(biāo)識，判斷begin和end之間門的數(shù)目，判斷門的類型，對應(yīng)繪制不同的門。

以圖5為例，讀取begin和end之間的內(nèi)容后，逐行繪制。繪制時根據(jù)每行對應(yīng)的參數(shù)創(chuàng)建對應(yīng)的SVG圖形，圖形的屬性則根據(jù)默認參數(shù)設(shè)置。因為通用Toffoli 類規(guī)定最后一個參數(shù)對應(yīng)的是受控制端，其他均為控制端，所以受控制端對應(yīng)的SVG圓形圖案顏色為白色，并嵌入十字形圖案，而控制端對應(yīng)的SVG圓形圖案顏色為黑色。控制點半徑，受控點半徑，行間距，門間距等參數(shù)是默認的，但并不是不變的，繪制完成后可以在屬性框中進行更改。受控制點，控制點之間要有直線相連，直線的長度由控制點和受控點的數(shù)量決定。根據(jù)begin和end之間的參數(shù)繪制完之后要繪制平行線，平行線的長度由門類型的數(shù)量決定，繪制完的量子電路圖如圖6所示。

4 核心的量子矢量圖編輯思想

事件的委托：例如 onclick、onmouseover、onmouseout等即事件，委托即讓其他對象來完成原對象所需完成的實踐。委托能帶來性能上的優(yōu)勢，例如對html中每個需要添加事件的節(jié)點上添加一個或多個事件，click、mouseover等事件不僅會增加內(nèi)存，增加瀏覽器的負擔(dān)，還會降低程序運行效率。如果將事件添加到body或者其他的標(biāo)簽上，利用冒泡的原理，body等標(biāo)簽也會接收到對應(yīng)的事件，再根據(jù)事件本身的參數(shù)即可進行處理。SVG圖形事件的處理就是利用了這一特點。

5 結(jié)束語

平臺采用B/S兩層架構(gòu)，使用JavaScript、JQueryEasyUI、SVG等多種語言編寫。使用Web分布式技術(shù)及SVG 矢量圖的繪圖編程技術(shù)，在Web 平臺下實現(xiàn)高清量子電路矢量圖的自動生成及后期在線編輯操作功能；使用EasyUI、JQueryUI等JS框架實現(xiàn)功能豐富且美觀的用戶界面；基于云平臺，實現(xiàn)用戶權(quán)限管理，多用戶間可協(xié)同編輯，數(shù)據(jù)實時更新。平臺提供的服務(wù)適用于個人及團隊工作者，其研發(fā)與實現(xiàn)能為相關(guān)人員繪制高質(zhì)量電路圖帶來了極大便利。

參考文獻：

[1] 王秋里，蔡松成，紀(jì)研雨，等. 基于Visio的量子電路矢量圖自動繪制[J]. 電腦知識與技術(shù)，2015，11（12）：237-240.

[2] 黃華梅，楊信廷，楊寶祝，等. 基于AJAX和SVG的組態(tài)軟件WEB發(fā)布模型[J]. 計算機工程與設(shè)計，2010，31（12）：2629-2633.

[3] 楊晴雯，周宇，李曉. WEB圖形格式SVG及基于XML+XSL的動態(tài)生成技術(shù)[J]. 成都信息工程學(xué)院學(xué)報，2004，19（4）：545-548.

[4] 尹婷，趙思佳. 基于JQuery的AJAX網(wǎng)站設(shè)計模式的研究[J]. 湖南環(huán)境生物職業(yè)技術(shù)學(xué)院學(xué)報，2010，16（3）：1-4.

[5] 王仲，董欣，陳曉歐. SVG—一種支持可縮放矢量圖形的Web瀏覽語言規(guī)范[J]. 中國圖像圖形學(xué)報，2000，5（A）（12）：1039-1043.

[6] 劉華星，楊庚. HTML5——下一代Web開發(fā)標(biāo)準(zhǔn)研究[J]. 計算機技術(shù)與發(fā)展，2011，21（8）：54-62.