段立峰

（陜西工業(yè)職業(yè)技術(shù)學(xué)院 陜西 咸陽 712000）

隨著科技的不斷進(jìn)步，在個人用戶體驗(yàn)的操作系統(tǒng)中已包含了眾多圖形算法和桌面渲染。隨著3D技術(shù)的發(fā)展，人們越來越傾向于基于Web的3D真實(shí)感體驗(yàn)，研究人員目前正在大力研究這個問題。電子相冊制作到目前為止還局限在圖像頁面的動態(tài)切換中，用戶無法真實(shí)體現(xiàn)閱讀時的翻頁效果，基于Silverlight平臺的電子相冊的制作，加強(qiáng)了3D顯示效果，讓用戶體驗(yàn)真實(shí)的翻頁效果，為更好的說明設(shè)計(jì)研究，本文先簡單介紹電子相冊制作軟件和Silverlight平臺。

1 電子相冊制作軟件和Silverlight平臺介紹

隨著圖像處理技術(shù)的進(jìn)步，電子相冊軟件亦逐漸成熟，有很多的種類，依照功能的側(cè)重點(diǎn)不同，大致可以分為管理類和制作兩大類，管理類的電子相冊軟件如Photo Family、蘋果的iPhoto等軟件都是側(cè)重于對照片的管理和瀏覽，電子相冊軟件的制作功能，通常不具備照片的管理功能，主要用于為用戶提供人如數(shù)碼大師2010、Memories On TV等的制作功能，提供具有專業(yè)水準(zhǔn)的照片過渡效果。

微軟Silverlight是一個跨瀏覽器的、跨平臺的插件，可以對運(yùn)行在Mac或Windows上的主流瀏覽器提供高質(zhì)量視頻信息的快速、低成本的傳遞。傳統(tǒng)Web應(yīng)用程序呈現(xiàn)界面是以HTML方式，在Web服務(wù)端已出現(xiàn)界面混亂、頻繁刷新的現(xiàn)象，難以表達(dá)眾多媒體元素。

能夠?qū)崿F(xiàn)RIA應(yīng)用的Silverlight技術(shù)采用多媒體界面，達(dá)到通過Web服務(wù)進(jìn)行獲取數(shù)據(jù)資源的目的。而Silverlight平臺是使用XAML（可擴(kuò)展應(yīng)用程序標(biāo)記語言）語言進(jìn)行藐視多媒體界面，在表現(xiàn)層框架提供矢量圖形、文本圖像扥信息，具有成本低、開發(fā)率高的特點(diǎn)，表1是Silverlight、Flex和Ajax平臺的對比，開發(fā)人員在使用XAML語言時可以詳細(xì)的定置所有用戶界面元素，合理布局整個界面，語言整體與HTML比較類似，本身是一種組織良好的XML文檔，與HTML語言相比，這種語言更加具有嚴(yán)謹(jǐn)性和明確性，在編程中通過這種語言能夠?qū)崿F(xiàn)軟件的自動生成，不需要編寫HTML代碼就可以生成一種比較美觀的畫面。WPF包含了程序代碼和XAML語言，是運(yùn)行在NET架構(gòu)下為用戶界面提供統(tǒng)一描述的一種操作方法，能構(gòu)帶跟人們前所未有的3D效果，所以可以使用期進(jìn)行創(chuàng)建輕量級動畫。Silverlight在使用中更加傾向于研發(fā)人員，在原有的基礎(chǔ)上急性改變，開發(fā)效率比較高。

表1 Silverlight、Flex和Ajax平臺的對比Tab.1 Table 1 Silverlight，F(xiàn)lex and Ajax platform

2 系統(tǒng)設(shè)計(jì)總體框架結(jié)構(gòu)

Silverlight平臺下的3D點(diǎn)則相冊翻頁設(shè)計(jì)如圖1所示在Silverlight客戶端包括變現(xiàn)層進(jìn)而傳達(dá)到WCF代理類，通過Web服務(wù)器傳輸?shù)綌?shù)據(jù)庫，其中在Web服務(wù)器中又包含了流媒體服務(wù)、觸摸識別服務(wù)、顏色限時服務(wù)、鼠標(biāo)識別服務(wù)、互動顯示服務(wù)以及互動反饋服務(wù)等，同時還包含了業(yè)務(wù)層和數(shù)據(jù)層。

客戶端采用Silverlight構(gòu)建，界面元素使用XAML語言來進(jìn)行描述。在服務(wù)器端系統(tǒng)構(gòu)建WCF服務(wù)，程序的控制采用服務(wù)驅(qū)動的模式實(shí)現(xiàn)。WCF服務(wù)通過業(yè)務(wù)層和數(shù)據(jù)層槽孔數(shù)據(jù)庫，在客戶端通過WCF代理與WCF服務(wù)以異步調(diào)用的方式進(jìn)行通訊，在序列化數(shù)據(jù)后傳回到Silverlight客戶端。本設(shè)計(jì)系統(tǒng)分為系統(tǒng)數(shù)據(jù)操作層、系統(tǒng)功能表現(xiàn)層以及系統(tǒng)業(yè)務(wù)邏輯層三層，在此基礎(chǔ)上，系統(tǒng)模塊用分為兩位創(chuàng)建通用元素、創(chuàng)建翻頁效果、創(chuàng)建用戶界面、創(chuàng)建縮略圖效果、執(zhí)行初始化操作以及配置HTML頁面等，其中整個系統(tǒng)的設(shè)計(jì)基礎(chǔ)時中底層的基礎(chǔ)模塊，本設(shè)計(jì)的整個系統(tǒng)對Web的操作和控件綁定的操作都能夠使用本模塊進(jìn)行完成，業(yè)務(wù)邏輯層的模塊包括通用元素模塊、翻頁效果模塊、縮略圖效果模塊以及用戶界面模塊，這些所有模塊都作為整個文本的邏輯進(jìn)行支撐，系統(tǒng)通過模塊采用Web的操作來進(jìn)行控制，經(jīng)過一定處理后在變現(xiàn)層呈現(xiàn)給用戶。

3 3D電子相冊實(shí)現(xiàn)翻頁效果分析

由于電子相冊翻頁過程屬于多個圖片的現(xiàn)實(shí)和處理過程，因此無論什么平臺都必須支持流媒體，頁面翻轉(zhuǎn)屬于一個具有連續(xù)性動作的過程，包括3個動畫效果過程，主要基于屬性的動畫、嵌入式動畫的剪裁等，在進(jìn)行設(shè)計(jì)翻頁程序時，需要考慮頁面的對稱和翻頁以及控制翻頁過程這兩個問題。圖2是頁面翻轉(zhuǎn)示意圖。

在頁面翻頁過程中有很多動作是在同時發(fā)生的，對稱線兩側(cè)的奇偶頁面可以認(rèn)為是對稱的，如上圖所示虛線代表奇偶頁面的區(qū)分，如原來頁面A慢慢消失，而面積C則是逐漸變大，下方出現(xiàn)的面積B也是逐漸增大。在翻轉(zhuǎn)過程中需要控制A、B、C三個區(qū)域，在變化過程中面積A是不對稱的，本身還是一種不規(guī)則圖形，因此難以使用算法來進(jìn)行計(jì)算，同時面積B和C也是不對稱的，均可以采取代碼來進(jìn)行實(shí)現(xiàn)。

圖1 Silverlight平臺下的3D點(diǎn)則相冊翻頁設(shè)計(jì)Fig.1 Silverlight platform of 3 d points of photo album page design

圖2 是頁面翻轉(zhuǎn)示意圖Fig.2 Page flip

本文提出的算法實(shí)現(xiàn)包括首先先創(chuàng)建對稱線，進(jìn)而創(chuàng)建動畫的面積B得到面積B的可操作的圖像。進(jìn)而在創(chuàng)建面積C的圖像，當(dāng)頁面的對稱線在45度和90度之間移動時，頁面全部打開設(shè)定為90度，頁面的左右兩側(cè)分別是邊緣，控制對稱線活動的狀態(tài)分別在45度和90度。具體設(shè)計(jì)程序?yàn)椋?/p>

function page turn（）:Void

line on mouse=function（）

line.x=xmounse

if（line x>PAGE EDGE）line x=PAGE EDGE

else if（line x

以上程序顯示的對稱線通常被與輸在了頁面的左右兩側(cè)（主要是頁面的邊緣區(qū)域）之間，45度是控制對呈現(xiàn)活動的狀態(tài)始末，頁面的邊緣位置則規(guī)定出現(xiàn)在對稱線為90度時的位置。利用對稱線的角的度數(shù)公式來創(chuàng)建動畫剪輯的實(shí)例，使用函數(shù)來作為程序處理得實(shí)例線，在處理翻轉(zhuǎn)頁面時，先證明約束之間的界限，同時確保鼠標(biāo)移動的同時能夠產(chǎn)生動畫效果，由于每幀的反應(yīng)速度在這里得到大大提高，因此了已使用一定的操作來保證畫面的評價動畫性，是每個動畫都能夠達(dá)到最佳的時機(jī)，為確保當(dāng)用戶釋放動畫師停止線的電影剪輯還需要使用一定程度來進(jìn)行刪除操作。

以往創(chuàng)建的網(wǎng)頁無法實(shí)現(xiàn)不同面積間的覆蓋，由于網(wǎng)頁翻轉(zhuǎn)過程是把頁面放置到堆成頁面的過程，所以兩個頁面之間要表現(xiàn)出空間性或者或是重疊性，如在處理頁面的舉行和對稱線是需要在后臺進(jìn)行操作，但是在用戶界面則是沒有發(fā)生什么變化，只能夠看出頁面的區(qū)域發(fā)生了變化，因此不需要將代碼嵌入到影片的剪輯中，因此提出灰色矩形和對稱線的處理，當(dāng)用戶單機(jī)紅色區(qū)域時，灰色矩形開始遮掩頁面2，當(dāng)對稱線在45度時，沒有完成遮蔽動作，此時頁面不可見，也可以說此時頁面2被完全覆蓋住了（此時的對稱線位置在90度），這個反轉(zhuǎn)的過程可以說是不可逆轉(zhuǎn)的。代碼設(shè)計(jì)時，剪輯頁面使用遮蔽頁面，其中包含實(shí)例botompage，通過setMask、bottomPage和line.rightMask進(jìn)行創(chuàng)建頁面B。

在創(chuàng)建第二個頁面時，需要采用專業(yè)的反向邊緣來增加第2也的面積和反向轉(zhuǎn)折頁，當(dāng)用戶鼠標(biāo)開始點(diǎn)擊觸發(fā)事件后，頁面就可以開始進(jìn)行工作。此時頁面顯示的某一區(qū)域就是需要現(xiàn)實(shí)的頁面A，頁面A的內(nèi)容主要是分開對稱線的奇數(shù)頁面（也就是說在對稱線的左側(cè)面積）。頁面C的創(chuàng)建中增加第二頁的面積和反向轉(zhuǎn)折頁，以對稱線為基準(zhǔn)，轉(zhuǎn)動公式為：backPsge.-rotation=90*（line.x PAGE SPINE）/page.width。 嵌入的影片剪輯如副刊旋轉(zhuǎn)等來作為頁面的背面，此時頁面的轉(zhuǎn)換內(nèi)容除了需要包含自身的事件動作，還需要包括相對頁面下邊線處理的動作，為使頁面得到自然順暢的目的，需要考慮將動畫的速度減慢，時期小于嵌入式[6]流媒體動作運(yùn)動的速度，這是因?yàn)樵谔幚砬度胧絼赢嫀熜枰捎帽容^復(fù)雜的二項(xiàng)式來進(jìn)行計(jì)算，計(jì)算過程需要花費(fèi)一定的時間。用戶界面是建立在容器的基礎(chǔ)上，可以說是整個設(shè)計(jì)核心的基礎(chǔ)，主要是通過設(shè)計(jì)容器來達(dá)到目的，此設(shè)計(jì)的用戶模塊包含下載服務(wù)器的圖片進(jìn)度條、電子相冊的顯示區(qū)和縮略圖瀏覽器三個功能，這三個功能都是相互獨(dú)立的，開發(fā)思想同樣采用容器的概念。在用戶的界面功能完成之前，需要先對容器進(jìn)行預(yù)處理，也就是說將存儲在容器中的內(nèi)容進(jìn)行預(yù)處理，為他們賦予不同的屬性來控制其變化，然后在客戶端就可以顯示出頁面的變化，客戶僅需要使用可以直接進(jìn)行調(diào)用容器進(jìn)行實(shí)現(xiàn)。

4 結(jié)束語

綜上所述，文中簡單介紹電子相冊制作軟件和Silverlight，結(jié)合RIA客戶端的特點(diǎn)，研究在Silverlight平臺下，使用開發(fā)語言使用XAML語言，根據(jù)WPF的開發(fā)要求，構(gòu)建客戶端平臺，實(shí)現(xiàn)3D電子相冊的翻頁，為3D顯示效果提供了研究思路。

[1]張勇，李存華，王新華，等.基于Silverlight的3D電子相冊翻頁算法研究[J].南京師大學(xué)報(bào):自然科學(xué)版，2012（35）:143-148.ZHANG Yong，LI Cun-hua，WANG Xin-hua，et al.3D electronic photo album pages algorithm based on Silverlight study[J].Journal of Nanjing normal University:Natural Science Edition，2012（35）:143-148.

[2]蘭小機(jī)，段保霞，彭建偉．基于Ajax的WebGIS研究與應(yīng)用[J]．測繪科學(xué)，2009，34（2）:214-218．LAN Xiao-ji，DUAN Bao-xia，PENG Jian-wei.Based on WebGIS research and application of Ajax[J].Journal of Surveying and Mapping Science，2009（2）:214-218.

[3]孫超，鐘珞.基于Silverlight的富界面應(yīng)用研究[J].武漢理工大學(xué)學(xué)報(bào)，2008（12）:95-97.SUN Chao，ZHONG Luo.Rich interface based on Silverlight application study[J].Journal of Wuhan University of Technology，2008（12）:95-97.

[4]張東平.一個基于Silverlight的在線電子相冊系統(tǒng)構(gòu)建[J].中國人民大學(xué)信息資源管理學(xué)院，2012（15）:116-121.ZHANG Dong-ping.Build a Silverlight based online electronic photo album system[J].Journal of Renmin University of China Institute of Information Resources Management，2012（15）:116-121.

[5]陳素霞.用premierePro1.5制作電子相冊[J].內(nèi)蒙古科技與經(jīng)濟(jì)，2009（1）:62-63.CHEN Su-xia.Made the electronic photo album premiere-Pro1.5[J].Science and Technology and Economy of Inner Mongolia，2009（1）:62-63.

[6]郝玉鍇.嵌入式FTP服務(wù)器的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代電子技術(shù)，2013（14）：55-57.HAO Yu-kai.Design and realization of embedded FTP server[J].Modern Electronics Technique，2013（14）：55-57.