李文艷

摘要：在Web系統(tǒng)開發(fā)中，基于Ajax的用樹形結(jié)構(gòu)展示數(shù)據(jù)被廣泛應(yīng)用，為了能更清晰的反應(yīng)數(shù)據(jù)之間的關(guān)系，對(duì)基于Canvas 的Web圖形異步樹的設(shè)計(jì)與實(shí)現(xiàn)進(jìn)行了探討。

關(guān)鍵詞：Canvas；圖形；異步樹

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）23-0183-02

1 引言

隨著 Ajax的普及應(yīng)用，現(xiàn)今出現(xiàn)了許多優(yōu)秀的 Ajax技術(shù)框架，如：Ext，Jquery，EasyUI 等[1]無(wú)論是在web系統(tǒng)開發(fā)中還是數(shù)據(jù)分析中，樹形結(jié)構(gòu)都是一種常見的數(shù)據(jù)結(jié)構(gòu)模型， 例如網(wǎng)站中常見的導(dǎo)航菜單，easyui中的樹的控件等。 使用樹形結(jié)構(gòu)可以使層次更加明確，邏輯清晰，并且能夠快速定位，下文對(duì)基于canvas 的web圖形異步樹做了設(shè)計(jì)與實(shí)現(xiàn)。

2 html5中的canvas

Html5的新功能包括 多媒體支持，canvas，本地存儲(chǔ)，離線Web應(yīng)用。地理位置，智能化表單。本文主要利用canvas實(shí)現(xiàn)圖形異步樹。對(duì)于canvas的兼容性，隨著IE9的到來(lái)，所有的瀏覽器廠商都提供了對(duì)html5 Canvas的支持，而且它已被大多數(shù)用戶所掌握。[2]

3 web圖形異步樹的設(shè)計(jì)與實(shí)現(xiàn)

Web圖像異步樹的大體邏輯是，封裝相關(guān)畫圖的函數(shù)，然后在頁(yè)面載入時(shí)利用ajax中的get方法從后臺(tái)返回json數(shù)據(jù)，根據(jù)返回?cái)?shù)據(jù)之間的關(guān)系，調(diào)用畫圖函數(shù)畫圖。

下面介紹canvas畫圖，首先檢測(cè)當(dāng)瀏覽器不支持canvas的時(shí)候顯示的文字直接寫在canvas標(biāo)簽內(nèi)。關(guān)于畫圓的函數(shù)，參數(shù)為圓的x坐標(biāo)，層數(shù)，圓上顯的文字，最后返回json數(shù)據(jù)，即圓的坐標(biāo)。這里選取圓的半徑為30px，為了使得圓看起來(lái)有立體感，需要設(shè)置每個(gè)圓的漸變，顏色隨機(jī)，圓內(nèi)文字樣式，給每個(gè)圓設(shè)置點(diǎn)擊事件，因?yàn)閏anvas圖像不支持點(diǎn)擊事件，本實(shí)例設(shè)置body為相對(duì)定位，在生成圓的時(shí)候在圓生成的位置動(dòng)態(tài)添加div并設(shè)置div的定位為絕對(duì)定位，根據(jù)圓的坐標(biāo)設(shè)置div的left和top，當(dāng)然需要在css中設(shè)置每個(gè)div透明并且做瀏覽器兼容，css代碼如下：

4 結(jié)束語(yǔ)

為了支持web樹的高度超過屏幕高度，可以設(shè)置當(dāng)樹的高度小于屏幕的高度的時(shí)候，設(shè)置canvas的高度為屏幕的高度，大于屏幕的高度設(shè)置canvas的高度為樹的高度，寬度同理。本文通過一個(gè)具體的實(shí)例，展示了利用html5中的canvas畫圖更加清晰的展示樹形結(jié)構(gòu)中數(shù)據(jù)之間的關(guān)系。這種樹形結(jié)構(gòu)可以幫助企業(yè)更好的分析分類的數(shù)據(jù)，提高了用戶體驗(yàn)。

參考文獻(xiàn)：

[1] 戴維，蔣玉芳.基于Ajax 技術(shù)實(shí)現(xiàn) web 異步村的應(yīng)用研究[J].計(jì)算機(jī)與現(xiàn)代化 2011，2：148-149.

[2] 柳伯斯，等.HTML5程序設(shè)計(jì)[M].北京：人民郵電出版社，2012.

[3] 李祁，李瑛，陳青華.基于Ajax 的動(dòng)態(tài)樹狀菜單的設(shè)計(jì)及實(shí)現(xiàn)[J].電子設(shè)計(jì)工程，2011，19：52-54.