一種實(shí)現(xiàn)3d ui中圓角圖標(biāo)焦點(diǎn)套合方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)軟件技術(shù)領(lǐng)域，尤其涉及一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法及系統(tǒng)。
【背景技術(shù)】
[0002]在3D UI中有時(shí)需要顯示不同寬高比的圓角矩形圖標(biāo)(例如圖標(biāo)由于被拉伸，寬高比可能是1:1也可能是2:1或3:1等等)，如圖1和圖2均為圓角矩形圖標(biāo)，其中圖1的寬高比為3:1，圖2的寬高比為1:1。圓角矩形圖標(biāo)包括圖標(biāo)和套合在圖標(biāo)上的邊框，其邊框稱為焦點(diǎn)(更直觀地，如圖3所示的方格邊框?yàn)榻裹c(diǎn))，焦點(diǎn)通常包括矩形部分和圓角部分。若對(duì)圖標(biāo)進(jìn)行拉伸，焦點(diǎn)也需進(jìn)行拉伸以與圖標(biāo)套合，但是對(duì)焦點(diǎn)進(jìn)行拉伸的結(jié)果往往是矩形部分仍能套合在圖標(biāo)上，而圓角部分卻很可能發(fā)生扭曲而無法套合在圖標(biāo)上，從整體而言，也即焦點(diǎn)無法套合在圖標(biāo)上。因此，在3D UI中應(yīng)用圓角矩形圖標(biāo)時(shí)，焦點(diǎn)如何恰如其分的套合在圖標(biāo)上，是一個(gè)面臨的問題。
[0003]在基于Android系統(tǒng)的2D UI處理中，若需要對(duì)圖標(biāo)進(jìn)行拉伸，可以通過點(diǎn)9的圖(andr1d平臺(tái)的應(yīng)用軟件開發(fā)里的一種特殊的圖片形式，文件擴(kuò)展名為:.9.png)進(jìn)行拉伸，以保證焦點(diǎn)的矩形部分和圓角部分均與圖標(biāo)的拉伸保持一致性，而3D UI中圖標(biāo)都是通過圖片轉(zhuǎn)換為紋理，紋理再渲染到屏幕上實(shí)現(xiàn)的，故不能采用點(diǎn)9的2D方案實(shí)現(xiàn)。
[0004]現(xiàn)有技術(shù)解決3D UI中圖標(biāo)拉伸時(shí)焦點(diǎn)的套合問題通常是:預(yù)先制作許多不同寬高比的焦點(diǎn)來根據(jù)圖標(biāo)的寬高比進(jìn)行匹配套合。這樣當(dāng)圖標(biāo)進(jìn)行拉伸時(shí)，雖然其寬高比也會(huì)發(fā)現(xiàn)變化，但可以根據(jù)變化后的寬高比選擇合適的焦點(diǎn)進(jìn)行匹配套合。但這種方案仍然存在較大缺點(diǎn):首先是需要預(yù)先制作大量的焦點(diǎn)；其次是制作了大量的焦點(diǎn)還不一定能滿足圖標(biāo)以任意比例拉伸的需求，也即不能保證圖標(biāo)以任意比例進(jìn)行拉伸時(shí)一定能找到與其匹配的焦點(diǎn)；因此這種方案同樣存在焦點(diǎn)與圖標(biāo)無法匹配套合的問題。
[0005]因此，現(xiàn)有技術(shù)還有待于改進(jìn)和發(fā)展。

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

[0006]鑒于上述現(xiàn)有技術(shù)的不足，本發(fā)明的目的在于提供一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法及系統(tǒng)，旨在解決目前3D UI中圖標(biāo)進(jìn)行任意比例的拉伸時(shí)，焦點(diǎn)不能與其匹配套合的問題。
[0007]本發(fā)明的技術(shù)方案如下:
一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述方法包括以下步驟:
A、預(yù)先建立圓角矩形焦點(diǎn)模型，以模型中心為原點(diǎn)，以模型圓角對(duì)應(yīng)分布于各象限區(qū)域中為原則建立平面直角坐標(biāo)系，將位于平面直角坐標(biāo)系各象限的模型區(qū)域分別對(duì)應(yīng)映射預(yù)設(shè)的1/4的焦點(diǎn)圖片形成1/4的焦點(diǎn)圖；
B、將所映射的1/4的焦點(diǎn)圖在保持圓角不變的情況下分別套合至需要獲得焦點(diǎn)的圓角圖標(biāo)的對(duì)應(yīng)位置上，并對(duì)所映射的1/4的焦點(diǎn)圖之間的區(qū)域進(jìn)行插值，實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合效果。
[0008]所述的實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述圓角矩形焦點(diǎn)模型是以平面直角坐標(biāo)系的X軸和I軸作為對(duì)稱軸的軸對(duì)稱圖形。
[0009]所述的實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法,其中，所述步驟B具體為:
B1、接收用戶圖標(biāo)選擇指令，計(jì)算需要獲得焦點(diǎn)的圓角圖標(biāo)的渲染區(qū)域尺寸；
B2、根據(jù)所計(jì)算出的圓角圖標(biāo)的渲染區(qū)域尺寸設(shè)置1/4的焦點(diǎn)圖對(duì)應(yīng)的紋理的放縮比例；
B3、設(shè)置焦點(diǎn)圖對(duì)應(yīng)的紋理的坐標(biāo)映射方式為紋理圖像邊緣拉伸填充的紋理環(huán)繞模式，對(duì)所映射的1/4的焦點(diǎn)圖對(duì)應(yīng)的紋理之間的區(qū)域進(jìn)行插值；
B4、按照預(yù)設(shè)比例調(diào)整并計(jì)算整個(gè)焦點(diǎn)圖片顯示的范圍，并計(jì)算整個(gè)焦點(diǎn)圖對(duì)應(yīng)的紋理坐標(biāo)的偏移量；
B5、利用所計(jì)算出的偏移量及放縮比例更新整個(gè)焦點(diǎn)圖的紋理矩陣，并利用新的紋理矩陣進(jìn)行渲染，顯示3D UI中圓角圖標(biāo)焦點(diǎn)套合效果。
[0010]所述的3D UI中實(shí)現(xiàn)圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述計(jì)算需要獲得焦點(diǎn)的圓角圖標(biāo)的渲染區(qū)域尺寸具體為:
利用圓角圖標(biāo)的父節(jié)點(diǎn)坐標(biāo)系以及自身保存的相對(duì)坐標(biāo)系通過累乘計(jì)算得出圓角圖標(biāo)在屏幕渲染區(qū)域的尺寸。
[0011]所述的3D UI中實(shí)現(xiàn)圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述紋理圖像邊緣拉伸填充的紋理環(huán)繞模式保證焦點(diǎn)圖對(duì)應(yīng)的紋理坐標(biāo)范圍在(0，0) IlJ(Ll)的閉區(qū)間內(nèi)。
[0012]所述的3D UI中實(shí)現(xiàn)圓角圖標(biāo)焦點(diǎn)套合方法，其中，利用所計(jì)算出的偏移量及放縮比例更新焦點(diǎn)圖的紋理矩陣具體為:
利用所計(jì)算出的偏移量及放縮比例重新重合一個(gè)新的紋理矩陣。
[0013]所述的3D UI中實(shí)現(xiàn)圓角圖標(biāo)焦點(diǎn)套合方法，其中，采用以下公式計(jì)算焦點(diǎn)圖對(duì)應(yīng)的紋理坐標(biāo)的偏移量:
TranslateX = (1/Size.X-1)* (Size.X) *0.5TranslateY = (1/Size.Y-1) * (Size.Y) *0.5,
其中，所述TranslateX指X軸偏移量，所述TranslateY指Y軸偏移量，Size.X指焦點(diǎn)圖對(duì)應(yīng)紋理在X軸方向上的放縮比例，Size.Y指焦點(diǎn)圖對(duì)應(yīng)紋理在X軸方向上的放縮比例。
[0014]所述的3D UI中實(shí)現(xiàn)圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述利用新的紋理矩陣進(jìn)行渲染,顯示3D UI中圓角圖標(biāo)焦點(diǎn)套合效果具體為:
利用新的紋理矩陣對(duì)紋理進(jìn)行采樣，并利用采樣得到的數(shù)據(jù)渲染到屏幕上，實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合效果。
[0015]—種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合系統(tǒng)，其中，所述系統(tǒng)包括:
模型建立及映射模塊、用于預(yù)先建立圓角矩形焦點(diǎn)模型，以模型中心為原點(diǎn)，以模型圓角對(duì)應(yīng)分布于各象限區(qū)域中為原則建立平面直角坐標(biāo)系，將位于平面直角坐標(biāo)系各象限的模型區(qū)域分別對(duì)應(yīng)映射預(yù)設(shè)的1/4的焦點(diǎn)圖片形成1/4的焦點(diǎn)圖；
計(jì)算模塊、用于將所映射的1/4的焦點(diǎn)圖在保持圓角不變的情況下分別套合至需要獲得焦點(diǎn)的圓角圖標(biāo)的對(duì)應(yīng)位置上，并對(duì)所映射的1/4的焦點(diǎn)圖之間的區(qū)域進(jìn)行插值；
渲染模塊，用于根據(jù)所述計(jì)算模塊計(jì)算數(shù)據(jù)實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合效果。
[0016]有益效果:本發(fā)明提供一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法及系統(tǒng)，該系統(tǒng)基于紋理映射的實(shí)現(xiàn)方案，能夠?qū)崿F(xiàn)精準(zhǔn)套合不同寬高比的圓角矩形，同時(shí)可以動(dòng)態(tài)控制焦點(diǎn)邊框?qū)挾纫约帮@示范圍。解決了由于3D UI中圖標(biāo)進(jìn)行任意比例的拉伸時(shí)，焦點(diǎn)不能與其匹配套合的問題。
【附圖說明】
[0017]圖1為現(xiàn)有的寬高比為3:1的的圓角矩形圖標(biāo)。
[0018]圖2為現(xiàn)有的寬高比為1:1的圓角矩形圖標(biāo)。
[0019]圖3為常見的圓角矩形圖標(biāo)中焦點(diǎn)套合在圖標(biāo)上的效果示意圖(方格框?yàn)榻裹c(diǎn)框)。
[0020]圖4為本發(fā)明具體實(shí)施例中實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法流程圖。
[0021]圖5為圖4中步驟SlOO所建立的的圓角矩形焦點(diǎn)模型圖。
[0022]圖6為圖5的圓角矩形焦點(diǎn)模型映射的1/4焦點(diǎn)圖片形成的焦點(diǎn)圖。
[0023]圖7為由圖6所示的圓角矩形焦點(diǎn)模型映射的1/4焦點(diǎn)圖片拼接成的完整焦點(diǎn)圖。
[0024]圖8為3D UI中X方向產(chǎn)生拉伸的圓角矩形圖標(biāo)。
[0025]圖9為3D UI中Y方向產(chǎn)生拉伸的圓角矩形圖標(biāo)。
[0026]圖10為在圓角矩形焦點(diǎn)的圓角不變的情況下，插值像素值實(shí)現(xiàn)焦點(diǎn)套合拉伸的圓角矩形圖標(biāo)的示意圖。
[0027]圖11為具體實(shí)施例中圓角圖標(biāo)上的焦點(diǎn)寬邊框的示意圖。
[0028]圖12為具體實(shí)施例中圖11中的圓角圖標(biāo)上的焦點(diǎn)窄邊框的示意圖。
[0029]圖13為圖4步驟S200的具體方法流程圖。
[0030]圖14為本發(fā)明具體實(shí)施例中實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合系統(tǒng)的原理框圖。
【具體實(shí)施方式】
[0031]本發(fā)明提供一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法及系統(tǒng)，為使本發(fā)明的目的、技術(shù)方案及效果更加清楚、明確，以下對(duì)本發(fā)明進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0032]如圖4所示的一種實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合方法，其中，所述方法包括以下步驟:
S100、預(yù)先建立圓角矩形焦點(diǎn)模型，以模型中心為原點(diǎn)，以模型圓角對(duì)應(yīng)分布于各象限區(qū)域中為原則建立平面直角坐標(biāo)系，將位于平面直角坐標(biāo)系各象限的模型區(qū)域分別對(duì)應(yīng)映射預(yù)設(shè)的1/4的焦點(diǎn)圖片形成1/4的焦點(diǎn)圖。
[0033]所建立的圓角矩形焦點(diǎn)模型如圖5所示，該圓角矩形焦點(diǎn)模型是以模型中心為原點(diǎn)(0，O)、模型分布在坐標(biāo)系的四個(gè)象限中，并且其分布在各象限的上下左右四個(gè)區(qū)域分別映射一個(gè)1/4焦點(diǎn)圖片，形成如圖6所示的1/4焦點(diǎn)圖。將所映射形成的1/4焦點(diǎn)圖上下左右對(duì)稱拼接成可形成如圖7所示的一個(gè)完整的焦點(diǎn)圖。
[0034]S200、將所映射的1/4的焦點(diǎn)圖在保持圓角不變的情況下分別套合至需要獲得焦點(diǎn)的圓角圖標(biāo)的對(duì)應(yīng)位置上，并對(duì)所映射的1/4的焦點(diǎn)圖之間區(qū)域進(jìn)行插值，實(shí)現(xiàn)3D UI中圓角圖標(biāo)焦點(diǎn)套合效果。
[0035]在圖標(biāo)顯示的3D坐標(biāo)系下，保持焦點(diǎn)的圓角不拉伸，就要保證圖標(biāo)在屏幕上的最終顯示區(qū)域的大小和原圖片大小保持尺寸相同，但是因?yàn)閳D標(biāo)往往不是正方形的，在X方向，Y方向都可能產(chǎn)生拉伸，產(chǎn)生如圖8或9所示