基于JSON的Web拓?fù)潢P(guān)系圖軟件設(shè)計與實(shí)現(xiàn)

余美華

摘要：拓?fù)鋱D和流程圖可以直觀反映事物之間的關(guān)系，開發(fā)一套拓?fù)鋱D組件具有一定的實(shí)用價值。目前采用Web技術(shù)開發(fā)的拓?fù)鋱D組件非常少，通過HTML5 Canvas技術(shù)開發(fā)一套可擴(kuò)展的拓?fù)鋱D組件，可以大大提高軟件開發(fā)速度。通過對拓?fù)鋱D進(jìn)行抽象，發(fā)現(xiàn)拓?fù)鋱D實(shí)際上圖元與連接的集合，采用JSON格式對拓?fù)鋱D進(jìn)行序列化，可以對工作圖進(jìn)行保存、數(shù)據(jù)交換和傳輸。

關(guān)鍵詞：JSON；Web；HTML5；繪圖

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）28-0056-02

1概述

網(wǎng)絡(luò)拓?fù)涫蔷W(wǎng)絡(luò)形狀，或者是網(wǎng)絡(luò)在物理上的連通性，通過網(wǎng)絡(luò)拓?fù)鋱D可以可視化表示數(shù)據(jù)以及事物之間的關(guān)系。數(shù)據(jù)可視化的組件主要以圖表組件居多，但是拓?fù)鋱D、流程圖組件很少。使用HTML5中Canvas技術(shù)，將拓?fù)浣Y(jié)構(gòu)圖用JSON格式表示，開發(fā)出一套標(biāo)準(zhǔn)的拓?fù)鋱D繪圖引擎，通過配置JSON數(shù)據(jù)，就可以產(chǎn)生一組拓?fù)鋱D，開發(fā)人員不需編寫繁雜的圖形編程，提高代碼重用率，從而大大提高軟件開發(fā)速度。

2 關(guān)鍵技術(shù)研究

1）JSON

JSON全稱是JavaScript Object Notation，是一種數(shù)據(jù)交換格式，與XML相比，JOSN屬于輕量級的數(shù)據(jù)格式。JSON 可以將 JavaScript 對象中表示的一組數(shù)據(jù)轉(zhuǎn)換為字符串，然后就可以在函數(shù)之間輕松地傳遞這個字符串，或者在異步應(yīng)用程序中將字符串從 Web 客戶機(jī)傳遞給服務(wù)器端程序。在JSON語法中數(shù)據(jù)結(jié)構(gòu)只有兩種：對象與數(shù)組。對象就是用{}括起來的鍵值對集合。數(shù)組就是用[]括起來的數(shù)據(jù)集合。通過對象與數(shù)組就可以描述復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。

2）拓?fù)浣Y(jié)構(gòu)圖

網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)有很多種，主要有星型結(jié)構(gòu)、環(huán)型結(jié)構(gòu)、總線結(jié)構(gòu)、分布式結(jié)構(gòu)、樹型結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、蜂窩狀結(jié)構(gòu)等。從軟件的角度看，拓?fù)鋱D實(shí)際上是圖元與連接的集合。圖元是某個事物的抽象表示，可能是一張圖片，也可能只是一個幾何形狀。通過抽象，可以不需要關(guān)注某個圖元所需要表達(dá)的實(shí)際意義，而只需要關(guān)注圖元幾何特征。連接在拓?fù)鋱D中實(shí)際上是事物之間的聯(lián)系，可能有方向，也可能沒方向，從幾何的角度看，這種連接實(shí)際上是一條[有向]線段或者[有向]折線，在有必要的情況下，連接是帶權(quán)重的，但這里我們同樣只需要關(guān)心的幾何特征。

3）HTML5中canvas繪圖技術(shù)

在HTML5出來之前，Web客戶端是通過SVG技術(shù)完成繪圖的，但是這種技術(shù)無法滿足復(fù)雜繪圖的需求。HTML5 提供了 Canvas 標(biāo)簽和一系列的JavaScript腳本API來實(shí)現(xiàn)繪圖功能。利用程序進(jìn)行圖形繪制，可以進(jìn)行圖像的像素級操作。與在服務(wù)器端通過GDI+技術(shù)生成圖片，再通過瀏覽器請求圖片，或用插件完成繪圖的方式相比，Canvas技術(shù)屬于純Web編程技術(shù)，在呈現(xiàn)和交互時更加靈活，并極大地簡化了圖形和網(wǎng)頁中其他元素的交互過程。

3拓?fù)潢P(guān)系圖的JSON表示

為了描述拓?fù)潢P(guān)系圖，關(guān)鍵點(diǎn)需要用JSON格式來描述圖元和連接。一張拓?fù)鋱D實(shí)際上包含兩個集合，一個是圖元集合，一個是連接集合，即G={u..，l.. }。

1）圖元的JSON描述。描述圖元主要包括幾何屬性和事物屬性。其中幾何屬性有類型，坐標(biāo)，寬度和高度。因此一個圖元的JSON表示可以如下：unit={id：“unit0”，type：“rect”， x：100， y：100，w：100，h：100}。

2）連接的JSON描述。連接反應(yīng)了拓?fù)鋱D中的事物的關(guān)系，有時是有向連接，一個連接必須有兩個圖元作為連接節(jié)點(diǎn)。一個關(guān)系的JSON表示可以如下：link={id：“l(fā)ink0”，fromUnit：“unit0”，toUnit：“unit1”，hasDirection：“True”}。

3）拓?fù)鋱D的JSON表示。從上面可以看出，一張拓?fù)鋱D的JSON描述可以為：G={“name”：“拓?fù)鋱D名稱”，unitArray：[unit..]，linkArray：[link..]}

4系統(tǒng)實(shí)現(xiàn)

1）HTML5中canvas繪圖實(shí)現(xiàn)方法。通過canvas對象可以獲取到一個繪圖上下文context，所有的繪圖API均通過context調(diào)用相關(guān)函數(shù)完成。下面的代碼完成一個坐標(biāo)為20px，20px，寬度和高度為150px和200px的矩形圖元的繪制：

var c=document.getElementById（"myCanvas"）；

var ctx=c.getContext（"2d"）；

ctx.rect（20，20，150，100）；

下面的代碼完成一條線段的繪制。

ctx.beginPath（）；

ctx.moveTo（0，0）；

ctx.lineTo（300，150）；

ctx.stroke（）；

如果要繪制圖片圖元，可以采用下面的方法，其中img是圖片資源：

ctx.drawImage（img， x， y， width， height）；

下圖顯示了在一個流程圖中包含圖片圖元和連接的效果。

2）將拓?fù)鋱D中JSON對象進(jìn)行序列化和反序列化。當(dāng)一張拓?fù)鋱D繪制完成之后需要將當(dāng)前的數(shù)據(jù)保存到客戶端，首先將拓?fù)鋱D進(jìn)行JSON序列化，然后通過webservice保存到服務(wù)器。下一次打開該拓?fù)鋱D時，通過webservice首先獲取JSON數(shù)據(jù)，然后通過反序列化，再將圖形展示在客戶端。

圖元序列化將圖元保存為JSON數(shù)據(jù)，實(shí)現(xiàn)方法如下：

NodeUnit.prototype.serialize = function（）

{return "{＼"NodeUnitName＼"：＼"" + this.drawUnitName + "＼"，＼"Type＼"：＼"" + this.drawUnitType + "＼"，＼"x＼"：" + this.x + "，＼"y＼"：" + this.y + "，＼"width＼"：" + this.width + "，＼"height＼"：" + this.height + "}"；}

當(dāng)從服務(wù)器取得JSON串之后，需要將數(shù)據(jù)還原成為對象，再將圖元繪制在瀏覽器上，圖元反序列化方法如下：

NodeUnit.prototype.deSerialize = function（_josnString） {

var nodeObj=eval（_josnString）；

var node = new NodeUnit （nodeObj.NodeUnitName）；

node.x = nodeObj.x；

node.y = nodeObj.y；

node.width = nodeObj.width；

node.height = nodeObj.height；

return node；

}

5小結(jié)

本文主要解決了在Web環(huán)境下通過HTML5中Canvas技術(shù)，定義拓?fù)鋱D的JSON數(shù)據(jù)格式，完成拓?fù)潢P(guān)系圖組件的開發(fā)。在對拓?fù)鋱D進(jìn)行抽象的基礎(chǔ)上，發(fā)現(xiàn)拓?fù)鋱D主要由圖元和連接構(gòu)成，通過對關(guān)鍵技術(shù)的研究，定義了拓?fù)鋱D圖元和連接的JSON數(shù)據(jù)結(jié)構(gòu)，然后再利用Canvas 的上下文繪圖API，將圖形繪制在Web客戶端。通過標(biāo)準(zhǔn)的數(shù)據(jù)格式，二次開發(fā)人員不需要進(jìn)行繁雜的圖形編程，提高代碼重用率，軟件具備良好的健壯性和可擴(kuò)展性。

參考文獻(xiàn)：

[1] 楊秀生.基于HTML5canvas繪圖技術(shù)研究[J]，信息技術(shù)，2013（6）.

[2] 韓義波，宋莉，宋俊杰.Ajax技術(shù)結(jié)合XML或JSON的使用比較[J].電腦知識與技術(shù)，2009（5）.

[3] 唐彬.利用HTML5實(shí)現(xiàn)網(wǎng)頁圖表的研究[J].微型電腦應(yīng)用，2012（8）.

[4] 高靜，段會川.JSON數(shù)據(jù)傳輸效率研究[J].計算機(jī)工程與設(shè)計，2011（6）.