一種三維網(wǎng)頁(yè)圖形繪制方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本申請(qǐng)涉及一種三維網(wǎng)頁(yè)圖形繪制方法及裝置。
【背景技術(shù)】
[0002] 伸縮矢量圖（SVG)是萬(wàn)維網(wǎng)聯(lián)盟（W3C)開(kāi)發(fā)的一套Web頁(yè)面圖形內(nèi)容標(biāo)準(zhǔn)，可以 用來(lái)開(kāi)發(fā)二維（2D)圖形。它是一種在語(yǔ)法上與XML標(biāo)簽語(yǔ)言類(lèi)似的Web頁(yè)面語(yǔ)言。SVG既 能夠用來(lái)描述靜態(tài)矢量圖形，也能夠描述動(dòng)態(tài)圖形，支持實(shí)時(shí)渲染并具有較高的質(zhì)量。SVG 圖形能夠幫助用戶很簡(jiǎn)潔地描述圓形、橢圓形、矩形、多邊形等常用基本圖形。
[0003] 作為一種描述2D圖形的簡(jiǎn)便的方法，SVG標(biāo)準(zhǔn)并沒(méi)有提出關(guān)于繪制三維（3D)模 式圖形的方法。針對(duì)這個(gè)問(wèn)題，已有一些嘗試性的解決方案。其中大多數(shù)是通過(guò)投影的方 式，將三維空間中的物體投影到2D平面上，通過(guò)這種方式來(lái)模擬其原始的三維空間中的形 態(tài)。通過(guò)這種方式，二維平面上的SVG圖形可以近似地表示諸如立方體等三維物體。另一 種常用方式是基于插值方法，即選擇兩個(gè)相同或不同的二維SVG圖形作為前景圖形與背景 圖形，在兩者之間插入一些輔助圖形，從而實(shí)現(xiàn)由某一個(gè)位置或者尺寸向另一個(gè)位置或者 尺寸的平滑過(guò)渡，并用較靠前的圖像覆蓋較靠后的圖像的一部分，依次累加得到近似的3D SVG圖形。
[0004] 上述方法都只能適用于單目3D SVG圖形的顯示，而無(wú)法應(yīng)用在顯示器上。隨著雙 目立體顯示器的普及，設(shè)計(jì)并實(shí)現(xiàn)能夠同時(shí)支持左右兩個(gè)視幀的雙目立體3D圖形，并在此 基礎(chǔ)上構(gòu)建復(fù)雜的雙目3D可伸縮矢量圖形，以滿足多種終端設(shè)備的顯示需求，這一工作的 重要性日益凸顯。

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

[0005] 本申請(qǐng)?zhí)峁┮环N三維網(wǎng)頁(yè)圖形繪制方法及裝置，可以對(duì)網(wǎng)頁(yè)中的圖形元素進(jìn)行三 維繪制。
[0006] 根據(jù)本申請(qǐng)的第一方面，本申請(qǐng)?zhí)峁┮环N三維網(wǎng)頁(yè)圖形繪制方法，包括：讀取圖形 元素的屬性以及預(yù)設(shè)的坐標(biāo)值及尺寸；判斷所述圖形元素的屬性中是否攜帶三維渲染屬性 參數(shù)，所述三維渲染屬性用于表示將當(dāng)前的元素圖形繪制為立體圖形；若判斷出所述圖形 元素的屬性中是攜帶三維渲染屬性參數(shù)，則執(zhí)行第一繪制流程：根據(jù)所述預(yù)設(shè)的坐標(biāo)值及 尺寸計(jì)算所述圖形元素在左視幀渲染位及右視幀渲染位；在所述左視幀渲染位和所述右視 幀渲染位分別對(duì)所述圖形元素進(jìn)行渲染，得到三維網(wǎng)頁(yè)圖形；若判斷出所述圖形元素的屬 性中不攜帶三維渲染屬性參數(shù)，則執(zhí)行第二繪制流程：根據(jù)所述預(yù)設(shè)的坐標(biāo)值及尺寸在屏 幕上繪制所述圖形元素。
[0007] 根據(jù)本申請(qǐng)的第二方面，本申請(qǐng)?zhí)峁┮环N三維網(wǎng)頁(yè)圖形繪制裝置，包括：讀取單 元，用于讀取圖形元素的屬性以及預(yù)設(shè)的坐標(biāo)值及尺寸；判斷單元，用于判斷所述圖形元素 的屬性中是否攜帶三維渲染屬性參數(shù)，所述三維渲染參數(shù)用于表示將當(dāng)前的元素圖形繪制 為立體圖形；第一繪制單元，包括：計(jì)算單元以及渲染單元；計(jì)算單元，用于在所述判斷單 元判斷出所述圖形元素的屬性中是攜帶三維渲染屬性參數(shù)，則根據(jù)所述預(yù)設(shè)的坐標(biāo)值及尺 寸計(jì)算所述圖形元素在左視幀植染位及右視幀植染位；植染單元，用于在所述計(jì)算單元計(jì) 算出的所述左視幀渲染位和所述右視幀渲染位分別對(duì)所述圖形元素進(jìn)行渲染，得到三維網(wǎng) 頁(yè)圖形；第二繪制單元，用于在所述判斷單元判斷出所述圖形元素的屬性中不攜帶三維渲 染屬性參數(shù)，則根據(jù)所述預(yù)設(shè)的坐標(biāo)值及尺寸在屏幕上繪制所述圖形元素。
[0008] 本申請(qǐng)?zhí)峁┑娜S網(wǎng)頁(yè)圖形繪制方法及裝置，用于讀取圖形元素屬性及坐標(biāo)值及 尺寸，判斷圖形元素屬性中是否有三維渲染屬性參數(shù)，若是，則根據(jù)預(yù)設(shè)的坐標(biāo)值及尺寸計(jì) 算所述圖形元素在左視幀渲染位及右視幀渲染位，在左視幀渲染位和右視幀渲染位分別對(duì) 所述圖形元素進(jìn)行渲染，得到三維網(wǎng)頁(yè)圖形。若判斷出所述圖形元素的屬性中不攜帶三維 渲染屬性參數(shù)，則根據(jù)所述預(yù)設(shè)的坐標(biāo)值及尺寸在屏幕上繪制所述圖形元素。通過(guò)本申請(qǐng) 方法，可以對(duì)網(wǎng)頁(yè)中的圖形元素進(jìn)行三維繪制。更重要的是，不僅可以對(duì)矩形等常用圖形進(jìn) 行三維繪制，對(duì)于同時(shí)帶有三維效果的元素和二維效果的元素這些更復(fù)雜的網(wǎng)頁(yè)圖案也可 進(jìn)行繪制，適用范圍廣，滿足多種終端設(shè)備的顯示需求。
【附圖說(shuō)明】
[0009] 圖1為本發(fā)明實(shí)施例的方法流程圖；
[0010] 圖2為本發(fā)明實(shí)施例的另一種方法流程圖；
[0011] 圖3為利用本實(shí)施例方法將單個(gè)矩形元素繪制成立體矩形的效果圖；
[0012] 圖4為利用本實(shí)施例方法將多個(gè)圖形元素繪制成立體矩形的效果圖；
[0013] 圖5為發(fā)明實(shí)施例的裝置結(jié)構(gòu)示意圖；
[0014] 圖6為發(fā)明實(shí)施例的另一種裝置結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0015] 下面通過(guò)【具體實(shí)施方式】結(jié)合附圖對(duì)本發(fā)明作進(jìn)一步詳細(xì)說(shuō)明。
[0016] 在本申請(qǐng)實(shí)施例中，提供一種三維網(wǎng)頁(yè)圖形繪制方法及裝置，對(duì)網(wǎng)頁(yè)中的圖形元 素進(jìn)行三維繪制，滿足多種終端設(shè)備的顯示需求。
[0017] 實(shí)施例一：
[0018] 請(qǐng)參考圖1，圖1為本發(fā)明實(shí)施例一的方法流程圖。如圖1所示，一種三維網(wǎng)頁(yè)圖 形繪制方法，可以包括以下步驟：
[0019] 101、讀取圖形元素的屬性以及預(yù)設(shè)的坐標(biāo)值及尺寸。
[0020] 在需要將某個(gè)圖形元素設(shè)置為帶三維立體效果時(shí)，需要修改矩形、圓形、橢圓、折 線形、多邊形等常用可伸縮矢量圖（SVG)圖形元素的屬性。具體地，是向圖形元素的屬性中 添加三維渲染屬性參數(shù)，優(yōu)選的，還可以為圖形元素的厚度和深度進(jìn)行預(yù)先設(shè)置，具體地， 可以預(yù)先向圖形元素的屬性參數(shù)中添加預(yù)設(shè)的厚度值以及預(yù)設(shè)的深度值。添加的三維渲染 屬性參數(shù)及預(yù)設(shè)的厚度值以及預(yù)設(shè)的深度值如表1所示?？梢岳斫獾氖牵琒VG支持2D繪制， 在不需要將圖像元素繪制為帶三維效果時(shí)，按照現(xiàn)有方法進(jìn)行繪制即可。值得指出的是，在 建立帶有三維立體效果的圖形時(shí)，一些網(wǎng)頁(yè)圖案往往較為復(fù)雜，需要多個(gè)圖形元素結(jié)合才 能得到設(shè)計(jì)人員設(shè)想的效果，某些時(shí)候需要將其中一些圖形元素繪制為三維效果，另一些 則繪制為二維效果，再將多個(gè)圖形元素繪制效果疊加才能得到最終的設(shè)計(jì)圖案。下面對(duì)圖 形元素的二維及三維效果的屬性進(jìn)行舉例介紹：
[0021] 例如，表示一個(gè)頂點(diǎn)坐標(biāo)為（10,20)，寬度為40,高度為30的矩形，傳統(tǒng)的二維矩 形的編寫(xiě)方式如下：
[0022] 〈rect X = "10"