一種響應(yīng)式圖形化的生成方法與系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)信息前端領(lǐng)域，特別是涉及一種響應(yīng)式圖形化的生成方法及系統(tǒng)。
【背景技術(shù)】
[0002]隨著信息時(shí)代的快速發(fā)展，用戶的信息量與日倶增。海量信息的可視化圍繞著“可讀、邏輯可用”的目的傳遞信息，將枯燥繁瑣的數(shù)據(jù)轉(zhuǎn)為通俗易懂的圖形化信息，提高用戶體驗(yàn)。
[0003]傳統(tǒng)方式編寫的頁(yè)面，針對(duì)不同的顯示設(shè)備，如屏幕尺寸不同的移動(dòng)手持設(shè)備，會(huì)出現(xiàn)無(wú)法適應(yīng)屏幕的情況。尤其是對(duì)于不同分辨率的屏幕來(lái)說(shuō)，固定寬度的界面，就會(huì)出現(xiàn)界面太大而超出屏幕或者界面太小出現(xiàn)大片空白的情況。不能自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境，使可視化設(shè)計(jì)的用戶體驗(yàn)較差。

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

[0004]有鑒于此，本發(fā)明的主要目的在于提供一種響應(yīng)式圖形化的生成方法，可以使繪制的頁(yè)面內(nèi)容尺寸適應(yīng)圖形化窗口尺寸。
[0005]為實(shí)現(xiàn)上述目的，本發(fā)明提供了一種響應(yīng)式圖形化的生成方法，包括:
[0006]從底層接口獲取目標(biāo)圖形數(shù)據(jù)；
[0007]所述目標(biāo)圖形數(shù)據(jù)包括:各圖標(biāo)豎直方向尺寸與圖形化窗口總高度的豎直尺寸比例，各圖標(biāo)水平方向尺寸與圖形化窗口總寬度的水平尺寸比例，所述各圖標(biāo)豎直方向位置高度與圖形化窗口總高度的豎直位置比例，以及所述各圖標(biāo)水平方向位置寬度與圖形化窗口總寬度的水平位置比例；
[0008]確定當(dāng)前圖形化窗口的總高度與總寬度；
[0009]根據(jù)所述各圖標(biāo)與圖形化窗口的所述豎直尺寸比例，水平尺寸比例，豎直位置比例，水平位置比例以及當(dāng)前圖形化窗口的總高度與總寬度，計(jì)算出所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸；
[0010]根據(jù)所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸，在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。
[0011]優(yōu)選地，所述各圖標(biāo)的位置坐標(biāo)為所述各圖標(biāo)中心點(diǎn)的坐標(biāo)。
[0012]優(yōu)選地，使用Canvas元素在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。
[0013]本發(fā)明還提供了一種響應(yīng)式圖形化的生成系統(tǒng)，包括:圖形數(shù)據(jù)獲取模塊，圖形化TS 口尺寸確定t吳塊，圖標(biāo)尺寸確定t吳塊和圖標(biāo)繪制t吳塊；
[0014]所述圖形數(shù)據(jù)獲取模塊用于從底層接口獲取目標(biāo)圖形數(shù)據(jù)，所述目標(biāo)圖形數(shù)據(jù)包括:各圖標(biāo)豎直方向尺寸與圖形化窗口總高度的豎直尺寸比例，各圖標(biāo)水平方向尺寸與圖形化窗口總寬度的水平尺寸比例，所述各圖標(biāo)豎直方向位置高度與圖形化窗口總高度的豎直位置比例，以及所述各圖標(biāo)水平方向位置寬度與圖形化窗口總寬度的水平位置比例；
[0015]所述圖形化窗口尺寸確定模塊用于確定當(dāng)前圖形化窗口的總高度與總寬度；
[0016]所述圖標(biāo)尺寸確定模塊用于根據(jù)所述各圖標(biāo)與圖形化窗口的所述豎直尺寸比例，水平尺寸比例，豎直位置比例，水平位置比例以及當(dāng)前圖形化窗口的總高度與總寬度，計(jì)算出所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸；
[0017]所述圖標(biāo)繪制模塊用于根據(jù)所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸，在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。
[0018]優(yōu)選地，所述各圖標(biāo)的位置坐標(biāo)為所述各圖標(biāo)中心點(diǎn)的坐標(biāo)。
[0019]優(yōu)選地，使用Canvas元素在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。
[0020]應(yīng)用本發(fā)明提供的一種響應(yīng)式圖形化的生成方法與系統(tǒng)，從底層接口獲取目標(biāo)圖形數(shù)據(jù)；所述目標(biāo)圖形數(shù)據(jù)包括:各圖標(biāo)豎直與水平方向尺寸分別與圖形化窗口總高度的豎直尺寸和總寬度水平尺寸的比例，以及各圖標(biāo)豎直方向位置高度和水平方向位置寬度分別與圖形化窗口總高度的豎直位置和總寬度水平位置的比例，確定當(dāng)前圖形化窗口的總高度與總寬度；根據(jù)所述各圖標(biāo)與圖形化窗口的所述豎直尺寸比例，水平尺寸比例，豎直位置比例，水平位置比例以及當(dāng)前圖形化窗口的總高度與總寬度，計(jì)算出所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸，并在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。各圖標(biāo)尺寸和位置與圖形化窗口尺寸比例確定，根據(jù)不同的圖形化窗口尺寸，各圖標(biāo)均可適應(yīng)性地繪制，繪制的頁(yè)面自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境，使可視化設(shè)計(jì)的用戶體驗(yàn)較好。
【附圖說(shuō)明】
[0021]為了更清楚地說(shuō)明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖僅僅是本發(fā)明的實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。
[0022]圖1為本發(fā)明一種響應(yīng)式圖形化的生成方法實(shí)施例一的流程圖；
[0023]圖2為本發(fā)明一種響應(yīng)式圖形化的生成系統(tǒng)實(shí)施例二的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0024]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。基于本發(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0025]實(shí)施例一:
[0026]本發(fā)明提供了一種響應(yīng)式圖形化的生成方法，圖1示出了本發(fā)明響應(yīng)式圖形化的生成方法實(shí)施例一的流程圖，包括:
[0027]步驟SlOl:從底層接口獲取目標(biāo)圖形數(shù)據(jù)；
[0028]通過(guò)底層Rest Api應(yīng)用程序編程接口獲取目標(biāo)圖形數(shù)據(jù)，所述目標(biāo)圖形數(shù)據(jù)包括:各圖標(biāo)豎直方向尺寸與圖形化窗口總高度的豎直尺寸比例，各圖標(biāo)水平方向尺寸與圖形化窗口總寬度的水平尺寸比例，所述各圖標(biāo)豎直方向位置高度與圖形化窗口總高度的豎直位置比例，以及所述各圖標(biāo)水平方向位置寬度與圖形化窗口總寬度的水平位置比例；
[0029]步驟S102:確定當(dāng)前圖形化窗口的總高度與總寬度；
[0030]步驟S103:根據(jù)所述各圖標(biāo)與圖形化窗口的所述豎直尺寸比例，水平尺寸比例，豎直位置比例，水平位置比例以及當(dāng)前圖形化窗口的總高度與總寬度，計(jì)算出所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸；
[0031]步驟S104:根據(jù)所述各圖標(biāo)對(duì)應(yīng)的位置坐標(biāo)與尺寸，在所述當(dāng)前圖形化窗口中繪制所述各圖標(biāo)。
[0032]本實(shí)施例中需要繪制的各圖標(biāo)的尺寸與位置通過(guò)與圖形化窗口尺寸的比例來(lái)表征，圖標(biāo)位置坐標(biāo)設(shè)置為圖標(biāo)中心點(diǎn)的坐標(biāo)，定義各圖標(biāo)的中心點(diǎn)為對(duì)應(yīng)的一個(gè)節(jié)點(diǎn)，首先定義圖形化窗口的總高度為winHeight，入口節(jié)點(diǎn)netO的初始高度坐標(biāo)定義為winHeight/20，netO對(duì)應(yīng)的入口圖標(biāo)的高度為winHeight/xp設(shè)定后續(xù)圖標(biāo)之間的高度差為winHeight/?Ο，以防止圖標(biāo)之間重合，后續(xù)的節(jié)點(diǎn)圖標(biāo)以netO為基準(zhǔn)圖標(biāo)節(jié)點(diǎn)，節(jié)點(diǎn)netl對(duì)應(yīng)的圖標(biāo)高度為winHeight/x2，因此節(jié)點(diǎn)netl的高度坐標(biāo)為winHeight/20+winHeight/2x1+winHeight/10+winHeight/2x2o這樣后續(xù)結(jié)點(diǎn)的高度取決于前一個(gè)圖標(biāo)節(jié)點(diǎn)坐標(biāo)、前一個(gè)圖標(biāo)高度和本身的圖標(biāo)高度的和，下面的圖標(biāo)尺寸和位置坐標(biāo)以此類推；
[0033]定義圖形化窗口的總寬度為wWidth，入口節(jié)點(diǎn)圖標(biāo)netO的初始寬度坐標(biāo)定義為wffidth/3, netO對(duì)應(yīng)的入口圖標(biāo)的寬度為wWidth/yi。我們?cè)O(shè)定后續(xù)圖標(biāo)以初始圖標(biāo)為基準(zhǔn)中心點(diǎn)，第二節(jié)點(diǎn)netl對(duì)應(yīng)的圖標(biāo)寬度為wWidth/y2，因此netl的寬度坐標(biāo)為wWidth/3+(wffidth/2y1-wffidth/2y2)，各圖標(biāo)在豎直方向已拉開(kāi)距離，以第一個(gè)圖標(biāo)為基準(zhǔn)，在水平方向上大圖標(biāo)中心點(diǎn)靠左，小圖標(biāo)中心點(diǎn)靠右，后續(xù)的節(jié)點(diǎn)圖標(biāo)以此類推生成；
[003