盧云霞

[摘要]該文對“魔力貼”——簽名圖模板在線編輯系統(tǒng)的分析和設(shè)計過程進行了概述；系統(tǒng)使用Eclipse Indigo SR2作為開發(fā)環(huán)境，客戶端應(yīng)用JavaScripts、JQuery、JQueryUI、JSON等技術(shù)完成在線圖片編輯功能；服務(wù)器端以Struts2-REST+Hibernate+JSP技術(shù)為依托，從實體類生成數(shù)據(jù)庫、使用MVC架構(gòu)，搭建Web應(yīng)用程序；全面實現(xiàn)簽名圖模板在線編輯系統(tǒng)。

[關(guān)鍵詞]GIF在線編輯器 JQueryUI JSON MVC REST

一、“魔力貼簽名隨心變”互聯(lián)網(wǎng)應(yīng)用選題介紹

（一）課題研究背景

隨著網(wǎng)絡(luò)的高速發(fā)展，網(wǎng)絡(luò)在人們的日常生活中已經(jīng)不可或缺。而網(wǎng)絡(luò)也催生出大批網(wǎng)友，他們酷愛使用網(wǎng)絡(luò)，喜歡在網(wǎng)絡(luò)上發(fā)表評論、心情，喜歡瀏覽各大門戶網(wǎng)站、行業(yè)網(wǎng)站、知名論壇等。尤其是論壇，網(wǎng)友發(fā)表新話題或者回復(fù)話題更為甚之。為了體現(xiàn)自己的特立獨行，網(wǎng)友樂于在各大網(wǎng)站的簽名板塊設(shè)計、展示屬于自己的個性簽名。而網(wǎng)友們更換個性簽名的頻率也不盡相同，從一月一次甚至幾分鐘一次。由于不同的網(wǎng)站不同板塊都可以設(shè)置屬于自己的個性簽名，而每當(dāng)網(wǎng)友想更換簽名時，就要更新所有板塊的個性簽名，這些操作相對繁瑣，也容易出錯、更容易漏掉某些需要更改簽名的區(qū)域。這些因素都將造成自身網(wǎng)絡(luò)形象不一的后果，是傳統(tǒng)手動修改個性簽名無法避免的。傳統(tǒng)的簽名以文字為主，形式單一；而豐富多變的色彩、圖案、背景等更能彰顯個性，表達心情。對網(wǎng)友而言他們需要的是一個便捷設(shè)置及修改個性簽名的方法。

網(wǎng)絡(luò)除了催生出大批網(wǎng)友，同時也孕育了出了一種全新的商業(yè)模式，即電子商務(wù)。無論是B2C、C2C，還是B2B商家，亦或是手握廠家分銷、代理貨源于一手的運作者，在當(dāng)今電子商務(wù)火爆之時，自然需要更多被人知曉的機會。而在各大論壇上發(fā)貼、跟貼，介紹自己商品資源，則是他們的常規(guī)手段。如果在制作精良的簽名圖中植入商家產(chǎn)品信息，無疑為這些商家節(jié)省了大量的廣告推廣費用，利用簽名圖小巧易于發(fā)布的“個性簽名”的特點可以使其產(chǎn)品有效曝光度大大增強并呈蔓延式鋪展開來。

（二）課題研究現(xiàn)狀及目的

“魔力貼”致力于將簽名圖制作變得更為統(tǒng)一、發(fā)布更為便捷--以外部鏈接的形式嵌入到需要引入簽名的各個其他應(yīng)用類型網(wǎng)站、產(chǎn)品及設(shè)備；當(dāng)個性簽名需要更改時，直接到“魔力貼”網(wǎng)站進行修改即可。目前以服務(wù)型網(wǎng)站形式致力于專業(yè)簽名圖模板提供的互聯(lián)網(wǎng)應(yīng)用市場領(lǐng)域還未被開發(fā)。 “魔力貼”正是在網(wǎng)絡(luò)發(fā)展過程中，有巨大市場需求空間的前景下構(gòu)思、開發(fā)、設(shè)計的。它主要面向兩類用戶：個性化應(yīng)用客戶與商家服務(wù)應(yīng)用客戶?！澳ЯN”為它們提供專業(yè)的簽名圖模板在線編輯互聯(lián)網(wǎng)絡(luò)應(yīng)用，提供集簽名圖模板庫分類提供、簽名圖設(shè)計、制作、發(fā)布于一體的一站式服務(wù)；為“魔力貼”用戶提供簽名圖模板，從而達到“一次更改、處處隨心而變”的效果。在技術(shù)路線上主要是通過服務(wù)器保存簽名圖模板，通過Web服務(wù)程序提供簽名模板編輯制作和發(fā)布簽名圖服務(wù)。其中，簽名圖模板在線編輯系統(tǒng)是整個“魔力貼”網(wǎng)站中的核心部分，也是本課題研究、設(shè)計與實現(xiàn)的重要內(nèi)容。

二、總體設(shè)計

（一）功能設(shè)計結(jié)構(gòu)

簽名圖模板在線編輯系統(tǒng)屬于“魔力貼”互聯(lián)網(wǎng)應(yīng)用中的重要組成部分，分為WEB客戶端與WEB服務(wù)器端；該在線編輯系統(tǒng)在客戶端實現(xiàn)用戶與系統(tǒng)的交互式編輯操作，通過優(yōu)化布局，給用戶好的視覺體驗。在用戶錄入基本信息后，通過所見即所得的Canvas框設(shè)計，讓用戶對設(shè)置的每一步效果有清晰、全過程掌控的優(yōu)越體驗。當(dāng)用戶提交編輯信息后，WEB客戶端的JavaScripts （以下簡稱JS）腳本應(yīng)能將以參數(shù)的形式打包成JSON字符串提交到WEB服務(wù)器進行處理。服務(wù)器端對客戶端提交請求進行響應(yīng)，實現(xiàn)相應(yīng)的業(yè)務(wù)邏輯處理，并完成數(shù)據(jù)持久化。根據(jù)上述設(shè)計思路，將系統(tǒng)的功能模塊進行劃分，詳見3.2。

（二）模塊功能圖

系統(tǒng)在WEB客戶端的功能應(yīng)能完成在線編輯器的界面設(shè)計；界面元素的拾取、選定、拖拽、改變大小、應(yīng)用特效、輸入?yún)?shù)值、點擊按鈕等交互式操作；對于在線編輯器中所做的參數(shù)設(shè)定以及交互式動作后產(chǎn)生的數(shù)據(jù)應(yīng)能夠進行相應(yīng)處理并保存在客戶端；同時提供對服務(wù)器的請求功能，將這些客戶端存儲的數(shù)據(jù)以某種形式發(fā)送給服務(wù)端進行處理。詳見模塊圖中第三級左邊的三個模塊。

根據(jù)分層軟件邏輯體系架構(gòu)模式的應(yīng)用，WEB服務(wù)器端功能中很重要的一塊是特效算法的實現(xiàn)，對于不同的效果需要使用不同的特效算法，并能通過統(tǒng)一的方式進行這些特效功能的訪問；特效的實現(xiàn)同時是GIF動態(tài)圖片生成的重要基礎(chǔ)。另外WEB服務(wù)器端功能還需要提供數(shù)據(jù)持久化及響應(yīng)控制等模塊。具體功能模塊圖見圖3.1所示：

圖3.1：簽名圖模板在線編輯系統(tǒng)模塊結(jié)構(gòu)圖

（三）主要技術(shù)路線

WEB客戶端大量采用JS技術(shù)，利用JQueryUI實現(xiàn)良好的用戶交互式體驗，采用JQuery框架實現(xiàn)頁面元素設(shè)計，通過按鈕、下拉框、分頁卡、以及Canvas框中實現(xiàn)對每一個可編輯對象拖拽、縮放的效果等。利用JSON可方便的將所有圖片、背景、簽名相關(guān)的參數(shù)設(shè)置打包成鍵值形式的字符串，通過JQuery的AJAX請求將經(jīng)過JQuery和JSON預(yù)處理的數(shù)據(jù)提交到WEB服務(wù)器。服務(wù)器端采用基于Struts2的REST插件響應(yīng)頁面請求，實現(xiàn)業(yè)務(wù)處理。利用HibernateORMapping框架實現(xiàn)數(shù)據(jù)持久化。

三、系統(tǒng)功能展示

本節(jié)將主要對在線模板編輯器的圖片拖拽、疊加、應(yīng)用特效的功能進行展示。用給定的用戶信息登錄“魔力貼簽名隨心變”互聯(lián)網(wǎng)應(yīng)用，進入“我的魔力帖”。如果是新注冊用戶，因為還沒有進行簽名圖模板編輯，則此處看不到簽名圖模板預(yù)覽。若登錄用戶已經(jīng)進行簽名圖模板編輯則，會有當(dāng)前用戶所有簽名圖模板展示，見圖3.2所示。

圖3.2：“魔力貼”簽名圖模板預(yù)覽界面圖

此圖展示的是針對3個圖應(yīng)用不同特效之后的疊加動畫效果，分別為漸隱、漸顯、中心放大。因截圖為靜態(tài)效果，下面將通過“創(chuàng)建新的魔力貼”功能來演示如何制作簽名圖模板。

點擊“創(chuàng)建新的魔力貼”鏈接，進入簽名圖模板編輯頁面。當(dāng)前頁面布局包括錄入當(dāng)前模板的基本信息的文本框，如：標題、修改時間、寬度、高度、幀數(shù)等。此外分頁卡中依次有背景、簽名、圖片、效果的初始化信息。見圖3.3所示：

圖3.3：“魔力貼”簽名圖在線編輯頁面圖

對“魔力帖”簽名圖在線編輯頁面進行基本信息錄入，修改標題名稱為“個性化簽名”，修改默認簽名處信息為“值得你信賴和擁有”，其他保持默認狀態(tài)（修改時間文本框不可編輯）。

選中“圖片”分頁卡，點擊“新建圖片”，在頁面布局最下方的Canvas顯示框中出現(xiàn)一個20×20像素的矩形框，用鼠標拖拽觸發(fā)JS腳本事件后，方可有效進行更改圖片操作，點擊應(yīng)用更改，即可完成圖片添加。同時分頁卡上會出現(xiàn)當(dāng)前選中對象的id及其屬性編輯信息。操作效果見圖3.4所示：

圖3.4：簽名圖模板圖片載入到Canvas框

再選中“效果”分頁卡，根據(jù)頁面中的“當(dāng)前對象”顯示的id值確定對某一圖片對象施加動畫效果，可選效果有：漸隱、漸顯、飛入、飛出、縮小、放大、變亮漸變、變暗漸變。選擇其中一種效果后（此處選擇飛出效果），單擊頁面“保存”按鈕，會對操作結(jié)果彈出提示。見圖3.5所示。此外也可以通過“新建圖片”，將其他的圖片添加到Canvas框中，完成更為復(fù)雜的疊加效果應(yīng)用。

圖3.5：點擊保存后彈出操作“提示信息”圖

返回“我的魔力帖”即可見制作的簽名圖模板預(yù)覽效果圖，見圖3.6所示：

圖3.6：不同時刻飛出動畫效果圖

經(jīng)過以上步驟的操作，圖片信息及其動畫效果均應(yīng)被持久化到數(shù)據(jù)庫中的SignTemplate表，從數(shù)據(jù)庫（此處測試數(shù)據(jù)庫為MySQL）查詢簽名圖模板信息見圖3.7所示：

圖3.7：SignTemplate表中查詢信息

通過以上頁面操作、測試，結(jié)合持久化數(shù)據(jù)進行分析，可知用戶頁面錄入信息與持久化數(shù)據(jù)記錄保持同步。進而可推導(dǎo)出如下結(jié)論：基于MVC架構(gòu)的簽名圖模板在線編輯頁面層、領(lǐng)域?qū)优c數(shù)據(jù)持久層之間通信良好。頁面層能夠正確收集由用戶輸入的信息，并交由領(lǐng)域邏輯層進行業(yè)務(wù)處理，將處理后的數(shù)據(jù)與用戶輸入記錄無差異化的持久化到數(shù)據(jù)庫中，證明了簽名圖模板在線編輯系統(tǒng)功能運行正常。

[參考文獻]

[1]丁一凡，姚遠.Web高級程序設(shè)計（Java&JSP;）.大連：大連理工大學(xué)出版社，2011：169-170，207.

[2]劉京華.JavaWeb整合開發(fā)王者歸來（JSP+Servlet+Struts+Hibernate+Spring）.北京：清華大學(xué)出版社，2010.1.

[3]孫衛(wèi)琴，精通Hibernate：Java對象持久化技術(shù)詳解[M].北京：電子工業(yè)出版社，2006.

[4]鄒天思.JavaScript程序設(shè)計.北京：人民郵電出版社，2009.

（作者單位：武昌工學(xué)院）