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

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

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