互联网应用——“魔力贴”签名图模板在线编辑系统

卢云霞

[摘要]该文对“魔力贴”——签名图模板在线编辑系统的分析和设计过程进行了概述；系统使用Eclipse Indigo SR2作为开发环境，客户端应用JavaScripts、JQuery、JQueryUI、JSON等技术完成在线图片编辑功能；服务器端以Struts2-REST+Hibernate+JSP技术为依托，从实体类生成数据库、使用MVC架构，搭建Web应用程序；全面实现签名图模板在线编辑系统。

[关键词]GIF在线编辑器 JQueryUI JSON MVC REST

一、“魔力贴签名随心变”互联网应用选题介绍

（一）课题研究背景

随着网络的高速发展，网络在人们的日常生活中已经不可或缺。而网络也催生出大批网友，他们酷爱使用网络，喜欢在网络上发表评论、心情，喜欢浏览各大门户网站、行业网站、知名论坛等。尤其是论坛，网友发表新话题或者回复话题更为甚之。为了体现自己的特立独行，网友乐于在各大网站的签名板块设计、展示属于自己的个性签名。而网友们更换个性签名的频率也不尽相同，从一月一次甚至几分钟一次。由于不同的网站不同板块都可以设置属于自己的个性签名，而每当网友想更换签名时，就要更新所有板块的个性签名，这些操作相对繁琐，也容易出错、更容易漏掉某些需要更改签名的区域。这些因素都将造成自身网络形象不一的后果，是传统手动修改个性签名无法避免的。传统的签名以文字为主，形式单一；而丰富多变的色彩、图案、背景等更能彰显个性，表达心情。对网友而言他们需要的是一个便捷设置及修改个性签名的方法。

网络除了催生出大批网友，同时也孕育了出了一种全新的商业模式，即电子商务。无论是B2C、C2C，还是B2B商家，亦或是手握厂家分销、代理货源于一手的运作者，在当今电子商务火爆之时，自然需要更多被人知晓的机会。而在各大论坛上发贴、跟贴，介绍自己商品资源，则是他们的常规手段。如果在制作精良的签名图中植入商家产品信息，无疑为这些商家节省了大量的广告推广费用，利用签名图小巧易于发布的“个性签名”的特点可以使其产品有效曝光度大大增强并呈蔓延式铺展开来。

（二）课题研究现状及目的

“魔力贴”致力于将签名图制作变得更为统一、发布更为便捷--以外部链接的形式嵌入到需要引入签名的各个其他应用类型网站、产品及设备；当个性签名需要更改时，直接到“魔力贴”网站进行修改即可。目前以服务型网站形式致力于专业签名图模板提供的互联网应用市场领域还未被开发。 “魔力贴”正是在网络发展过程中，有巨大市场需求空间的前景下构思、开发、设计的。它主要面向两类用户：个性化应用客户与商家服务应用客户。“魔力贴”为它们提供专业的签名图模板在线编辑互联网络应用，提供集签名图模板库分类提供、签名图设计、制作、发布于一体的一站式服务；为“魔力贴”用户提供签名图模板，从而达到“一次更改、处处随心而变”的效果。在技术路线上主要是通过服务器保存签名图模板，通过Web服务程序提供签名模板编辑制作和发布签名图服务。其中，签名图模板在线编辑系统是整个“魔力贴”网站中的核心部分，也是本课题研究、设计与实现的重要内容。

二、总体设计

（一）功能设计结构

签名图模板在线编辑系统属于“魔力贴”互联网应用中的重要组成部分，分为WEB客户端与WEB服务器端；该在线编辑系统在客户端实现用户与系统的交互式编辑操作，通过优化布局，给用户好的视觉体验。在用户录入基本信息后，通过所见即所得的Canvas框设计，让用户对设置的每一步效果有清晰、全过程掌控的优越体验。当用户提交编辑信息后，WEB客户端的JavaScripts （以下简称JS）脚本应能将以参数的形式打包成JSON字符串提交到WEB服务器进行处理。服务器端对客户端提交请求进行响应，实现相应的业务逻辑处理，并完成数据持久化。根据上述设计思路，将系统的功能模块进行划分，详见3.2。

（二）模块功能图

系统在WEB客户端的功能应能完成在线编辑器的界面设计；界面元素的拾取、选定、拖拽、改变大小、应用特效、输入参数值、点击按钮等交互式操作；对于在线编辑器中所做的参数设定以及交互式动作后产生的数据应能够进行相应处理并保存在客户端；同时提供对服务器的请求功能，将这些客户端存储的数据以某种形式发送给服务端进行处理。详见模块图中第三级左边的三个模块。

根据分层软件逻辑体系架构模式的应用，WEB服务器端功能中很重要的一块是特效算法的实现，对于不同的效果需要使用不同的特效算法，并能通过统一的方式进行这些特效功能的访问；特效的实现同时是GIF动态图片生成的重要基础。另外WEB服务器端功能还需要提供数据持久化及响应控制等模块。具体功能模块图见图3.1所示：

图3.1：签名图模板在线编辑系统模块结构图

（三）主要技术路线

WEB客户端大量采用JS技术，利用JQueryUI实现良好的用户交互式体验，采用JQuery框架实现页面元素设计，通过按钮、下拉框、分页卡、以及Canvas框中实现对每一个可编辑对象拖拽、缩放的效果等。利用JSON可方便的将所有图片、背景、签名相关的参数设置打包成键值形式的字符串，通过JQuery的AJAX请求将经过JQuery和JSON预处理的数据提交到WEB服务器。服务器端采用基于Struts2的REST插件响应页面请求，实现业务处理。利用HibernateORMapping框架实现数据持久化。

三、系统功能展示

本节将主要对在线模板编辑器的图片拖拽、叠加、应用特效的功能进行展示。用给定的用户信息登录“魔力贴签名随心变”互联网应用，进入“我的魔力帖”。如果是新注册用户，因为还没有进行签名图模板编辑，则此处看不到签名图模板预览。若登录用户已经进行签名图模板编辑则，会有当前用户所有签名图模板展示，见图3.2所示。

图3.2：“魔力贴”签名图模板预览界面图

此图展示的是针对3个图应用不同特效之后的叠加动画效果，分别为渐隐、渐显、中心放大。因截图为静态效果，下面将通过“创建新的魔力贴”功能来演示如何制作签名图模板。

点击“创建新的魔力贴”链接，进入签名图模板编辑页面。当前页面布局包括录入当前模板的基本信息的文本框，如：标题、修改时间、宽度、高度、帧数等。此外分页卡中依次有背景、签名、图片、效果的初始化信息。见图3.3所示：

图3.3：“魔力贴”签名图在线编辑页面图

对“魔力帖”签名图在线编辑页面进行基本信息录入，修改标题名称为“个性化签名”，修改默认签名处信息为“值得你信赖和拥有”，其他保持默认状态（修改时间文本框不可编辑）。

选中“图片”分页卡，点击“新建图片”，在页面布局最下方的Canvas显示框中出现一个20×20像素的矩形框，用鼠标拖拽触发JS脚本事件后，方可有效进行更改图片操作，点击应用更改，即可完成图片添加。同时分页卡上会出现当前选中对象的id及其属性编辑信息。操作效果见图3.4所示：

图3.4：签名图模板图片载入到Canvas框

再选中“效果”分页卡，根据页面中的“当前对象”显示的id值确定对某一图片对象施加动画效果，可选效果有：渐隐、渐显、飞入、飞出、缩小、放大、变亮渐变、变暗渐变。选择其中一种效果后（此处选择飞出效果），单击页面“保存”按钮，会对操作结果弹出提示。见图3.5所示。此外也可以通过“新建图片”，将其他的图片添加到Canvas框中，完成更为复杂的叠加效果应用。

图3.5：点击保存后弹出操作“提示信息”图

返回“我的魔力帖”即可见制作的签名图模板预览效果图，见图3.6所示：

图3.6：不同时刻飞出动画效果图

经过以上步骤的操作，图片信息及其动画效果均应被持久化到数据库中的SignTemplate表，从数据库（此处测试数据库为MySQL）查询签名图模板信息见图3.7所示：

图3.7：SignTemplate表中查询信息

通过以上页面操作、测试，结合持久化数据进行分析，可知用户页面录入信息与持久化数据记录保持同步。进而可推导出如下结论：基于MVC架构的签名图模板在线编辑页面层、领域层与数据持久层之间通信良好。页面层能够正确收集由用户输入的信息，并交由领域逻辑层进行业务处理，将处理后的数据与用户输入记录无差异化的持久化到数据库中，证明了签名图模板在线编辑系统功能运行正常。

[参考文献]

[1]丁一凡，姚远.Web高级程序设计（Java&JSP;）.大连：大连理工大学出版社，2011：169-170，207.

[2]刘京华.JavaWeb整合开发王者归来（JSP+Servlet+Struts+Hibernate+Spring）.北京：清华大学出版社，2010.1.

[3]孙卫琴，精通Hibernate：Java对象持久化技术详解[M].北京：电子工业出版社，2006.

[4]邹天思.JavaScript程序设计.北京：人民邮电出版社，2009.

（作者单位：武昌工学院）