一種基于畫布Canvas的拓?fù)鋱D生成方法及裝置制造方法
【專利摘要】本發(fā)明提出了一種基于畫布Canvas的拓?fù)鋱D生成方法及裝置，該方法和裝置包括：使用舞臺生成器，根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境；并基于該舞臺環(huán)境制造一個或多個承載圖元的圖形基本容器；該圖元放置在圖元樹中，可被拖動到所述圖形基本容器中的任意位置；使用布局結(jié)構(gòu)控制器控制圖形基本容器中拓?fù)鋱D的結(jié)構(gòu)，使圖元按照一定的順序排列和組合；并設(shè)置圖元的圖元屬性。通過本發(fā)明的方案，有效地解決了插件不兼容的問題，并且開發(fā)方式更簡單。
【專利說明】—種基于Ilj布Canvas的拓?fù)鋱D生成方法及裝置

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計算機(jī)軟件領(lǐng)域，尤其涉及一種基于畫布Canvas的拓?fù)鋱D生成方法及裝置。

【背景技術(shù)】
[0002]在超文本標(biāo)記語言HTML5出現(xiàn)以后，Canvas得到了極大的發(fā)展。HTML5的畫布Canvas元素使用解釋型語言Javascript在網(wǎng)頁上繪制圖像。在Canvas出現(xiàn)之前，圖形的生成基本都是依賴于圖片或者使用Flash。然而使用圖片的方式及其復(fù)雜且很難實(shí)現(xiàn)交互，圖片大都以靜態(tài)的方式展現(xiàn)；而Flash雖然美觀，但Flash是使用的另一種語言生成的，在HTML中使用的話，需要單獨(dú)加載并且效率底下，若不支持Flash則無法在網(wǎng)頁上查看圖形。目前，Canvas標(biāo)簽被很多工程師認(rèn)為是HTML5最偉大的改進(jìn)之一，因?yàn)樗梢宰屛覀冊诓皇褂脠D片的情況下實(shí)現(xiàn)網(wǎng)頁的圖形設(shè)計。Canvas元素是為了客戶端點(diǎn)陣圖形而設(shè)計的，它自己沒有行為能力，但卻把一個繪圖API展現(xiàn)給客戶端JavaScript以使腳本能夠把想繪制的東西都繪制到一塊畫布上。Canvas標(biāo)記由蘋果Apple在瀏覽器Safari 1.3網(wǎng)頁Web瀏覽器中引入。對HTML的這一根本擴(kuò)展的原因在于，HTML在Safari中的繪圖能力也為麥金塔Mac OS X桌面的儀表板Dashboard組件所使用，并且Apple希望有一種方式在Dashboard中支持腳本化的圖形。火狐Firefox 1.5和歐鵬Opera 9都跟隨了 Safari的引領(lǐng),這兩個瀏覽器都支持Canvas標(biāo)記?，F(xiàn)在我們甚至可以在網(wǎng)絡(luò)瀏覽器IE中使用Canvas標(biāo)記，并在IE的矢量可標(biāo)記語言VML支持的基礎(chǔ)上用開源的JavaScript代碼(由谷歌Google發(fā)起)來構(gòu)建兼容性的畫布。Canvas的標(biāo)準(zhǔn)化的努力由一個Web瀏覽器廠商的非正式協(xié)會在推進(jìn)，目前Canvas已經(jīng)成為HTML5草案中一個正式的標(biāo)簽。
[0003]拓?fù)鋱D的實(shí)現(xiàn)方式多樣，目前，在瀏覽器中使用拓?fù)鋱D大都是基于各種應(yīng)用插件或者基于閃存Flash,純使用Javascript開發(fā)的非常稀少。如果可以使用Javascript開發(fā)拓?fù)鋱D，就可以使得拓?fù)鋱D更加流暢和通用，不必再限制于插件或者語言，基于Javascript開發(fā)拓?fù)鋱D還可以簡化開發(fā)語言，只使用Javascript便可以完成開發(fā)，而且從編譯上還是應(yīng)用上都可極大的提高效率。目前基于Javascript開發(fā)的拓?fù)鋱D已經(jīng)有了一些開發(fā)，但都不能有效解決插件不兼容的問題，并且開發(fā)方式不夠簡單。


【發(fā)明內(nèi)容】

[0004]為了解決上述問題，本發(fā)明提出了一種基于畫布Canvas的拓?fù)鋱D生成方法及裝置，解決了插件不兼容的問題，并且開發(fā)方式更簡單。
[0005]為了達(dá)到上述目的，本發(fā)明提出了一種基于畫布Canvas的拓?fù)鋱D生成方法，所述方法包括:
[0006]使用舞臺生成器，根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境。
[0007]基于所述舞臺環(huán)境，制造一個或多個圖形基本容器，承載所述拓?fù)鋱D所需的圖元。
[0008]使用布局結(jié)構(gòu)控制器控制所述圖形基本容器中所述拓?fù)鋱D的結(jié)構(gòu)，使得預(yù)先拖動到所述圖形基本容器中的圖元按照一定的順序排列和組合。
[0009]設(shè)置所述圖元的圖元屬性。
[0010]優(yōu)選地，所述圖元被拖動前放置在圖元樹中，所述圖元樹的結(jié)構(gòu)具有層次性和邏輯性，同一類別的圖元放在所述圖元樹的同一層中，所述圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
[0011]優(yōu)選地,所述圖元樹使用解釋型語言Javascript的樹插件定義所述圖元樹的結(jié)構(gòu)，所述插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的所述Javascript的樹插件。
[0012]優(yōu)選地，所述使用布局結(jié)構(gòu)控制器控制所述圖形基本容器的結(jié)構(gòu)，使得所述圖元按照一定的順序排列和組合是指:在將所有的圖元都放在所述圖形基本容器中后，從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的控制屬性對所述圖元進(jìn)行刪除或位移，確定所述拓?fù)鋱D的布局結(jié)構(gòu)；從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的連線方式，將所述場景中的所述圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。
[0013]優(yōu)選地，設(shè)置所述圖元的圖元屬性是指:每個所述圖元都具有相應(yīng)的屬性，通過放置在圖元屬性數(shù)組中的屬性框來設(shè)置所述圖元的圖元屬性；并且所述屬性框被放置在同一個或不同的所述圖元屬性數(shù)組中。
[0014]本發(fā)明還提出一種基于畫布Canvas的拓?fù)鋱D生成裝置，所述裝置包括:舞臺生成器、圖形基本容器、布局結(jié)構(gòu)控制器。
[0015]所述舞臺生成器，用于根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境。
[0016]所述圖形基本容器，用于承載所述拓?fù)鋱D所需的所述圖元；基于所述舞臺環(huán)境而制造，每個所述舞臺環(huán)境包括一個或多個所述圖形基本容器。
[0017]所述布局結(jié)構(gòu)控制器，用于控制所述圖形基本容器中所述拓?fù)鋱D的結(jié)構(gòu)，使得所述圖元按照一定的順序排列和組合。
[0018]優(yōu)選地，所述圖元被拖動前保存在圖元樹中；所述圖元樹的結(jié)構(gòu)具有層次性和邏輯性，在所述圖元樹的同一層中放置同一類別的圖元，所述圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
[0019]優(yōu)選地,所述圖元樹使用解釋型語言Javascript的樹插件定義所述圖元樹的結(jié)構(gòu)，所述插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的所述Javascript的樹插件。
[0020]優(yōu)選地，所述布局結(jié)構(gòu)控制器具體用于:在將所有的圖元都放在所述圖形基本容器中后，從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的控制屬性對所述圖元進(jìn)行刪除或位移，確定所述拓?fù)鋱D的布局結(jié)構(gòu)；從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的連線方式，將所述場景中的所述圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。
[0021]優(yōu)選地，所述屬性框被放置在圖元屬性數(shù)組中；所述屬性框所代表的屬性是可自定義的并且所述屬性框被放置在同一個或不同的所述圖元屬性數(shù)組中。
[0022]與現(xiàn)有技術(shù)相比，本發(fā)明包括:使用舞臺生成器根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境；并基于該舞臺環(huán)境制造一個或多個承載該圖元的圖形基本容器；該圖元放置在圖元樹中，可被拖動到所述圖形基本容器中的任意位置；使用布局結(jié)構(gòu)控制器控制圖形基本容器中拓?fù)鋱D的結(jié)構(gòu)，使圖元按照一定的順序排列和組合；并設(shè)置圖元的圖元屬性。通過本發(fā)明的方案，有效地解決了插件不兼容的問題，并且開發(fā)方式更簡單。

【專利附圖】

【附圖說明】
[0023]下面對本發(fā)明實(shí)施例中的附圖進(jìn)行說明，實(shí)施例中的附圖是用于對本發(fā)明的進(jìn)一步理解，與說明書一起用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明保護(hù)范圍的限制。
[0024]圖1為本發(fā)明基于畫布Canvas的拓?fù)鋱D生成方法流程圖；
[0025]圖2為本發(fā)明基于畫布Canvas的拓?fù)鋱D生成裝置結(jié)構(gòu)圖。

【具體實(shí)施方式】
[0026]為了便于本領(lǐng)域技術(shù)人員的理解，下面結(jié)合附圖對本發(fā)明作進(jìn)一步的描述，并不能用來限制本發(fā)明的保護(hù)范圍。
[0027]本發(fā)明利用畫布Canvas制圖的特點(diǎn),對Canvas進(jìn)行層次化和點(diǎn)線化,將圖形輸出到Canvas上?；贑anvas強(qiáng)大的繪圖能力，采用以數(shù)據(jù)組成圖形的方法，大大提高了圖形的效率，實(shí)現(xiàn)以點(diǎn)和線表現(xiàn)圖形的方式，避免了使用大型圖形工具帶來的低效率和高存儲的問題。
[0028]本發(fā)明提出了一種基于畫布Canvas的拓?fù)鋱D生成方法，如圖1所示,該方法包括以下步驟:
[0029]步驟S101，使用舞臺生成器，根據(jù)Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺Stage環(huán)境。
[0030]該舞臺就是承載基本元素的地方，相當(dāng)于繼承Canvas屬性的一個具體化的Canvas,是 Canvas 的實(shí)例。
[0031]步驟S102,基于所述舞臺環(huán)境,制造一個或多個圖形基本容器Container,承載所述拓?fù)鋱D所需的圖元。
[0032]該Container，或者稱為場景，基于舞臺生成器，并繼承舞臺生成器的基本屬性。
[0033]我們要制作的拓?fù)鋱D及其動作，就是一個場景，一個舞臺上可以有多個場景，它是舞臺Stage的實(shí)例化?？梢圆欢xContainer而直接使用Stage,但這樣對層次定義不明確，不建議這樣定義。
[0034]圖形基本容器Container創(chuàng)建之后，從圖元樹中找到所需的不同的圖元,拖動到所述圖形基本容器中的任意位置。
[0035]圖元樹生成基本的拓?fù)鋱D圖元，是拓?fù)鋱D的基本組成單位,可以從圖元樹上將不同的圖元拖動到拓?fù)鋱D中。
[0036]優(yōu)選地，圖元被拖動前被保存在自定義的圖元樹中，該圖元樹的結(jié)構(gòu)具有層次性和邏輯性，同一類別的圖元放在圖元樹的同一層中，圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
[0037]優(yōu)選地，該圖元樹使用解釋型語言Javascript的樹插件定義圖元樹的結(jié)構(gòu)，該插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的Javascript的樹插件。通過圖元樹來控制節(jié)點(diǎn)是一種很快捷高效的方法。通常拓?fù)鋱D都是將幾個固定的圖標(biāo)放在拓?fù)鋱D的一側(cè)來使用，但這樣缺少層次和邏輯。
[0038]步驟S103，使用布局結(jié)構(gòu)控制器控制所述圖形基本容器中所述拓?fù)鋱D的結(jié)構(gòu)，使得預(yù)先拖動到所述圖形基本容器中的所述圖元按照一定的順序排列和組合。
[0039]具體地，在將所有的圖元都放在圖形基本容器中后，從布局結(jié)構(gòu)控制器中選擇相應(yīng)的控制屬性對圖元進(jìn)行刪除或位移，確定拓?fù)鋱D的布局結(jié)構(gòu)；從布局結(jié)構(gòu)控制器中選擇相應(yīng)的連線方式，將場景中的圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。
[0040]這里通過布局結(jié)構(gòu)控制器管理拓?fù)鋱D的表現(xiàn)結(jié)構(gòu)；而且對各種不同類型的圖元進(jìn)行控制，動態(tài)生成拓?fù)鋱D。
[0041]布局結(jié)構(gòu)控制器可以控制圖形基本容器的結(jié)構(gòu)，使得基本圖元能夠按照一定的順序排列和組合，這可以使得拓?fù)鋱D更加清晰，通常手工畫出的拓?fù)鋱D結(jié)構(gòu)是隨機(jī)的，沒有任何順序，通過布局結(jié)構(gòu)控制器可以很好的管理拓?fù)鋱D的表現(xiàn)結(jié)構(gòu)。
[0042]步驟S105，設(shè)置所述圖元的圖元屬性。
[0043]具體地，每個所述圖元都具有相應(yīng)的屬性，通過放置在圖元屬性數(shù)組中的屬性框來設(shè)置所述圖元的圖元屬性；屬性框所代表的屬性是可自定義的并且屬性框被放置在同一個或不同的圖元屬性數(shù)組中。
[0044]點(diǎn)和線等不僅僅只有固定的屬性如名稱、坐標(biāo)等，可以自定義屬性，因?yàn)橐粋€圖元可以表示的內(nèi)容是多樣的，可以給圖元添加不同的屬性，只有包含屬性的圖元才是有意義的，形成的拓?fù)鋱D才能具有更明確的意義。
[0045]最后，關(guān)于拓?fù)鋱D的保存方式，可以根據(jù)環(huán)境的不同而不同，基本的方式是將當(dāng)前場景中的每一個圖元及其屬性保存在一個數(shù)組中，連線通過保存兩個圖元進(jìn)行保存，也可以在其中一個圖元中增加一個指向另一個圖元的屬性。連線可分為有向連線和無向連線，根據(jù)不同的情形使用。拓?fù)鋱D的保存可以保存圖元及其屬性，或者選擇其他的任何可實(shí)施的保存方式，這里不再詳細(xì)闡述。
[0046]本發(fā)明還提出一種基于畫布Canvas的拓?fù)鋱D生成裝置01，如圖2所示，所述裝置包括:舞臺生成器Container02、圖形基本容器03、布局結(jié)構(gòu)控制器04。
[0047]舞臺生成器02，用于根據(jù)Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺Stage環(huán)境。
[0048]該Stage就是承載基本元素的地方，相當(dāng)于繼承Canvas屬性的一個具體化的Canvas,是 Canvas 的實(shí)例。
[0049]圖形基本容器COntainer03，用于承載拓?fù)鋱D所需的圖元；基于上述舞臺環(huán)境而制造，每個舞臺環(huán)境包括一個或多個所述圖形基本容器。
[0050]該圖形基本容器03，或者稱為場景，基于舞臺生成器02，并繼承舞臺生成器02的基本屬性。
[0051]我們要制作的拓?fù)鋱D及其動作，就是一個場景，一個舞臺上可以有多個場景，它是舞臺Stage的實(shí)例化?？梢圆欢xContainer而直接使用Stage,但這樣對層次定義不明確，不建議這樣定義。
[0052]圖元樹,用于放置組成所述拓?fù)鋱D所需的不同的圖元；該圖元從圖元樹04被拖動到圖形基本容器03中的任意位置。
[0053]圖元樹生成基本的拓?fù)鋱D圖元，是拓?fù)鋱D的基本組成單位,可以從圖元樹上將不同的圖元拖動到拓?fù)鋱D中。
[0054]優(yōu)選地，圖元被放置在自定義的圖元樹中，該圖元樹的結(jié)構(gòu)具有層次性和邏輯性，同一類別的圖元放在圖元樹的同一層中，圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
[0055]優(yōu)選地，圖元樹使用解釋型語言Javascript的樹插件定義圖元樹的結(jié)構(gòu)，該插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的Javascript的樹插件。通過圖元樹來控制節(jié)點(diǎn)是一種很快捷高效的方法。通常拓?fù)鋱D都是將幾個固定的圖標(biāo)放在拓?fù)鋱D的一側(cè)來使用，但這樣缺少層次和邏輯。
[0056]所述布局結(jié)構(gòu)控制器04，用于控制所述圖形基本容器03中拓?fù)鋱D的結(jié)構(gòu)，使得圖元按照一定的順序排列和組合。
[0057]具體地，在將所有的圖元都放在圖形基本容器03中后，從布局結(jié)構(gòu)控制器04中選擇相應(yīng)的控制屬性對圖元進(jìn)行刪除或位移，確定拓?fù)鋱D的布局結(jié)構(gòu)；從布局結(jié)構(gòu)控制器04中選擇相應(yīng)的連線方式，將所述場景中的圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。從而實(shí)現(xiàn)，布局結(jié)構(gòu)控制器04管理拓?fù)鋱D的表現(xiàn)結(jié)構(gòu)；而且對各種不同類型的圖元進(jìn)行控制，動態(tài)生成拓?fù)鋱D。
[0058]布局結(jié)構(gòu)控制器04可以控制圖形基本容器03的結(jié)構(gòu)，使得基本圖元能夠按照一定的順序排列和組合，這可以使得拓?fù)鋱D更加清晰，通常手工畫出的拓?fù)鋱D結(jié)構(gòu)是隨機(jī)的，沒有任何順序，通過布局結(jié)構(gòu)控制器04可以很好的管理拓?fù)鋱D的表現(xiàn)結(jié)構(gòu)。
[0059]所述屬性框，用于設(shè)置所述圖元的圖元屬性。
[0060]具體地，所述屬性框被放置在圖元屬性數(shù)組中；屬性框所代表的屬性是可自定義的并且該屬性框被放置在同一個或不同的圖元屬性數(shù)組中。
[0061]點(diǎn)和線等不僅僅只有固定的屬性如名稱、坐標(biāo)等，可以自定義屬性，因?yàn)橐粋€圖元可以表示的內(nèi)容是多樣的，可以給圖元添加不同的屬性，只有包含屬性的圖元才是有意義的，形成的拓?fù)鋱D才能具有更明確的意義。
[0062]最后，關(guān)于拓?fù)鋱D的保存方式，可以根據(jù)環(huán)境的不同而不同，基本的方式是將當(dāng)前場景中的每一個圖元及其屬性保存在一個數(shù)組中，連線通過保存兩個圖元進(jìn)行保存，也可以在其中一個圖元中增加一個指向另一個圖元的屬性。連線可分為有向連線和無向連線，根據(jù)不同的情形使用。拓?fù)鋱D的保存可以保存圖元及其屬性，或者選擇其他的任何可實(shí)施的保存方式，這里不再詳細(xì)闡述。
[0063]本發(fā)明的有益效果是:通過圖元樹來控制圖元的添加，比直接用通用圖標(biāo)更加有效。圖元樹中，圖元有各自的屬性和名稱，雖然使用同一類圖標(biāo)，但根據(jù)圖元名稱的不同，可以先將圖元之間的關(guān)系通過一種樹形結(jié)構(gòu)定義了一次，在需要的時候直接放到拓?fù)鋱D中，方便查找和使用，而且操作上更加快捷，減少了對圖元屬性的定義，因?yàn)閳D元樹中可以預(yù)先將圖元的屬性放置在樹的節(jié)點(diǎn)中，在將其拖動到拓?fù)鋱D中時，圖元屬性一并放過去了。
[0064]本文提出的開發(fā)方法是結(jié)合多種開發(fā)方式及Canvas的基本用法提出的一種拓?fù)鋱D生成方法。有效解決了插件不兼容問題，并且使得開發(fā)方式更為簡單。
[0065]需要說明的是，以上所述的實(shí)施例僅是為了便于本領(lǐng)域的技術(shù)人員理解而已，并不用于限制本發(fā)明的保護(hù)范圍，在不脫離本發(fā)明的發(fā)明構(gòu)思的前提下，本領(lǐng)域技術(shù)人員對本發(fā)明所做出的任何顯而易見的替換和改進(jìn)等均在本發(fā)明的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種基于畫布Canvas的拓?fù)鋱D生成方法,其特征在于,所述方法包括: 使用舞臺生成器，根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境； 基于所述舞臺環(huán)境，制造一個或多個圖形基本容器，承載所述拓?fù)鋱D所需的圖元； 使用布局結(jié)構(gòu)控制器控制所述圖形基本容器中所述拓?fù)鋱D的結(jié)構(gòu)，使得預(yù)先拖動到所述圖形基本容器中的圖元按照一定的順序排列和組合； 設(shè)置所述圖元的圖元屬性。
2.如權(quán)利要求1所述的方法，其特征在于，所述圖元被拖動前放置在圖元樹中，所述圖元樹的結(jié)構(gòu)具有層次性和邏輯性，同一類別的圖元放在所述圖元樹的同一層中，所述圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
3.如權(quán)利要求2所述的方法,其特征在于,所述圖元樹使用解釋型語言Javascript的樹插件定義所述圖元樹的結(jié)構(gòu)，所述插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的所述Javascript的樹插件。
4.如權(quán)利要求1所述的方法，其特征在于，所述使用布局結(jié)構(gòu)控制器控制所述圖形基本容器的結(jié)構(gòu)，使得所述圖元按照一定的順序排列和組合是指:在將所有的圖元都放在所述圖形基本容器中后，從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的控制屬性對所述圖元進(jìn)行刪除或位移，確定所述拓?fù)鋱D的布局結(jié)構(gòu)；從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的連線方式，將所述場景中的所述圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。
5.如權(quán)利要求1所述的方法，其特征在于，設(shè)置所述圖元的圖元屬性是指:每個所述圖元都具有相應(yīng)的屬性，通過放置在圖元屬性數(shù)組中的屬性框來設(shè)置所述圖元的圖元屬性；并且所述屬性框被放置在同一個或不同的所述圖元屬性數(shù)組中。
6.一種基于畫布Canvas的拓?fù)鋱D生成裝置，其特征在于，所述裝置包括:舞臺生成器、圖形基本容器、布局結(jié)構(gòu)控制器； 所述舞臺生成器，用于根據(jù)所述Canvas的屬性及其特點(diǎn)生成可供圖層和圖元存在的舞臺環(huán)境； 所述圖形基本容器，用于承載所述拓?fù)鋱D所需的所述圖元；基于所述舞臺環(huán)境而制造，每個所述舞臺環(huán)境包括一個或多個所述圖形基本容器； 所述布局結(jié)構(gòu)控制器，用于控制所述圖形基本容器中所述拓?fù)鋱D的結(jié)構(gòu)，使得所述圖元按照一定的順序排列和組合。
7.如權(quán)利要求6所述的裝置，其特征在于，所述圖元被拖動前保存在圖元樹中；所述圖元樹的結(jié)構(gòu)具有層次性和邏輯性，在所述圖元樹的同一層中放置同一類別的圖元，所述圖元樹有父子關(guān)系，子類圖元放置在父類圖元下。
8.如權(quán)利要求7所述的裝置,其特征在于,所述圖元樹使用解釋型語言Javascript的樹插件定義所述圖元樹的結(jié)構(gòu)，所述插件為任何支持葉子節(jié)點(diǎn)、拖動、展開關(guān)閉操作的所述Javascript的樹插件。
9.如權(quán)利要求6所述的裝置，其特征在于，所述布局結(jié)構(gòu)控制器具體用于:在將所有的圖元都放在所述圖形基本容器中后，從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的控制屬性對所述圖元進(jìn)行刪除或位移，確定所述拓?fù)鋱D的布局結(jié)構(gòu)；從所述布局結(jié)構(gòu)控制器中選擇相應(yīng)的連線方式，將所述場景中的所述圖元關(guān)聯(lián)在一起，并對利用所述布局結(jié)構(gòu)控制器的相應(yīng)屬性對所述圖元進(jìn)行動態(tài)設(shè)置。
10.如權(quán)利要求6所述的裝置，其特征在于，所述屬性框被放置在圖元屬性數(shù)組中；所述屬性框所代表的屬性是可自定義的并且所述屬性框被放置在同一個或不同的所述圖元屬性數(shù)組中。
【文檔編號】G06F9/44GK104346170SQ201410546454
【公開日】2015年2月11日 申請日期:2014年10月15日 優(yōu)先權(quán)日:2014年10月15日
【發(fā)明者】周國偉 申請人:浪潮(北京)電子信息產(chǎn)業(yè)有限公司