專利名稱：一種內(nèi)容呈現(xiàn)設(shè)備和方法
技術(shù)領(lǐng)域：
本發(fā)明涉及網(wǎng)絡(luò)內(nèi)容顯示領(lǐng)域，尤其涉及在用戶設(shè)備處呈現(xiàn)網(wǎng)絡(luò)內(nèi)容的內(nèi)容呈現(xiàn)設(shè)備和相應(yīng)的呈現(xiàn)方法。
背景技術(shù)：
隨著基于互聯(lián)網(wǎng)的應(yīng)用越來(lái)越廣泛、網(wǎng)絡(luò)帶寬不斷增加以及用戶設(shè)備的處理性能越加強(qiáng)大。越來(lái)越多的應(yīng)用從傳統(tǒng)的桌面應(yīng)用轉(zhuǎn)移到基于瀏覽器的應(yīng)用上。網(wǎng)絡(luò)管理應(yīng)用也是如此，傳統(tǒng)的網(wǎng)絡(luò)管理應(yīng)用通常采用客戶端/服務(wù)器架構(gòu)，在終端設(shè)備處安裝傳統(tǒng)的網(wǎng)絡(luò)管理應(yīng)用客戶端，該客戶端和安裝在服務(wù)器處的網(wǎng)絡(luò)管理應(yīng)用服務(wù)器端進(jìn)行通信，管理員可以通過(guò)在客戶端處的操作來(lái)管理多個(gè)網(wǎng)絡(luò)設(shè)備。目前，隨著網(wǎng)絡(luò)瀏覽器的應(yīng)用越來(lái)越廣泛，各種用戶設(shè)備，例如傳統(tǒng)的桌面型計(jì)算機(jī)、膝上型計(jì)算機(jī)和現(xiàn)在的個(gè)人數(shù)字助理、數(shù)字平板、移動(dòng)終端以及智能手機(jī)等都內(nèi)置了網(wǎng)絡(luò)瀏覽器。為了便于管理員可以采用各種用戶設(shè)備來(lái)進(jìn)行網(wǎng)絡(luò)管理，目前出現(xiàn)了多種基于網(wǎng)絡(luò)瀏覽器的網(wǎng)絡(luò)管理應(yīng)用，以便系統(tǒng)管理員可以通過(guò)在各種用戶設(shè)備上運(yùn)行的網(wǎng)絡(luò)瀏覽器就可以管理多個(gè)網(wǎng)絡(luò)設(shè)備。在網(wǎng)絡(luò)管理應(yīng)用中，一個(gè)重要的方面就是對(duì)網(wǎng)絡(luò)設(shè)備之間的網(wǎng)絡(luò)拓?fù)潢P(guān)系進(jìn)行管理。通常，為了給予管理員對(duì)拓?fù)潢P(guān)系的直觀感受，一般在圖形用戶接口中以圖形方式示出這種拓?fù)潢P(guān)系，即拓?fù)鋱D，以便管理員可以方便地查看拓?fù)鋱D并進(jìn)行相應(yīng)的管理操作。當(dāng)網(wǎng)絡(luò)管理應(yīng)用基于網(wǎng)絡(luò)瀏覽器時(shí)，如何在網(wǎng)絡(luò)瀏覽器中顯示拓?fù)鋱D以便于管理員觀看和操作成為了關(guān)鍵的方面。目前，已知可以在網(wǎng)絡(luò)瀏覽器中采用來(lái)顯示拓?fù)鋱D的實(shí)現(xiàn)手段包括Flash、SVG和VML等。然而這些方式雖然都具有相應(yīng)的優(yōu)點(diǎn)，但是也具有明顯的缺陷。例如，SVG能夠以XML表述方式在瀏覽器上繪制拓?fù)鋱D，而且由于是SVG為矢量圖形，在拓?fù)鋱D放大/縮小時(shí)圖像不失真。但是SVG具有如下缺點(diǎn)，例如SVG圖形沒(méi)有被多數(shù)主流瀏覽器支持，導(dǎo)致在瀏覽器上顯示SVG圖形需要安裝插件；而為了完全達(dá)到SVG圖形的無(wú)極縮放，要求拓?fù)鋱D上所有元素都需要以XML方式描述，因此需要將拓?fù)鋱D上的設(shè)備圖標(biāo)從普通位圖轉(zhuǎn)換成矢量圖，這樣做的難度較大；另外SVG與Javascript的交互性較差，無(wú)法實(shí)現(xiàn)動(dòng)態(tài)效果(如動(dòng)態(tài)創(chuàng)建，刪除，隱藏網(wǎng)絡(luò)節(jié)點(diǎn)等)。使用Flash呈現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D具有表現(xiàn)形式豐富、能夠?qū)崿F(xiàn)桌面應(yīng)用所具有的絕大多數(shù)功能的優(yōu)點(diǎn)，但是Flash具有如下缺點(diǎn)，例如Flash開(kāi)發(fā)偏向美工的角色，需要專門(mén)的開(kāi)發(fā)人員才能勝任并需要有專用的開(kāi)發(fā)工具；另外，F(xiàn)lash在蘋(píng)果公司的IOS系列操作平臺(tái)上得不到支持。使用VML呈現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D能夠在瀏覽器頁(yè)面中繪制各種圖形，但是VML僅僅被IE內(nèi)核的瀏覽器所支持，因此存在明顯的應(yīng)用范圍限制。由此可以看出，目前所采用的在網(wǎng)絡(luò)瀏覽器中顯示網(wǎng)絡(luò)拓?fù)鋱D的方式都存在不足之處。應(yīng)當(dāng)看出，其他需要在網(wǎng)絡(luò)瀏覽器中顯示類似于拓?fù)鋱D之類的、具有對(duì)象和對(duì)象之間的連接關(guān)系的圖形的應(yīng)用同樣存在上述問(wèn)題。所期望的是一種可以支持大多數(shù)主流網(wǎng)絡(luò)瀏覽器的，便于開(kāi)發(fā)和進(jìn)行交互的圖形化呈現(xiàn)設(shè)備和方式。

發(fā)明內(nèi)容
鑒于上述問(wèn)題，提出了本發(fā)明以便提供一種克服上述問(wèn)題或者至少部分地解決或者減緩上述問(wèn)題的內(nèi)容呈現(xiàn)設(shè)備和相應(yīng)的內(nèi)容呈現(xiàn)方法。根據(jù)本發(fā)明的一個(gè)方面，提供了一種內(nèi)容呈現(xiàn)設(shè)備，適于圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的連接關(guān)系。該內(nèi)容呈現(xiàn)設(shè)備包括頁(yè)面布局部件，以便在該內(nèi)容呈現(xiàn)設(shè)備中定義用于進(jìn)行圖形化呈現(xiàn)的區(qū)域。該內(nèi)容呈現(xiàn)設(shè)備還包括位置確定部件，用于根據(jù)每個(gè)對(duì)象的屬性來(lái)確定該對(duì)象在所定義區(qū)域中的位置。由于對(duì)象的連接關(guān)系一般可以由所涉及的對(duì)象來(lái)定義，因此位置確定部件可以根據(jù)每個(gè)對(duì)象的位置來(lái)確定一個(gè)或者多個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)在所定義區(qū)域中的位置。在該內(nèi)容呈現(xiàn)設(shè)備中，圖形繪制部件根據(jù)每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的位置在所定義區(qū)域中繪制連接每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的連線，并在所定義區(qū)域中繪制每個(gè)對(duì)象，其中對(duì)象疊加在連線之上。根據(jù)本發(fā)明的內(nèi)容呈現(xiàn)設(shè)備，在呈現(xiàn)對(duì)象及其連接關(guān)系時(shí)，考慮對(duì)象的大小和位置來(lái)獲取對(duì)象的圖形中心，將對(duì)象的連接關(guān)系繪制成簡(jiǎn)單的連線，然后將對(duì)象疊加在連線之上。這樣，可以一種便捷的方式來(lái)圖形化地呈現(xiàn)對(duì)象及其連接關(guān)系。可選地，在此處公開(kāi)的內(nèi)容呈現(xiàn)設(shè)備中，每當(dāng)所呈現(xiàn)的對(duì)象或者其連接關(guān)系發(fā)生改變時(shí)，位置確定部件會(huì)重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，以及圖形繪制部件重新在所定義區(qū)域中繪制對(duì)象和對(duì)應(yīng)于連接關(guān)系的連線。可選地，在此處公開(kāi)的內(nèi)容呈現(xiàn)設(shè)備可以采用HTML5或者與HTML5兼容的呈現(xiàn)方式，頁(yè)面布局部件可以采用HTML中的Canvas元素來(lái)定義呈現(xiàn)區(qū)域，以及圖形繪制部件可以采用HTML中的Div元素來(lái)定義對(duì)象。例如，對(duì)于每個(gè)對(duì)象，圖形繪制部件利用第一 Div元素來(lái)定義對(duì)象的大小和位置，利用第二 Div元素定義對(duì)應(yīng)于該對(duì)象的圖標(biāo)，以及利用第三Div元素定義對(duì)應(yīng)于該對(duì)象的對(duì)象描述，其中第二 Div元素和第三元素包含在第一 Div元素中。HTML5是W3C在近期指定的標(biāo)準(zhǔn)，HTML5適于在各種用戶設(shè)備(包括傳統(tǒng)的計(jì)算機(jī)和目前快速發(fā)展的移動(dòng)終端)中的各種網(wǎng)絡(luò)瀏覽器中呈現(xiàn)網(wǎng)頁(yè)。因此采用HTML5可以使得內(nèi)容呈現(xiàn)設(shè)備可以廣泛地應(yīng)用于各種設(shè)備中。根據(jù)本發(fā)明的另一個(gè)方面，提供了一種內(nèi)容呈現(xiàn)方法，適于圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)對(duì)象連接關(guān)系。該內(nèi)容呈現(xiàn)方法包括在內(nèi)容呈現(xiàn)設(shè)備中定義用于圖形化呈現(xiàn)的區(qū)域；根據(jù)每個(gè)對(duì)象的屬性來(lái)確定相應(yīng)對(duì)象在所定義區(qū)域中的位置，根據(jù)每個(gè)對(duì)象的位置來(lái)確定連接關(guān)系的起點(diǎn)和終點(diǎn)在所定義區(qū)域中的位置；以及根據(jù)每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的位置在所定義區(qū)域中繪制連接每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的連線，并在所定義區(qū)域中繪制每個(gè)對(duì)象，其中所述每個(gè)對(duì)象疊加在所述連線之上。根據(jù)本發(fā)明的內(nèi)容呈現(xiàn)方法，在呈現(xiàn)對(duì)象及其連接關(guān)系時(shí)，考慮對(duì)象的大小和位置來(lái)獲取對(duì)象的圖形中心，將對(duì)象的連接關(guān)系繪制成簡(jiǎn)單的連線，然后將對(duì)象疊加在連線之上。這樣，可以一種便捷的方式來(lái)圖形化地呈現(xiàn)對(duì)象及其連接關(guān)系。在此公開(kāi)的內(nèi)容呈現(xiàn)設(shè)備和方法尤其適于應(yīng)用在網(wǎng)絡(luò)瀏覽器中，并且尤其適用于顯示網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)的應(yīng)用。


通過(guò)閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的參考符號(hào)表示相同的部件。在附圖中:
圖1示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的內(nèi)容呈現(xiàn)設(shè)備的示意框 圖2示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的內(nèi)容呈現(xiàn)設(shè)備呈現(xiàn)的對(duì)象關(guān)系的示意 圖3示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的內(nèi)容呈現(xiàn)設(shè)備呈現(xiàn)的對(duì)象和對(duì)象關(guān)系的示意圖； 圖4A-4C示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的有關(guān)對(duì)象呈現(xiàn)區(qū)域進(jìn)行縮放的示意 圖5示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的對(duì)象定義的示意圖；以及 圖6示意性地示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的內(nèi)容呈現(xiàn)方法的流程圖。
具體實(shí)施例方式下面結(jié)合附圖和具體的實(shí)施方式對(duì)本發(fā)明作進(jìn)一步的描述。圖1示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的內(nèi)容呈現(xiàn)設(shè)備100的示意框圖。內(nèi)容呈現(xiàn)設(shè)備100可以是適于呈現(xiàn)網(wǎng)絡(luò)頁(yè)面的網(wǎng)絡(luò)瀏覽器。隨著英特網(wǎng)和移動(dòng)設(shè)備的硬件和軟件技術(shù)發(fā)展，已經(jīng)出現(xiàn)了各種并非網(wǎng)絡(luò)瀏覽器、但是采用了各種網(wǎng)絡(luò)瀏覽器內(nèi)核(例如、IE內(nèi)核等)的客戶端應(yīng)用。內(nèi)容呈現(xiàn)設(shè)備100可以涵蓋這些應(yīng)用，所有可以呈現(xiàn)網(wǎng)絡(luò)頁(yè)面的客戶端應(yīng)用都在本發(fā)明的保護(hù)范圍之內(nèi)。

內(nèi)容呈現(xiàn)設(shè)備100可以在呈現(xiàn)區(qū)域110呈現(xiàn)內(nèi)容呈現(xiàn)設(shè)備100所接收的內(nèi)容。內(nèi)容呈現(xiàn)設(shè)備100除了呈現(xiàn)一般的內(nèi)容，例如HTML格式的網(wǎng)頁(yè)內(nèi)容之外，還適于圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的連接關(guān)系。很多適于呈現(xiàn)的結(jié)構(gòu)都可以表述為對(duì)象以及對(duì)象之間的連接關(guān)系。例如，在網(wǎng)管領(lǐng)域中，網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)可以表述為各個(gè)網(wǎng)絡(luò)單元以及網(wǎng)絡(luò)單元之間的連接關(guān)系；在數(shù)據(jù)庫(kù)領(lǐng)域中，數(shù)據(jù)庫(kù)中表格之間的關(guān)聯(lián)同樣可以表示為各個(gè)數(shù)據(jù)表以及這些數(shù)據(jù)表之間的關(guān)聯(lián)關(guān)系。因此，如何在內(nèi)容呈現(xiàn)設(shè)備中以便利的方式來(lái)呈現(xiàn)這種對(duì)象和對(duì)象之間的連接關(guān)系具有非常普遍的應(yīng)用。內(nèi)容呈現(xiàn)設(shè)備100包括頁(yè)面布局部件120，適于在內(nèi)容呈現(xiàn)設(shè)備100的呈現(xiàn)區(qū)域110中定義專門(mén)用于圖形化呈現(xiàn)這些對(duì)象和對(duì)象之間的連接關(guān)系的對(duì)象呈現(xiàn)區(qū)域112?？蛇x地，對(duì)象呈現(xiàn)區(qū)域112可以在呈現(xiàn)區(qū)域100中被拉伸、壓縮和移動(dòng)，并且還可以跟隨呈現(xiàn)區(qū)域而移動(dòng)。一般來(lái)說(shuō)，當(dāng)對(duì)象呈現(xiàn)區(qū)域112的位置或者大小發(fā)生改變時(shí)，對(duì)象呈現(xiàn)區(qū)域112中所呈現(xiàn)的內(nèi)容也應(yīng)當(dāng)相應(yīng)發(fā)生改變，這將在下文中進(jìn)行詳細(xì)描述。內(nèi)容呈現(xiàn)設(shè)備100還包括位置確定部件130，用于根據(jù)所定義的一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的對(duì)象關(guān)系來(lái)確定這些對(duì)象和對(duì)象關(guān)系在對(duì)象呈現(xiàn)區(qū)域112中的位置。具體而言，每個(gè)對(duì)象都可以由一個(gè)或者多個(gè)屬性來(lái)定義。可選地，這些屬性包括對(duì)象的初始大小(例如長(zhǎng)度和寬度)和對(duì)象的初始位置等。例如，一個(gè)對(duì)象可以具有如下屬性:
top:1Opx;left:1Opx;width:50px;height:80px;ID:object I上述屬性說(shuō)明了 ID為objectl的對(duì)象具有50像素的寬度和80像素的寬度，并且其左上角在對(duì)象呈現(xiàn)區(qū)域112的坐標(biāo)系中具有坐標(biāo)(10，10)。在諸如網(wǎng)絡(luò)瀏覽器之類的客戶端呈現(xiàn)設(shè)備中，一般將包括呈現(xiàn)區(qū)域110和對(duì)象呈現(xiàn)區(qū)域112在內(nèi)的各種區(qū)域的原點(diǎn)設(shè)置在左上角，X軸向右延伸且Y軸向下延伸。
應(yīng)當(dāng)注意的是，上面對(duì)象的這些大小和尺寸定義是相對(duì)于對(duì)象呈現(xiàn)區(qū)域110定義的，由于對(duì)象呈現(xiàn)區(qū)域112僅僅為呈現(xiàn)區(qū)域110的一部分，對(duì)象最終要在呈現(xiàn)區(qū)域110中呈現(xiàn)，因此為了在呈現(xiàn)區(qū)域110中合適地呈現(xiàn)對(duì)象，必須要根據(jù)對(duì)象的相對(duì)初始大小和對(duì)象的相對(duì)初始位置來(lái)計(jì)算對(duì)象在對(duì)象區(qū)域110中的絕對(duì)大小和位置?？蛇x地，對(duì)象的初始位置利用相對(duì)比例坐標(biāo)來(lái)定義。比例坐標(biāo)的值為對(duì)象在對(duì)象呈現(xiàn)區(qū)域102中的絕對(duì)值和對(duì)象呈現(xiàn)區(qū)域大小的比例。例如，假定對(duì)象呈現(xiàn)區(qū)域的寬度是W個(gè)像素，高度是H個(gè)像素，則相對(duì)于對(duì)象呈現(xiàn)區(qū)域的上邊界距離為Y個(gè)像素，距離左邊界為X個(gè)像素的節(jié)點(diǎn)的比例坐標(biāo)(Xp，Yp)可以定義為:
Xp = X * 100 / WYp = Y * 100 / H
其中，值100意味著比例坐標(biāo)值以百分比計(jì)算。隨后，當(dāng)在呈現(xiàn)區(qū)域中呈現(xiàn)該節(jié)點(diǎn)時(shí)，可以根據(jù)下面的公式將對(duì)象的比例坐標(biāo)(Xp, Yp)換算成相對(duì)于呈現(xiàn)區(qū)域的絕對(duì)坐標(biāo)(Xa，Yp)
Xa = (Xp * W / 1 00) + XeYa = (Yp * H / 100) + Yc,
其中Xe和Yc分別為對(duì)象呈現(xiàn)區(qū)域112的左上角在呈現(xiàn)區(qū)域中的絕對(duì)坐標(biāo)值。位置確定部件130可以利用上述轉(zhuǎn)換方式為每個(gè)對(duì)象確定其絕對(duì)坐標(biāo)值。在為每個(gè)對(duì)象確定其絕對(duì)坐標(biāo)值后，位置確定部件130還可以為每個(gè)對(duì)象關(guān)系來(lái)確定其坐標(biāo)。對(duì)象關(guān)系可以涉及兩個(gè)或者跟多個(gè)對(duì)象，因此，對(duì)象關(guān)系可以由所涉及的對(duì)象來(lái)定義?？蛇x地，對(duì)象關(guān)系可以定義如下:
〈relation name=relationl from=objectl to=object2 />
其中定義了該對(duì)象關(guān)系relationl從對(duì)象objectl指向object2。對(duì)象關(guān)系可以由從一個(gè)對(duì)象指向另一個(gè)對(duì)象的連線來(lái)表述。或者，當(dāng)對(duì)象關(guān)系涉及超過(guò)多個(gè)對(duì)象時(shí)，可以由連接這些對(duì)象的星形連線來(lái)表示對(duì)象關(guān)系。因此，位置確定部件130需要為每個(gè)對(duì)象關(guān)系確定這些連線的起點(diǎn)和終點(diǎn)。可選地，可以把對(duì)象關(guān)系的起點(diǎn)和終點(diǎn)確定為對(duì)象關(guān)系所涉及對(duì)象的中心位置。例如，在對(duì)象的左上角坐標(biāo)為(Xa, Ya),其寬度和長(zhǎng)度分別為Wa和La時(shí),對(duì)象中心位置處的坐標(biāo)為(Xa+ffa/2, Ya+La/2)。內(nèi)容呈現(xiàn)設(shè)備100還包括圖形繪制部件140。圖形繪制部件140接收由位置確定部件130確定的每個(gè)對(duì)象的絕對(duì)坐標(biāo)和每個(gè)對(duì)象關(guān)系所對(duì)應(yīng)的連線的起點(diǎn)和終點(diǎn)坐標(biāo)，然后在對(duì)象呈現(xiàn)區(qū)域112中繪制這些對(duì)象和對(duì)象關(guān)系。圖形繪制部件140首先在對(duì)象呈現(xiàn)區(qū)域112中繪制對(duì)象關(guān)系，當(dāng)對(duì)象關(guān)系涉及兩個(gè)對(duì)象時(shí)，對(duì)象關(guān)系可以被繪制為從一個(gè)對(duì)象中心到另一個(gè)對(duì)象中心的連線。而當(dāng)對(duì)象關(guān)系涉及到三個(gè)或者更多對(duì)象時(shí)，這可以繪制連接所涉及對(duì)象的對(duì)象中心的星形線。例如，可以首先根據(jù)這些對(duì)象中心的坐標(biāo)來(lái)確定星形的中心位置，然后繪制從星形中心到各個(gè)對(duì)象中心的連線。應(yīng)當(dāng)注意的是，本發(fā)明不局限于這些星形線連接方式，所以可以將多個(gè)對(duì)象中心連接在一起的方式都在本發(fā)明的保護(hù)范圍之內(nèi)。圖2示出了在由圖形繪制部件140繪制了對(duì)象關(guān)系之后的示意圖。如圖2所示，此時(shí)在對(duì)象呈現(xiàn)區(qū)域112中已經(jīng)繪制了各種連線。隨后，圖形繪制部件140根據(jù)由位置確定部件所確定的每個(gè)對(duì)象的絕對(duì)位置，在對(duì)象呈現(xiàn)區(qū)域112中繪制每個(gè)對(duì)象。由于連線連接的都是對(duì)象中心的位置，因此當(dāng)繪制對(duì)象時(shí)，對(duì)象就疊加在連線上。圖3示出了由圖形繪制部件140繪制了對(duì)象和對(duì)象關(guān)系之后的示意圖。如圖3所示，對(duì)象疊加在連線之上。應(yīng)當(dāng)注意的是，雖然在上述實(shí)施例中描述了先繪制連接后繪制對(duì)象的過(guò)程，但是只要對(duì)象疊加在連接之上，二者的順序是可以任意的。可選地，圖形繪制部件140可以在繪制對(duì)象和對(duì)象關(guān)系之前，首先在呈現(xiàn)區(qū)域110中繪制對(duì)象呈現(xiàn)區(qū)域112。在圖1所示的內(nèi)容呈現(xiàn)設(shè)備100中，首先由頁(yè)面布局部件120定義專門(mén)來(lái)呈現(xiàn)對(duì)象和對(duì)象關(guān)系的對(duì)象呈現(xiàn)區(qū)域，然后由位置確定部件130根據(jù)對(duì)象事先定義的相對(duì)坐標(biāo)來(lái)確定呈現(xiàn)對(duì)象的絕對(duì)坐標(biāo)，并將對(duì)象關(guān)系確定為連接相關(guān)聯(lián)對(duì)象中心的連線，最后由圖形繪制部件140來(lái)分別繪制這些連線和對(duì)象，以使得對(duì)象疊加在連線之上，從而以圖形化方式來(lái)呈現(xiàn)這些對(duì)象和相應(yīng)的對(duì)象關(guān)系。內(nèi)容呈現(xiàn)設(shè)備100提供了一種以較為方便的方式來(lái)圖形化地呈現(xiàn)對(duì)象拓?fù)浣Y(jié)構(gòu)?？蛇x地，對(duì)象呈現(xiàn)區(qū)域112可以在呈現(xiàn)區(qū)域110中移動(dòng)以及進(jìn)行縮放(例如，可以基于內(nèi)容呈現(xiàn)設(shè)備100的用戶的指示來(lái)進(jìn)行)，也就是說(shuō)對(duì)象呈現(xiàn)區(qū)域112的左上角坐標(biāo)、寬度和長(zhǎng)度都可以發(fā)生改變。而當(dāng)對(duì)象呈現(xiàn)區(qū)域112的位置或者大小發(fā)生改變時(shí)，位置確定部件130為每個(gè)對(duì)象和對(duì)象關(guān)系重新計(jì)算絕對(duì)位置，然后圖形繪制部件140根據(jù)新計(jì)算的位置值來(lái)重新呈現(xiàn)各個(gè)對(duì)象和對(duì)象關(guān)系。因此，所呈現(xiàn)的對(duì)象及其對(duì)象關(guān)系可以自動(dòng)適應(yīng)不同的頁(yè)面尺寸。即使這些對(duì)象及其對(duì)象關(guān)系在具有不同分辨率的顯示器(顯示器的分辨率決定了呈現(xiàn)區(qū)域的尺寸)顯示，或者在使用過(guò)程中改變對(duì)象呈現(xiàn)區(qū)域的尺寸，也能得到相同的效果。圖4A-4C示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的有關(guān)對(duì)象呈現(xiàn)區(qū)域進(jìn)行縮放的示意圖。圖4A示出了根據(jù)本發(fā)明一個(gè)實(shí)施例、在對(duì)象呈現(xiàn)區(qū)域呈現(xiàn)了各個(gè)對(duì)象和對(duì)象關(guān)系的示意圖。圖4A以網(wǎng)絡(luò)節(jié)點(diǎn)和網(wǎng)絡(luò)節(jié)點(diǎn)之間的關(guān)系，即網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)為例進(jìn)行了說(shuō)明。圖4B示出了在對(duì)象呈現(xiàn)區(qū)域沿寬度方向增加1.5倍時(shí)，如果不對(duì)對(duì)象呈現(xiàn)區(qū)域中的網(wǎng)絡(luò)拓?fù)溥M(jìn)行更新時(shí)的圖示。圖4C示出了根據(jù)本發(fā)明的一個(gè)實(shí)施例，當(dāng)對(duì)象呈現(xiàn)區(qū)域沿寬度方向增加1.5倍時(shí)，相應(yīng)對(duì)對(duì)象呈現(xiàn)區(qū)域中的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)進(jìn)行更新后的圖示。如圖4A-4C所示，如果對(duì)象呈現(xiàn)區(qū)域的大小或者位置發(fā)生了改變，如果不更新對(duì)象呈現(xiàn)區(qū)域中所呈現(xiàn)的內(nèi)容，則會(huì)使得顯示效果欠佳。而本發(fā)明的內(nèi)容呈現(xiàn)設(shè)備100中采用了相對(duì)的比例坐標(biāo)來(lái)定義對(duì)象和對(duì)象關(guān)系，因此可以方便地根據(jù)對(duì)象呈現(xiàn)區(qū)域的坐標(biāo)來(lái)更新對(duì)象和對(duì)象關(guān)系的坐標(biāo)，并進(jìn)行重新呈現(xiàn)?？蛇x地，內(nèi)容呈現(xiàn)設(shè)備100的用戶可以對(duì)所呈現(xiàn)的對(duì)象和/或?qū)ο箨P(guān)系進(jìn)行操作。例如，用戶可以修改對(duì)象的屬性、移動(dòng)對(duì)象位置、修改對(duì)象關(guān)系、在對(duì)象之間添加新的關(guān)聯(lián)或者刪除已有關(guān)聯(lián)等等。為此，內(nèi)容呈現(xiàn)設(shè)備100還可以包括用戶接口 150，適于接收用戶有關(guān)這些對(duì)象和/或?qū)ο箨P(guān)系的操作。而類似上述，在用戶進(jìn)行上述操作之后，位置確定部件130可以基于用戶操作來(lái)重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，而且圖形繪制部件140可以重新在對(duì)象呈現(xiàn)區(qū)域中呈現(xiàn)這些對(duì)象。另外，如前所述，每個(gè)對(duì)象都有相應(yīng)的屬性。每個(gè)對(duì)象除了相應(yīng)的位置和大小屬性之外，還可以包括對(duì)象的描述以及對(duì)象的圖標(biāo)等等之類的屬性。在圖形繪制部件140繪制對(duì)象時(shí)，可以考慮同時(shí)呈現(xiàn)對(duì)象的描述以及代表對(duì)象的對(duì)象圖標(biāo)?？蛇x地，內(nèi)容呈現(xiàn)設(shè)備100可以采用HTML5來(lái)呈現(xiàn)對(duì)象的拓?fù)浣Y(jié)構(gòu)。HTML5是由W3C制定的最新網(wǎng)頁(yè)呈現(xiàn)標(biāo)準(zhǔn)，可以方便地在網(wǎng)絡(luò)瀏覽器中進(jìn)行動(dòng)態(tài)呈現(xiàn)。當(dāng)然，內(nèi)容呈現(xiàn)設(shè)備100可以不僅僅受限于采用HTML5，將來(lái)可能出現(xiàn)的、與HTML5兼容的格式都在本發(fā)明的保護(hù)范圍之內(nèi)。當(dāng)內(nèi)容呈現(xiàn)設(shè)備100采用HTML5來(lái)進(jìn)行拓?fù)浣Y(jié)構(gòu)呈現(xiàn)時(shí)，頁(yè)面布局部件120可以采用HTML 5中的canvas元素來(lái)定義對(duì)象呈現(xiàn)區(qū)域112。圖形繪制部件140則可以利用javascript中的相關(guān)函數(shù)(例如，包括但不限于，moveTo(X，y)，IineTo (x, y)，stroke O等)在canvas元素所定義的區(qū)域中繪制連線來(lái)代表對(duì)象之間的連接關(guān)系。另外，圖形繪制部件利用HTML中的div元素來(lái)定義和呈現(xiàn)對(duì)象。圖5示出了利用div元素所定義的對(duì)象的示意圖。如圖5所示，一個(gè)對(duì)象可以利用一個(gè)或者多個(gè)div來(lái)定義，其中對(duì)象的外部實(shí)線部分由一個(gè)div來(lái)定義，該div元素除了定義對(duì)象的大小和位置之外，還具有屬性z-1ndex來(lái)定義該對(duì)象在canvas中的層,而在html中層是個(gè)抽象概念，當(dāng)兩個(gè)元素的位置重疊時(shí),z-1ndex屬性大的元素會(huì)覆蓋z-1ndex小的元素。因此，通過(guò)為對(duì)象的div中的屬性z-1ndex賦予一個(gè)較大的值，可以確保該對(duì)象覆蓋在對(duì)象關(guān)系的連線之上。可選地，在每個(gè)對(duì)象內(nèi)容，可以例如以另一個(gè)div來(lái)定義在實(shí)線所劃出內(nèi)部上方的虛線部分，在該部分中，div定義了對(duì)象的圖標(biāo)。另外，在實(shí)線劃出部分下方的虛線部分可以用div來(lái)定義，在該部分中，定義了該對(duì)象的描述。圖5所示的對(duì)象可以利用下面的div元素來(lái)定義:
權(quán)利要求
1.一種內(nèi)容呈現(xiàn)設(shè)備，適于圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的連接關(guān)系，該內(nèi)容呈現(xiàn)設(shè)備包括: 頁(yè)面布局部件，適于在所述內(nèi)容呈現(xiàn)設(shè)備中定義用于圖形化呈現(xiàn)的區(qū)域； 位置確定部件，適于根據(jù)一個(gè)或者多個(gè)對(duì)象中每個(gè)對(duì)象的屬性來(lái)確定相應(yīng)對(duì)象在所定義區(qū)域中的位置，根據(jù)每個(gè)對(duì)象的位置來(lái)確定一個(gè)或者多個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)在所定義區(qū)域中的位置；以及 圖形繪制部件，適于根據(jù)每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的位置在所定義區(qū)域中繪制連接每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的連線，并在所定義區(qū)域中繪制每個(gè)對(duì)象，其中所述對(duì)象疊加在所述連線之上。
2.如權(quán)利要求1所述的內(nèi)容呈現(xiàn)設(shè)備，其中所述一個(gè)或者多個(gè)對(duì)象中的每個(gè)對(duì)象的屬性包括對(duì)象的大小、對(duì)象在所定義區(qū)域中的初始位置、對(duì)象描述和對(duì)象的圖標(biāo)等中的一個(gè)或者多個(gè)，而且所述一個(gè)或者多個(gè)連接關(guān)系中的每個(gè)連接關(guān)系由連接關(guān)系所涉及的對(duì)象來(lái)定義。
3.如權(quán)利要求1或者2所述的內(nèi)容呈現(xiàn)設(shè)備，其中所述頁(yè)面布局部件所定義的區(qū)域可以在所述內(nèi)容呈現(xiàn)設(shè)備中移動(dòng)或者縮放，以及 當(dāng)所定義的區(qū)域移動(dòng)或者縮放時(shí)，所述位置確定部件重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，以及所述圖形繪制部件重新在所定義區(qū)域中繪制所述對(duì)象和對(duì)應(yīng)于連接關(guān)系的連線。
4.如權(quán)利要求1-3中任一個(gè)所述的內(nèi)容呈現(xiàn)設(shè)備，還包括用戶接口，適于接收用戶對(duì)所述一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)連接關(guān)系的操作，以及 所述位置確定部件基于所述 用戶操作來(lái)重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，以及所述圖形繪制部件重新在所定義區(qū)域中繪制所述對(duì)象和對(duì)應(yīng)于連接關(guān)系的連線。
5.如權(quán)利要求1-4中任一個(gè)所述的內(nèi)容呈現(xiàn)設(shè)備，其中所述內(nèi)容呈現(xiàn)設(shè)備適于采用與HTML5兼容的呈現(xiàn)方式，頁(yè)面布局部件適于采用HTML中的Canvas元素來(lái)定義所述區(qū)域，以及所述圖形繪制部件適于采用HTML中的Div元素來(lái)定義所述一個(gè)或者多個(gè)對(duì)象并在所定義區(qū)域中呈現(xiàn)所述對(duì)象。
6.如權(quán)利要求5所述的內(nèi)容呈現(xiàn)設(shè)備，其中對(duì)于每個(gè)對(duì)象，所述圖形繪制部件利用第一 Div元素來(lái)定義該對(duì)象的大小和位置，利用第二 Div元素定義對(duì)應(yīng)于該對(duì)象的圖標(biāo)，以及利用第三Div元素定義對(duì)應(yīng)于該對(duì)象的對(duì)象描述，其中所述第二 Div元素和第三元素包含在第一 Div元素中。
7.一種內(nèi)容呈現(xiàn)方法，適于圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的連接關(guān)系，該方法包括: 在內(nèi)容呈現(xiàn)設(shè)備中定義用于圖形化呈現(xiàn)的區(qū)域； 根據(jù)一個(gè)或者多個(gè)對(duì)象中每個(gè)對(duì)象的屬性來(lái)確定相應(yīng)對(duì)象在所定義區(qū)域中的位置，根據(jù)每個(gè)對(duì)象的位置來(lái)確定一個(gè)或者多個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)在所定義區(qū)域中的位置；以及 根據(jù)每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的位置在所定義區(qū)域中繪制連接每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的連線，并在所定義區(qū)域中繪制每個(gè)對(duì)象，其中所述每個(gè)對(duì)象疊加在所述連線之上。
8.如權(quán)利要求7所述的內(nèi)容呈現(xiàn)方法，其中所述一個(gè)或者多個(gè)對(duì)象中的每個(gè)對(duì)象的屬性包括對(duì)象的大小、對(duì)象在所定義區(qū)域中的初始位置、對(duì)象描述和對(duì)象圖標(biāo)等中的一個(gè)或者多個(gè)，而且所述一個(gè)或者多個(gè)連接關(guān)系中的每個(gè)連接關(guān)系由連接關(guān)系所涉及的對(duì)象來(lái)定義。
9.如權(quán)利要求7或者8所述的內(nèi)容呈現(xiàn)方法，其中所定義的區(qū)域可以在所述內(nèi)容呈現(xiàn)設(shè)備中移動(dòng)或者縮放，以及該方法還包括: 當(dāng)所定義的區(qū)域移動(dòng)或者縮放時(shí)，重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，以及重新在所定義區(qū)域中繪制所述對(duì)象和對(duì)應(yīng)于連接關(guān)系的連線。
10.如權(quán)利要求7-9中任一個(gè)所述的內(nèi)容呈現(xiàn)方法，還包括:接收用戶對(duì)所述一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)連接關(guān)系的操作，以及 基于所述用戶操作來(lái)重新確定每個(gè)對(duì)象的位置以及每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)位置，以及重新在所定義區(qū)域中繪制所述對(duì)象和對(duì)應(yīng)于連接關(guān)系的連線。
11.如權(quán)利要求7-10中任一個(gè)所述的內(nèi)容呈現(xiàn)方法，其中采用與HTML5兼容的呈現(xiàn)方式來(lái)圖形化地呈現(xiàn)一個(gè)或者多個(gè)對(duì)象以及一個(gè)或者多個(gè)這些對(duì)象之間的連接關(guān)系，采用HTML中的Canvas元素來(lái)定義所述區(qū)域，以及采用HTML中的Div元素來(lái)定義所述一個(gè)或者多個(gè)對(duì)象并在所定義區(qū)域中呈現(xiàn)所述對(duì)象。
12.如權(quán)利要求11所述的內(nèi)容呈現(xiàn)方法，其中采用HTML中的Div元素來(lái)定義所述一個(gè)或者多個(gè)對(duì)象包括: 對(duì)于每個(gè)對(duì)象， 利用第一 Div元素來(lái)定義該對(duì)象的大小和位置； 利用第二 Div元素定義對(duì)應(yīng)于該對(duì)象的圖標(biāo)；以及 利用第三Div元素定義對(duì)應(yīng)于該對(duì)象的對(duì)象描述， 其中所述第二 Div元 素和第三元素包含在第一 Div元素中。
全文摘要
本發(fā)明公開(kāi)了一種適于圖形化地呈現(xiàn)對(duì)象拓?fù)浣Y(jié)構(gòu)的內(nèi)容呈現(xiàn)設(shè)備，其包括頁(yè)面布局部件，適于定義用于圖形化呈現(xiàn)的區(qū)域；位置確定部件，適于根據(jù)每個(gè)對(duì)象的屬性來(lái)確定相應(yīng)對(duì)象在所定義區(qū)域中的位置，根據(jù)每個(gè)對(duì)象的位置來(lái)確定一個(gè)或者多個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)在所定義區(qū)域中的位置；以及圖形繪制部件，適于根據(jù)每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的位置在所定義區(qū)域中繪制連接每個(gè)連接關(guān)系的起點(diǎn)和終點(diǎn)的連線，并在所定義區(qū)域中繪制每個(gè)對(duì)象，其中所述對(duì)象疊加在所述連線之上。本發(fā)明還涉及相應(yīng)的內(nèi)容呈現(xiàn)方法。
文檔編號(hào)G06F17/30GK103176993SQ20111043233
公開(kāi)日2013年6月26日 申請(qǐng)日期2011年12月21日 優(yōu)先權(quán)日2011年12月21日
發(fā)明者張磊 申請(qǐng)人:北京神州綠盟信息安全科技股份有限公司