本發(fā)明涉及圖形處理領(lǐng)域，具體而言，涉及一種圖形的處理方法和裝置。

背景技術(shù)：

現(xiàn)有的技術(shù)在制作三維圖形時，通常采用Webgl(一種3D繪圖標(biāo)準(zhǔn))的three.js(以webg1為基礎(chǔ)的庫，安裝了3D渲染需求中重要的工具方法與渲染循環(huán))或者css3 3D技術(shù)(基于層疊樣式表的3D技術(shù))。對于Webgl的three.js，直接在瀏覽器的網(wǎng)絡(luò)頁面用應(yīng)用3D技術(shù)，但是由于需要手機加載較多的js代碼和3d模型，因而需要較大的空間和網(wǎng)速帶寬。并且，在模擬不規(guī)則曲面時，3d模型的構(gòu)建過程復(fù)雜。對于css3 3D技術(shù)，通過在空間中繪制不同關(guān)鍵點的三維坐標(biāo)來描述物體，但是模擬非矩形的物體時，當(dāng)角度變化時，會暴露出邊角。

針對上述的問題，目前尚未提出有效的解決方案。

技術(shù)實現(xiàn)要素：

本發(fā)明實施例提供了一種圖形的處理方法和裝置，以至少解決現(xiàn)有技術(shù)在制作三維圖形時模型比較復(fù)雜的技術(shù)問題。

根據(jù)本發(fā)明實施例的一個方面，提供了一種圖形的處理方法，包括：創(chuàng)建多個圖層，其中，所述多個圖層包括第一圖層和圖層集，所述第一圖層包括用于表示目標(biāo)對象的主視圖，所述圖層集包括多個第二圖層，多個所述第二圖層的邊所構(gòu)成的圖形包括用于表示所述目標(biāo)對象的側(cè)面信息；對所述第一圖層和多個所述第二圖層進行層疊設(shè)置；將所述多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度；顯示旋轉(zhuǎn)后的所述多個圖層。

根據(jù)本發(fā)明實施例的另一方面，還提供了一種圖形的處理裝置，包括：創(chuàng)建單元，用于創(chuàng)建多個圖層，其中，所述多個圖層包括第一圖層和圖層集，所述第一圖層包括用于表示目標(biāo)對象的主視圖，所述圖層集包括多個第二圖層，多個所述第二圖層的邊所構(gòu)成的圖形包括用于表示所述目標(biāo)對象的側(cè)面信息；設(shè)置單元，用于對所述第一圖層和多個所述第二圖層進行層疊設(shè)置；旋轉(zhuǎn)單元，用于將所述多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度；顯示單元，用于顯示旋轉(zhuǎn)后的所述多個圖層。

在本發(fā)明實施例中，采用多個層疊設(shè)置的圖層來表達立體的目標(biāo)對象，每個圖層都是2D圖形，每個圖層都在x軸和y軸兩個維度上表示目標(biāo)對象，采用多個圖層的層疊方式，表達目標(biāo)對象在z軸維度上的特征，使得多個圖層在三個維度上表達目標(biāo)對象，從而實現(xiàn)了用多個2D圖形表達3D圖形，解決了現(xiàn)有技術(shù)在制作3D圖形時建立三維模型比較復(fù)雜所導(dǎo)致的繪制3D圖形的技術(shù)比較復(fù)雜的技術(shù)問題，達到了簡化3D圖形的制作過程的技術(shù)效果。

附圖說明

此處所說明的附圖用來提供對本發(fā)明的進一步理解，構(gòu)成本申請的一部分，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當(dāng)限定。在附圖中：

圖1是根據(jù)本發(fā)明實施例的圖形的處理方法的流程圖；

圖2是根據(jù)本發(fā)明實施例的多個圖層層疊設(shè)置的示意圖；

圖3是根據(jù)本發(fā)明實施例的多個圖層所表示的效果圖；

圖4是根據(jù)本發(fā)明實施例在x軸和y軸所表示的平面內(nèi)的圖層的示意圖；

圖5是根據(jù)本發(fā)明實施例的在z軸和y軸所表示的平面內(nèi)的圖層的示意圖；

圖6是現(xiàn)有技術(shù)中斜切后效果與目標(biāo)效果的對比圖；

圖7是根據(jù)現(xiàn)有技術(shù)中斜切后效果的示意圖；

圖8是根據(jù)本發(fā)明實施例的多個圖層旋轉(zhuǎn)的示意圖；

圖9是根據(jù)本發(fā)明實施例的第二圖層的示意圖；

圖10是根據(jù)本發(fā)明實施例的具有附加對象的第二圖層的示意圖；

圖11根據(jù)本發(fā)明實施例的圖形的處理裝置的示意圖；

圖12是根據(jù)本發(fā)明實施例的終端的硬件結(jié)構(gòu)示意圖。

具體實施方式

為了使本技術(shù)領(lǐng)域的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分的實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應(yīng)當(dāng)屬于本發(fā)明保護的范圍。

需要說明的是，本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當(dāng)情況下可以互換，以便這里描述的本發(fā)明的實施例能夠以除了在這里圖示或描述的那些以外的順序?qū)嵤４送?，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。

名詞解釋：

2D圖形：又叫平面圖形。2D圖形內(nèi)容只有水平的X軸向與垂直的Y軸向，傳統(tǒng)手工漫畫、插畫等都屬于2D圖形。

3D圖形：3D是英文“3Dimensions”的簡稱，中文是指三維、三個維度、三個坐標(biāo)，即有長、寬、高。換句話說，就是立體的，3D就是由X、Y、Z三個軸組成的空間，是相對于只有長和寬的平面(2D)而言。

實施例1

根據(jù)本發(fā)明實施例，提供了一種可以通過本申請裝置實施例執(zhí)行的方法實施例，需要說明的是，在附圖的流程圖示出的步驟可以在諸如一組計算機可執(zhí)行指令的計算機系統(tǒng)中執(zhí)行，并且，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。

根據(jù)本發(fā)明實施例，提供了一種圖形的處理方法。

圖1是根據(jù)本發(fā)明實施例的圖形的處理方法的流程圖，以下結(jié)合圖1對本發(fā)明實施例所提供的圖形的處理方法做具體介紹，如圖1所示，該圖形的處理方法主要包括如下步驟：

步驟S202，創(chuàng)建多個圖層，其中，多個圖層包括第一圖層和圖層集，第一圖層包括用于表示目標(biāo)對象的主視圖，圖層集包括多個第二圖層，多個第二圖層的邊所構(gòu)成的圖形包括用于表示目標(biāo)對象的側(cè)面信息。

步驟S204，對第一圖層和多個第二圖層進行層疊設(shè)置。

步驟S206，將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

步驟S208，顯示旋轉(zhuǎn)后的多個圖層。

本實施例采用多個層疊設(shè)置的圖層來表達立體的目標(biāo)對象，每個圖層都是2D圖形，每個圖層都在x軸和y軸兩個維度上表示目標(biāo)對象，同時，每個圖層都處于z軸的某個坐標(biāo)上，采用多個圖層的層疊方式表達目標(biāo)對象在z軸維度上的特征，使得多個圖層在三個維度上表達目標(biāo)對象，從而實現(xiàn)了用多個2D圖形表達3D圖形，解決了現(xiàn)有技術(shù)在制作3D圖形時建立三維模型比較復(fù)雜所導(dǎo)致的繪制3D圖形的技術(shù)比較復(fù)雜的技術(shù)問題，達到了簡化3D圖形的制作過程的技術(shù)效果。

如圖2所示，在x軸、y軸和z軸所構(gòu)成的三維空間中，利用多個圖層來表示目標(biāo)對象。第一圖層為圖2中的第一個面，圖層集為圖2中的多個第二個面的集合，第二個面就是第二圖層，第一個面和多個第二個面在z軸方向上表示目標(biāo)對象在z軸方向上的信息，比如厚度信息等。由圖2可知，多個圖層表現(xiàn)出的視覺效果是一個長方體，如圖3所示。

進一步地，圖2所示的多個圖層是采用絕對定位層疊設(shè)置的，依次疊加第一圖層和多個第二圖層，其中，第一圖層和相鄰的第二圖層之間具有預(yù)設(shè)距離，相鄰兩個第二圖層之間具有預(yù)設(shè)距離。也就是說，第一個面層疊在第二個面上，沿z軸方向只能顯示第一個面，多個第二個面都被第一個面遮擋。圖2層疊的多個圖層在z軸方向上顯示出的效果如圖4所示，即在x軸和y軸上顯示表示目標(biāo)對象的主視圖的長方形。

圖層可以是沒有厚度的2D圖形，通過多個圖層之間的距離表現(xiàn)出目標(biāo)對象在z軸方向上的厚度信息，由于多個第二圖層的層疊結(jié)構(gòu)，在多個圖層沿著x軸、y軸或者z軸旋轉(zhuǎn)的角度小于90度時，每個圖層的邊緣都顯示一部分，從而表現(xiàn)出目標(biāo)對象側(cè)面的形狀和顏色等信息。例如，沿在y軸和z軸所構(gòu)成的平面內(nèi)顯示的多個圖層如圖5所示。

在創(chuàng)建了多個圖層后，可以按照所需要顯示的角度旋轉(zhuǎn)這多個圖層。在旋轉(zhuǎn)多個圖層時，將多個圖層作為一個圖層組，對圖層組中的每個圖層同時沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。也就是說將多個圖層作為一個整體進行旋轉(zhuǎn)，每個圖層旋轉(zhuǎn)的角度相同，在旋轉(zhuǎn)的過程不改變多個圖層的層疊結(jié)構(gòu)，保持圖層之間的距離不變。旋轉(zhuǎn)時可以沿著三維空間中x軸、y軸和z軸中任意一個旋轉(zhuǎn)。

由于本實施例在x軸、y軸和z軸三個維度上表達目標(biāo)對象，因此，在旋轉(zhuǎn)多個圖層時能夠表現(xiàn)出三維的效果。而現(xiàn)有技術(shù)為了避免建立復(fù)雜的3D模型，會簡單的將2D圖形進行拉伸處理來表現(xiàn)目標(biāo)對象的不同角度，然而這種方式不能表現(xiàn)出3D圖形的透視效果。

如圖6所示，源圖表現(xiàn)的是一個手機的2D圖形，對該2D圖形用x軸斜切后，得到斜切后效果圖。斜切后效果圖所顯示的透視效果與源圖相同，是2D的源圖被斜著拉伸顯示出來的效果，相比源圖有傾斜。對比圖2示出的目標(biāo)效果圖可知，斜切后效果圖沒有表現(xiàn)出手機底部，不應(yīng)該表現(xiàn)的手機頂部反而顯示出來，因此，并無法表現(xiàn)出不同角度下的3D效果。

從圖6中源圖到圖6中斜切后效果圖的變化過程，可以如圖7所示，在x軸和y軸所表示的二維空間中展示手機的正面圖，在二維空間中用矩形表示手機的正面圖。在二維空間中在x軸方向上進行拉伸，得到傾斜的矩形，傾斜的矩形對應(yīng)傾斜的手機，并沒有表現(xiàn)出手機的立體效果。

本實施例創(chuàng)建多個圖層之后，可以按照圖8所示的方式進行旋轉(zhuǎn)。例如，將多個圖層作為一個整體沿著x軸旋轉(zhuǎn)。相比圖7所示的斜切效果，可以顯示圖層組的底部和右側(cè)，并且不顯示圖層的上側(cè)。對應(yīng)的手機顯示出機身的透視效果，而不是圖片被拉伸的效果。

通過本實施例，采用2D圖形實現(xiàn)3D圖形的顯示，建立2D圖形的過程要比建立3D模型簡單，因此，簡化了3D圖形的構(gòu)建過程。同時，由于處理2D圖形所需要的中央處理器的資源要小于處理3D圖形所需要的中央處理器的資源，采用2D圖形來實現(xiàn)3D圖形的顯示，也節(jié)約了中央處理器的資源消耗，提高中央處理器的處理性能和速度。

需要說明的是，在上述附圖中用長方形表示三維坐標(biāo)空間中圖層，應(yīng)該理解到，附圖中的長方形可以與目標(biāo)對象的輪廓相同。

進一步地，第一圖層用來表示目標(biāo)對象的主視圖，第二圖層所構(gòu)成的圖形表示目標(biāo)對象的側(cè)面信息，還可以創(chuàng)建第三圖層，用來表示目標(biāo)對象的后視圖。在多個圖層旋轉(zhuǎn)180度時，可以展示目標(biāo)對象的后視圖，即可以實現(xiàn)360度展示目標(biāo)對象的立體圖。

需要說明的是，每個圖層上所展示的圖形與目標(biāo)對象的圖形相同?？梢岳斫鉃閷⒛繕?biāo)對象沿某個方向切成無數(shù)個切片，每個切片看成一個圖層，這個切片的外表面所表現(xiàn)出的信息都在圖層的相應(yīng)位置或者區(qū)域展示。

對于側(cè)面具有附加對象的目標(biāo)對象，附加對象可以與表示目標(biāo)對象的側(cè)面信息的圖層處于同一個圖層上進行表達，也可以在一個附加圖層上表達附加對象，在附加圖層上不表達目標(biāo)對象的側(cè)面信息，該附加圖層與表示目標(biāo)對象的側(cè)面信息的圖層不是同一個圖層。對上述兩種情況進行說明：

可選地，目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建多個第二圖層包括：獲取目標(biāo)對象的側(cè)面信息和附加對象的附加信息；根據(jù)目標(biāo)對象的側(cè)面信息和附加對象的附加信息創(chuàng)建至少一個具有附加信息和側(cè)面信息的圖層；將具有附加信息和側(cè)面信息的圖層作為第二圖層。

例如，手機的側(cè)面有音量鍵等按鍵，按鍵作為手機的附加對象?？梢栽趧?chuàng)建第二圖層時，創(chuàng)建的圖層不僅表示手機側(cè)面的顏色信息，還表示手機側(cè)面的按鍵的形狀和顏色。

可選地，目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建多個第二圖層包括：獲取附加對象的附加信息；根據(jù)附加信息創(chuàng)建至少一個具有附加信息的附加圖層；將附加圖層作為第二圖層。

例如，在創(chuàng)建第二圖層時，分別創(chuàng)建表示手機按鍵的圖層和表示手機側(cè)面的顏色的圖層，按照一定的順序疊加這些第二圖層，形成圖層集。

創(chuàng)建的第二圖層的個數(shù)可以根據(jù)目標(biāo)對象的厚度確定，通常可以用多個第二圖層表示目標(biāo)對象純色的側(cè)面。第二圖層在表示目標(biāo)對象的側(cè)面的顏色可以采用圖9或者圖10所示的圖形，其中，斜線部分表示目標(biāo)對象的側(cè)面的顏色。圖10示出了在同一圖層上同時顯示附加對象和目標(biāo)對象的側(cè)面信息。

本實施例可以采用層疊樣式表實現(xiàn)，即創(chuàng)建多個圖層包括：在層疊樣式表中創(chuàng)建多個圖層，并且在層疊樣式表中對第一圖層和多個第二圖層進行層疊設(shè)置；將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度包括：對層疊樣式表中的父容器進行旋轉(zhuǎn)設(shè)置，其中，父容器中包括多個圖層，旋轉(zhuǎn)設(shè)置用于指示父容器中的所有圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

采用層疊樣式表的代碼如下：

Transform變換(包括x軸&y軸旋轉(zhuǎn)、縮放、y軸位移)

transform-origin：以某個點進行轉(zhuǎn)換(上下左右中)

transform-style：：preserve-3d(指定子元素定位在三維空間內(nèi))

一、手機厚度模擬

<div class＝"mobile">

<div class＝"cover-wrap"><！--封面--></div>，創(chuàng)建第一圖層

<div class＝"side side-1"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-2"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-3"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-4"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-5"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-6"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-7"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-8"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-9"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side side-10"><！--側(cè)面--></div>，創(chuàng)建第二圖層

<div class＝"side-switch"><！--開關(guān)按鈕--></div>，創(chuàng)建附加圖層

</div>

1)使用多個圖層，絕對定位讓多個圖層層疊在一起。

2)各個圖層在z軸形成前后距離，CSS關(guān)鍵代碼：

實現(xiàn)邏輯：

如圖2所示，把第一個面放在放在Z軸最上方。第二個面至最后一個面，依次疊在第一個面Z軸下面的位置。

代碼：

.mobile.cover-wrap{left:0；z-index:1；-webkit-transform:translateZ(0.43rem)；}

.mobile.side-1{left:0.19rem；-webkit-transform:translateZ(0.21rem)；}

.mobile.side-2{left:0.38rem；-webkit-transform:translateZ(0)；}

.mobile.side-3{left:0.58rem；-webkit-transform:translateZ(-0.21rem)；}

.mobile.side-4{left:0.77rem；-webkit-transform:translateZ(-0.43rem)；}

3)在多個圖層打包成一個組，設(shè)置transform-style:preserve-3d，即設(shè)置每個圖層在三維空間中的位置，圖2所示的實施例中，多個圖層的x軸的坐標(biāo)和y軸的坐標(biāo)相同，z軸坐標(biāo)沿z軸變化，就可以實現(xiàn)3d效果了。

二、旋轉(zhuǎn)

在父容器設(shè)置旋轉(zhuǎn)動畫即可。

.mobile{width:17.8rem；height:34.1rem；position:relative；-webkit-perspective:2000px；

perspective:2000px；-webkit-transform-style:preserve-3d；

transform-style:preserve-3d；-webkit-transform:rotateY(0deg)translate(10rem,2rem)；-webkit-animation:phoneTrans 1s 0s linear forwards；}

在上述手機厚度的代碼中，父容器是<div class＝"mobile">，<div class＝"cover-wrap"><！--封面--></div>是父容器中的子元素，設(shè)置符容器的旋轉(zhuǎn)就可以同時旋轉(zhuǎn)父容器中的所有子元素。

在瀏覽器中展示3D圖形時，可以采用上述層疊樣式表來實現(xiàn)，不需要建立復(fù)雜的3D模型，因此，使得實現(xiàn)3D圖形的邏輯更加簡單，并且運行2D圖形節(jié)約中央處理器的運行成本，因此，減少了瀏覽器展示3D動畫的運行成本，提高了展示速度。

需要說明的是，對于前述的各方法實施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領(lǐng)域技術(shù)人員應(yīng)該知悉，本發(fā)明并不受所描述的動作順序的限制，因為依據(jù)本發(fā)明，某些步驟可以采用其他順序或者同時進行。其次，本領(lǐng)域技術(shù)人員也應(yīng)該知悉，說明書中所描述的實施例均屬于優(yōu)選實施例，所涉及的動作和模塊并不一定是本發(fā)明所必須的。

通過以上的實施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到根據(jù)上述實施例的方法可借助軟件加必需的通用硬件平臺的方式來實現(xiàn)，當(dāng)然也可以通過硬件，但很多情況下前者是更佳的實施方式。基于這樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在一個存儲介質(zhì)(如ROM/RAM、磁碟、光盤)中，包括若干指令用以使得一臺終端設(shè)備(可以是手機，計算機，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述的方法。

實施例2

根據(jù)本發(fā)明實施例，還提供了一種用于實施上述圖形的處理方法的圖形的處理裝置，該圖形的處理裝置主要用于執(zhí)行本發(fā)明實施例上述內(nèi)容所提供的圖形的處理方法，以下對本發(fā)明實施例所提供的圖形的處理裝置做具體介紹：

圖11是根據(jù)本發(fā)明實施例的圖形的處理裝置的示意圖，如圖11所示，該圖形的處理裝置主要包括：

創(chuàng)建單元10用于創(chuàng)建多個圖層，其中，多個圖層包括第一圖層和圖層集，第一圖層包括用于表示目標(biāo)對象的主視圖，圖層集包括多個第二圖層，多個第二圖層的邊所構(gòu)成的圖形包括用于表示目標(biāo)對象的側(cè)面信息。

設(shè)置單元20用于對第一圖層和多個第二圖層進行層疊設(shè)置。

旋轉(zhuǎn)單元30用于將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

顯示單元40用于顯示旋轉(zhuǎn)后的多個圖層。

本實施例采用創(chuàng)建單元10創(chuàng)建多個層疊設(shè)置的圖層來表達立體的目標(biāo)對象，每個圖層都是2D圖形，每個圖層都在x軸和y軸兩個維度上表示目標(biāo)對象，同時，每個圖層都處于z軸的某個坐標(biāo)上，設(shè)置單元20對多個圖層進行層疊設(shè)置來表達目標(biāo)對象在z軸維度上的特征，旋轉(zhuǎn)單元30使得多個圖層在任意一個維度上進行旋轉(zhuǎn)，使得多個圖層在三個維度上表達目標(biāo)對象，實現(xiàn)了用多個2D圖形表達3D圖形，顯示單元40顯示出3D圖形，解決了現(xiàn)有技術(shù)在制作3D圖形時建立三維模型比較復(fù)雜所導(dǎo)致的繪制3D圖形的技術(shù)比較復(fù)雜的技術(shù)問題，達到了簡化3D圖形的制作過程的技術(shù)效果。

如圖2所示，在x軸、y軸和z軸所構(gòu)成的三維空間中，利用多個圖層來表示目標(biāo)對象。第一圖層為圖2中的第一個面，圖層集為圖2中的多個第二個面的集合，第二個面就是第二圖層，第一個面和多個第二個面在z軸方向上表示目標(biāo)對象在z軸方向上的信息，比如厚度信息等。由圖2可知，多個圖層表現(xiàn)出的視覺效果是一個長方體，如圖3所示。

進一步地，圖2所示的多個圖層是采用絕對定位層疊設(shè)置的，設(shè)置單元中的疊加模塊依次疊加第一圖層和多個第二圖層，其中，第一圖層和相鄰的第二圖層之間具有預(yù)設(shè)距離，相鄰兩個第二圖層之間具有預(yù)設(shè)距離。也就是說，第一個面層疊在第二個面上，沿z軸方向只能顯示第一個面，多個第二個面都被第一個面遮擋。圖2層疊的多個圖層在z軸方向上顯示出的效果如圖4所示，即在x軸和y軸上顯示表示目標(biāo)對象的主視圖的長方形。

圖層可以是沒有厚度的2D圖形，通過多個圖層之間的距離表現(xiàn)出目標(biāo)對象在z軸方向上的厚度信息，由于多個第二圖層的層疊結(jié)構(gòu)，在多個圖層沿著x軸、y軸或者z軸旋轉(zhuǎn)的角度小于90度時，每個圖層的邊緣都顯示一部分，從而表現(xiàn)出目標(biāo)對象側(cè)面的形狀和顏色等信息。例如，沿在y軸和z軸所構(gòu)成的平面內(nèi)顯示的多個圖層如圖5所示。

在創(chuàng)建了多個圖層后，可以按照所需要顯示的角度旋轉(zhuǎn)這多個圖層。在旋轉(zhuǎn)多個圖層時，旋轉(zhuǎn)單元中的旋轉(zhuǎn)模塊將多個圖層作為一個圖層組，對圖層組中的每個圖層同時沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。也就是說將多個圖層作為一個整體進行旋轉(zhuǎn)，每個圖層旋轉(zhuǎn)的角度相同，在旋轉(zhuǎn)的過程不改變多個圖層的層疊結(jié)構(gòu)，保持圖層之間的距離不變。旋轉(zhuǎn)時可以沿著三維空間中x軸、y軸和z軸中任意一個旋轉(zhuǎn)。

由于本實施例在x軸、y軸和z軸三個維度上表達目標(biāo)對象，因此，在旋轉(zhuǎn)多個圖層時能夠表現(xiàn)出三維的效果。而現(xiàn)有技術(shù)為了避免建立復(fù)雜的3D模型，會簡單的將2D圖形進行拉伸處理來表現(xiàn)目標(biāo)對象的不同角度，然而這種方式不能表現(xiàn)出3D圖形的透視效果。

如圖6所示，現(xiàn)有技術(shù)的源圖表現(xiàn)的是一個手機的2D圖形，對該2D圖形用x軸斜切后，得到斜切后效果圖。斜切后效果圖所顯示的透視效果與源圖相同，是2D的源圖被斜著拉伸顯示出來的效果，相比源圖有傾斜。對比圖2示出的目標(biāo)效果圖可知，斜切后效果圖沒有表現(xiàn)出手機底部，不應(yīng)該表現(xiàn)的手機頂部反而顯示出來，因此，并無法表現(xiàn)出不同角度下的3D效果。

從圖6中源圖到圖6中斜切后效果圖的變化過程可以參考圖7，在x軸和y軸所表示的二維空間中展示手機的正面圖，在二維空間中用矩形表示手機的正面圖。在二維空間中在x軸方向上進行拉伸，得到傾斜的矩形，傾斜的矩形對應(yīng)傾斜的手機，并沒有表現(xiàn)出手機的立體效果。

本實施例創(chuàng)建多個圖層之后，可以按照圖8所示的方式進行旋轉(zhuǎn)。例如，將多個圖層作為一個整體沿著x軸旋轉(zhuǎn)。相比圖7所示的斜切效果，可以顯示圖層組的底部和右側(cè)，并且不顯示圖層的上側(cè)。對應(yīng)的手機顯示出機身的透視效果，而不是圖片被拉伸的效果。

通過本實施例，采用2D圖形實現(xiàn)3D圖形的顯示，建立2D圖形的過程要比建立3D模型簡單，因此，簡化了3D圖形的構(gòu)建過程。同時，由于處理2D圖形所需要的中央處理器的資源要小于處理3D圖形所需要的中央處理器的資源，采用2D圖形來實現(xiàn)3D圖形的顯示，也節(jié)約了中央處理器的資源消耗，提高中央處理器的處理性能和速度。

需要說明的是，在上述附圖中用長方形表示三維坐標(biāo)空間中圖層，應(yīng)該理解到，附圖中的長方形可以與目標(biāo)對象的輪廓相同。

進一步地，創(chuàng)建單元中的第一創(chuàng)建模塊根據(jù)目標(biāo)對象的主視圖創(chuàng)建第一圖層，其中，第一圖層的圖形與主視圖相同；創(chuàng)建單元中的第二創(chuàng)建模塊根據(jù)目標(biāo)對象的后視圖創(chuàng)建第三圖層，其中，第三圖層的圖形與后視圖相同；創(chuàng)建單元中的第三創(chuàng)建模塊根據(jù)目標(biāo)對象的側(cè)面創(chuàng)建多個第二圖層得到圖層集，其中，圖層集的邊所構(gòu)成的圖形用于表示目標(biāo)對象的側(cè)面信息。第一圖層用來表示目標(biāo)對象的主視圖，第二圖層所構(gòu)成的圖形表示目標(biāo)對象的側(cè)面信息，第三圖層用來表示目標(biāo)對象的后視圖。在多個圖層旋轉(zhuǎn)180度時，可以展示目標(biāo)對象的后視圖，即可以實現(xiàn)360度展示目標(biāo)對象的立體圖。

需要說明的是，每個圖層上所展示的圖形與目標(biāo)對象的圖形相同。可以理解為將目標(biāo)對象沿某個方向切成無數(shù)個切片，每個切片看成一個圖層，這個切片的外表面所表現(xiàn)出的信息都在圖層的相應(yīng)位置或者區(qū)域展示。

對于側(cè)面具有附加對象的目標(biāo)對象，附加對象可以與表示目標(biāo)對象的側(cè)面信息的圖層處于同一個圖層上進行表達，也可以在一個附加圖層上表達附加對象，在附加圖層上不表達目標(biāo)對象的側(cè)面信息，該附加圖層與表示目標(biāo)對象的側(cè)面信息的圖層不是同一個圖層。對上述兩種情況進行說明：

可選地，目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建單元包括：第一獲取模塊，用于獲取目標(biāo)對象的側(cè)面信息和附加對象的附加信息；第四創(chuàng)建模塊，用于根據(jù)目標(biāo)對象的側(cè)面信息和附加對象的附加信息創(chuàng)建至少一個具有附加信息和側(cè)面信息的圖層；第一確定模塊，用于將具有附加信息和側(cè)面信息的圖層作為第二圖層。

例如，手機的側(cè)面有音量鍵等按鍵，按鍵作為手機的附加對象?？梢栽趧?chuàng)建第二圖層時，創(chuàng)建的圖層不僅表示手機側(cè)面的顏色信息和形狀信息，還表示手機側(cè)面的按鍵的形狀和顏色。

可選地，目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建單元包括：第二獲取模塊，用于獲取附加對象的附加信息；第五創(chuàng)建模塊，用于根據(jù)附加信息創(chuàng)建至少一個具有附加信息的附加圖層；第二確定模塊，用于將附加圖層作為第二圖層。

例如，在創(chuàng)建第二圖層時，分別創(chuàng)建表示手機按鍵的圖層和表示手機側(cè)面的顏色的圖層，按照一定的順序疊加這些第二圖層，形成圖層集。

創(chuàng)建的第二圖層的個數(shù)可以根據(jù)目標(biāo)對象的厚度確定，通?？梢杂枚鄠€第二圖層表示目標(biāo)對象純色的側(cè)面。第二圖層在表示目標(biāo)對象的側(cè)面的顏色可以采用圖9或者圖10所示的圖形，其中，斜線部分表示目標(biāo)對象的側(cè)面的顏色。圖10示出了在同一圖層上同時顯示附加對象和目標(biāo)對象的側(cè)面信息。

本實施例可以采用層疊樣式表實現(xiàn)，即創(chuàng)建單元在層疊樣式表中創(chuàng)建多個圖層，并且在層疊樣式表中對第一圖層和多個第二圖層進行層疊設(shè)置。旋轉(zhuǎn)單元對層疊樣式表中的父容器進行旋轉(zhuǎn)設(shè)置，其中，父容器中包括多個圖層，旋轉(zhuǎn)設(shè)置用于指示父容器中的所有圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

在瀏覽器中展示3D圖形時，可以采用上述層疊樣式表來實現(xiàn)，不需要建立復(fù)雜的3D模型，因此，使得實現(xiàn)3D圖形的邏輯更加簡單，并且運行2D圖形節(jié)約中央處理器的運行成本，因此，減少了瀏覽器展示3D動畫的運行成本，提高了展示速度。

實施例3

根據(jù)本發(fā)明實施例，還提供了一種用于實施上述圖形的處理方法的終端，如圖12所示，該終端主要包括處理器1201、攝像頭1202、顯示器1203、數(shù)據(jù)接口1204、存儲器1205和網(wǎng)絡(luò)接口1206，其中：

攝像頭1202主要用于拍攝目標(biāo)對象的主視圖和后視圖等2D圖形。

數(shù)據(jù)接口1204則主要通過數(shù)據(jù)傳輸?shù)姆绞綄⒌谌焦ぞ吲臄z到的2D圖形給處理器1201。

存儲器1205主要用于存儲創(chuàng)建的多個圖層。

網(wǎng)絡(luò)接口1206主要用于與服務(wù)器進行網(wǎng)絡(luò)通信，用于上傳創(chuàng)建的多個圖層。

顯示器1203主要用于顯示多個圖層旋轉(zhuǎn)后所展示的3D圖形。

處理器1201主要用于執(zhí)行如下操作：

創(chuàng)建多個圖層，其中，多個圖層包括第一圖層和圖層集，第一圖層用于表示目標(biāo)對象的主視圖，圖層集包括多個第二圖層，多個第二圖層的邊所構(gòu)成的圖形用于表示目標(biāo)對象的側(cè)面信息；對第一圖層和多個第二圖層進行層疊設(shè)置；將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度；顯示旋轉(zhuǎn)后的多個圖層，其中，旋轉(zhuǎn)后的多個圖層用于表示目標(biāo)對象的立體圖。

處理器1201還用于根據(jù)目標(biāo)對象的主視圖創(chuàng)建第一圖層，其中，第一圖層的圖形與主視圖相同；根據(jù)目標(biāo)對象的后視圖創(chuàng)建第三圖層，其中，第三圖層的圖形與后視圖相同；根據(jù)目標(biāo)對象的側(cè)面創(chuàng)建多個第二圖層得到圖層集，其中，圖層集的邊所構(gòu)成的圖形用于表示目標(biāo)對象的側(cè)面信息。

處理器1201還用于獲取目標(biāo)對象的側(cè)面信息和附加對象的附加信息；根據(jù)目標(biāo)對象的側(cè)面信息和附加對象的附加信息創(chuàng)建至少一個具有附加信息和側(cè)面信息的圖層；將具有附加信息和側(cè)面信息的圖層作為第二圖層。

處理器1201還用于獲取附加對象的附加信息；根據(jù)附加信息創(chuàng)建至少一個具有附加信息的附加圖層；將附加圖層作為第二圖層。

處理器1201還用于依次疊加第一圖層和多個第二圖層，其中，第一圖層和相鄰的第二圖層之間具有預(yù)設(shè)距離，相鄰兩個第二圖層之間具有預(yù)設(shè)距離。

處理器1201還用于將多個圖層作為一個圖層組，對圖層組中的每個圖層同時沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

可選地，本實施例中的具體示例可以參考上述實施例1和實施例2中所描述的示例，本實施例在此不再贅述。

實施例4

本發(fā)明的實施例還提供了一種存儲介質(zhì)?？蛇x地，在本實施例中，上述存儲介質(zhì)可以用于存儲本發(fā)明實施例的圖形的處理方法的程序代碼。

可選地，在本實施例中，上述存儲介質(zhì)可以位于移動通信網(wǎng)絡(luò)、廣域網(wǎng)、城域網(wǎng)或局域網(wǎng)的網(wǎng)絡(luò)中的多個網(wǎng)絡(luò)設(shè)備中的至少一個網(wǎng)絡(luò)設(shè)備。

可選地，在本實施例中，存儲介質(zhì)被設(shè)置為存儲用于執(zhí)行以下步驟的程序代碼：

S1，創(chuàng)建多個圖層，其中，多個圖層包括第一圖層和圖層集，第一圖層用于表示目標(biāo)對象的主視圖，圖層集包括多個第二圖層，多個第二圖層的邊所構(gòu)成的圖形用于表示目標(biāo)對象的側(cè)面信息；

S2，對第一圖層和多個第二圖層進行層疊設(shè)置；

S3，將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度；

S4，顯示旋轉(zhuǎn)后的多個圖層，其中，旋轉(zhuǎn)后的多個圖層用于表示目標(biāo)對象的立體圖。

可選地，在本實施例中，上述存儲介質(zhì)可以包括但不限于：U盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、移動硬盤、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：多個圖層還包括第三圖層，其中，第三圖層用于表示目標(biāo)對象的后視圖，創(chuàng)建多個圖層包括：根據(jù)目標(biāo)對象的主視圖創(chuàng)建第一圖層，其中，第一圖層的圖形與主視圖相同；根據(jù)目標(biāo)對象的后視圖創(chuàng)建第三圖層，其中，第三圖層的圖形與后視圖相同；根據(jù)目標(biāo)對象的側(cè)面創(chuàng)建多個第二圖層得到圖層集，其中，圖層集的邊所構(gòu)成的圖形用于表示目標(biāo)對象的側(cè)面信息。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建多個第二圖層包括：獲取目標(biāo)對象的側(cè)面信息和附加對象的附加信息；根據(jù)目標(biāo)對象的側(cè)面信息和附加對象的附加信息創(chuàng)建至少一個具有附加信息和側(cè)面信息的圖層；將具有附加信息和側(cè)面信息的圖層作為第二圖層。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：目標(biāo)對象的側(cè)面包括附加對象，創(chuàng)建多個圖層包括創(chuàng)建多個第二圖層，其中，創(chuàng)建多個第二圖層包括：獲取附加對象的附加信息；根據(jù)附加信息創(chuàng)建至少一個具有附加信息的附加圖層；將附加圖層作為第二圖層。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：對第一圖層和多個第二圖層進行層疊設(shè)置包括：依次疊加第一圖層和多個第二圖層，其中，第一圖層和相鄰的第二圖層之間具有預(yù)設(shè)距離，相鄰兩個第二圖層之間具有預(yù)設(shè)距離。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度包括：將多個圖層作為一個圖層組，對圖層組中的每個圖層同時沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

可選地，在本實施例中，處理器根據(jù)存儲介質(zhì)中已存儲的程序代碼執(zhí)行：創(chuàng)建多個圖層包括：在層疊樣式表中創(chuàng)建多個圖層，并且在層疊樣式表中對第一圖層和多個第二圖層進行層疊設(shè)置；將多個圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度包括：對層疊樣式表中的父容器進行旋轉(zhuǎn)設(shè)置，其中，父容器中包括多個圖層，旋轉(zhuǎn)設(shè)置用于指示父容器中的所有圖層沿預(yù)設(shè)方向旋轉(zhuǎn)預(yù)設(shè)角度。

可選地，本實施例中的具體示例可以參考上述實施例1和實施例2中所描述的示例，本實施例在此不再贅述。

上述本發(fā)明實施例序號僅僅為了描述，不代表實施例的優(yōu)劣。

上述實施例中的集成的單元如果以軟件功能單元的形式實現(xiàn)并作為獨立的產(chǎn)品銷售或使用時，可以存儲在上述計算機可讀取的存儲介質(zhì)中?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在存儲介質(zhì)中，包括若干指令用以使得一臺或多臺計算機設(shè)備(可為個人計算機、服務(wù)器或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述方法的全部或部分步驟。

在本發(fā)明的上述實施例中，對各個實施例的描述都各有側(cè)重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關(guān)描述。

在本申請所提供的幾個實施例中，應(yīng)該理解到，所揭露的客戶端，可通過其它的方式實現(xiàn)。其中，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實際實現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實際的需要選擇其中的部分或者全部單元來實現(xiàn)本實施例方案的目的。

另外，在本發(fā)明各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實現(xiàn)，也可以采用軟件功能單元的形式實現(xiàn)。

以上所述僅是本發(fā)明的優(yōu)選實施方式，應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也應(yīng)視為本發(fā)明的保護范圍。