CN104267947B - 一种编辑弹窗图片的方法及弹窗图片编辑装置 - Google Patents

Abstract

本发明的实施例公开一种编辑弹窗图片的方法及弹窗图片编辑装置。编辑弹窗图片的方法包括：在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；在生成的弹窗模板中，导入待编辑图片对导入的待编辑图片进行编辑，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。应用本发明，可以降低弹窗编辑的成本、提升弹窗编辑效率。

Description

一种编辑弹窗图片的方法及弹窗图片编辑装置

技术领域

本发明涉及计算机视窗技术，尤其涉及一种编辑弹窗图片的方法及弹窗图片编辑装置。

背景技术

随着计算机技术的发展，计算机设备，例如，移动电话、个人数字助理上所能安装的运营商提供的应用程序也越来越多，不同的运营商，为了进行业务推广，通过编写程序代码段，将包含用于提升用户业务体验的弹窗图片的业务活动通知或业务优惠通知设置在程序代码段中，通过编译生成弹窗资源文件，并采用弹窗的方式向计算机设备用户发送包含弹窗图片的业务活动通知或业务优惠通知等弹窗资源文件，计算机设备解析接收的弹窗资源文件，并以弹窗的方式显示解析的包含弹窗图片的业务活动通知或业务优惠通知等信息，使得计算机设备用户能够根据弹窗显示的信息获知运营商提供的业务或通知。或者，计算机设备用户基于自己的个性化需求，通过编写程序代码段，将图片(照片)设置在程序代码段中进行编辑和编译，生成弹窗资源文件，然后，以弹窗的方式将图片显示在好友的浏览器显示界面，从而将编辑的个性化弹窗与好友进行分享。

现有技术中，弹窗资源文件一般采用基于标准的可扩展标记语言(XML，eXtensible Markup Language)代码开发的代码编辑器进行编辑和编译，例如，可以基于XML Notepad、XML Editpro、FitstObject XML Editor等代码编辑器编辑和编译弹窗资源文件。以编辑弹窗资源文件为例，首先在代码编辑器中，利用XML定义脚本语法规则编写程序代码段以创建一弹窗文件，弹窗文件包含与弹窗图片资源相关的布局文件夹、皮肤命名文件夹以及动作文件夹，并为每一文件夹创建相应用于图片不同资源属性管理的一个或多个XML文件，在每一XML文件中，编写XML文件的基本框架内容的程序代码段；接着，通过编写调用函数的程序代码段的方法，将弹窗中待显示的图片转换为bmp格式，并分别插入到相应的三个文件夹中；然后，在相应管理图片资源的XML文件中，编写针对相应图片资源属性内容的程序代码段；最后，依据已编辑好的布局文件夹、皮肤命名文件夹以及动作文件夹，设置各文件夹中XML文件之间的层次关系，并调用脚本解析代码进行编译，从而生成以XML代码表示的弹窗资源文件。

由上述可见，现有编辑弹窗的方法，通过编写程序代码段的方式实现弹窗资源文件的编辑，对编程技术人员要求较高，需要编辑技术人员具有较高的程序编程技能，而一般计算机设备用户不具有程序编程技能，或程序编程技能较低，需要通过系统的学习和培训才能具有一定的编程技能，使得实现弹窗编辑的成本较高、弹窗编辑效率低；进一步地，需要针对每一文件夹中的每一XML文件，进行图片资源属性的设置，并在XML文件中的图片资源属性改变时，需要对相应XML文件进行更新，以及，需要依据弹窗的显示效果，设置各文件夹中XML文件之间的层次关系，需要编程技术人员熟悉程序代码段中各代码的逻辑关系以及对各程序代码段进行适应性改动，实现弹窗编辑的流程复杂、繁琐，对计算机设备用户要求高。

发明内容

有鉴于此，本发明实施例提供一种编辑弹窗图片的方法及弹窗图片编辑装置，降低弹窗编辑的成本、提升弹窗编辑效率。

为达到上述目的，本发明的实施例采用如下技术方案：

一方面，本发明实施例提供一种编辑弹窗图片的方法，包括：

在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；

在生成的弹窗模板中，导入待编辑图片；

对导入的待编辑图片进行编辑，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

本发明实施例提供的编辑弹窗图片的方法，通过预先设置弹窗模板配置文件，并运行该弹窗模板配置文件，得到在浏览器中展示的弹窗模板，并在弹窗模板中编辑图片，由于在可视的弹窗模板中利用鼠标操作进行图片编辑，从而无需计算机设备用户具有程序编程技能，降低了实现弹窗编辑的成本，也提升了计算机设备用户编辑弹窗的效率。

另一方面，本发明实施例提供一种弹窗图片编辑装置，该装置包括：弹窗模板模块、图片导入模块以及弹窗资源文件生成模块，其中，

弹窗模板模块，用于在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；

图片导入模块，用于在生成的弹窗模板中，导入待编辑图片；

弹窗资源文件生成模块，用于对导入的待编辑图片进行编辑，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

本发明实施例提供的弹窗图片编辑装置，弹窗模板模块预先设置弹窗模板配置文件，并运行该弹窗模板配置文件，得到在浏览器中展示的弹窗模板，图片导入模块在弹窗模板中导入待编辑图片，弹窗资源文件生成模块在弹窗模板中编辑图片，生成弹窗资源文件以便推送或发布，由于在可视的弹窗模板中进行图片编辑，无需计算机设备用户具有程序编程技能，降低了实现弹窗编辑的成本，也提升了计算机设备用户编辑弹窗的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本发明实施例编辑弹窗图片的方法流程示意图；

图2为本发明实施例图片组元素结构表示意图；

图3为本发明实施例弹窗图片编辑装置结构示意图。

具体实施方式

下面结合附图对本发明实施例进行详细描述。

应当明确，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

图1为本发明实施例编辑弹窗图片的方法流程示意图。参见图1，该方法包括：

步骤101，在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；

本步骤中，编程技术人员通过统计并分析各弹窗的程序代码段，获取各弹窗图片中共有结构的代码段信息，利用XML定义脚本语法规则进行编辑后，调用脚本解析代码进行编译，以形成用于加载可生成弹窗模板的弹窗模板配置文件，计算机设备通过加载弹窗模板配置文件，对弹窗模板配置文件中的脚本语法规则进行反编译，得到弹窗模板，以供计算机设备用户基于弹窗模板进行弹窗编辑。

本发明实施例中，可以根据运营商的需求或计算机设备用户的实际需要，预先设置弹窗模板配置文件，弹窗模板配置文件中，包括弹窗图片布局(div)结构信息，其中，弹窗图片布局结构信息包括：背景元素、边框元素、图片组元素等元素，其中，背景元素为弹窗显示的背景，边框元素为弹窗所形成区域的边框，图片组元素中的各图片用于组成在弹窗显示的图片。当然，实际应用中，弹窗图片布局结构信息也可以进一步包括用于在弹窗中显示文本的文本段元素。

本发明实施例中，每一元素具有元素属性，例如，对于文本段元素，其元素属性包括：字体、颜色、大小等，对于图片组元素，其元素属性包括：对齐方式、大小、属性值，设置关联元素属性值采用包含该元素变量的函数进行表达。也就是说，后续应用中，可以对元素属性值进行编辑和修改，当某一元素属性值改动后，其相关联的元素属性值依据包含变量的函数进行相应改动，这样，通过利用XML定义脚本语法规则，设置以变量表示的包含弹窗图片布局结构信息的弹窗模板配置文件，从而在后续应用中，计算机设备用户可以基于该弹窗模板配置文件进行加载，得到弹窗模板，由于加载得到的弹窗模板为一可视的弹窗，从而可采用可视化编辑器将文字的代码翻译为可视的图片，在不编写程序代码段的情况下，通过对弹窗图片布局结构信息的操作，可以完成代码逻辑和参数的编辑，而非以XML代码表示的程序代码段，从而使得计算机设备用户可以在可视的弹窗模板中按照个性化需求进行弹窗编辑，无需计算机设备用户采用手工的方式，遍历整个程序代码段进行适应性修改。

作为可选实施例，本发明实施例中，图片组元素以图片组元素结构表的方式存储相应元素属性信息，一弹窗对应一图片组元素结构表。当然，实际应用中，弹窗也可以包括多个图片组元素，每一图片组元素对应一图片组元素结构表。

图2为本发明实施例图片组元素结构表示意图。参见图2，该图片组元素结构(PicResData)表包括：图片组标识(nID)、图片初始X坐标(nPosX)、图片初始Y坐标(nPosY)、图片尺寸(nSize)、图片标识(nResID)、图片属性(nAttri)、图片分块数(nCutPart)、图片父节点标识(nParentID)、图片手型操作(bIsHand)选项、图片初始选中操作(bIsSelect)选项。该图片族元素结构表是通过统计并分析各弹窗资源文件，例如，布局文件夹、皮肤命名文件夹以及动作文件夹中包含的程序代码段，获取各弹窗图片中共有结构的代码段信息，得到用于表征图片在弹窗中属性的结构信息，并将图片的各属性进行关联，以及，将各图片的属性进行关联。其中，图片属性表示图片的控件操作属性，例如，点击或双击该图片是否弹出相应操作控件，图片对应的链接信息(图片组元素结构表为相应操作控件中的一种)等，图片分块数表示将图片分为几部分进行处理，图片父节点标识表示该图片嵌套的图片标识，图片手型操作选项表示是否允许采用手型操作，图片初始选中操作选项表示在初始加载时，是否加载该图片。对于一弹窗对应一图片组元素结构表的情形，弹窗资源标识与图片组标识相同。

作为可选实施例，nID、nPosX、nPosY、nSize、nResID、nAttri、nCutPart、nParentID为整形(int)数据，bIsHand以及bIsSelect为布尔型(bool)数据。本发明实施例中，通过将弹窗中所需的各图片进行数据化，构建数据化的图片组元素结构表，利用图片组元素结构表中的图片位置关系(nPosX、nPosY、nSize)以及图片父节点标识信息，可以表征弹窗中各图片数据之间的联系，使得通过编辑图片组元素结构表即可实现对弹窗中图片的编辑，而且，编辑的图片组元素结构表可以实时在弹窗中展示，便于调整、修改图片，从而使得编辑弹窗不再需要计算机设备用户都具有编程基础。

当然，实际应用中，作为另一可选实施例，弹窗模板配置文件中，也可以采用XML定义的脚本语法规则格式行定义并设置各图片，脚本语法规则格式行可以如下：

<标签名称属性1＝”？”属性2＝“？”>内容</标签名称>

其中，标签为XML语法的基本单元，对应弹窗模板中包含的元素，即弹窗图片布局结构信息，包括：标签头、标签内容以及标签尾，标签头以括号<>为标识，标签尾以带斜杠的括号</>为标识，标签头和标签尾之间的部分为标签内容。

在标签头中，可以包含N个元素(N大于或等于0)的元素属性，元素属性包括属性名称以及属性内容。例如，如上所述，属性1、属性2为属性名称，举例来说，弹窗模板中的背景元素、边框元素、图片组元素、文本段元素等元素可以为属性名称，”？”为属性内容，举例来说，对于图片组元素，其图片组元素属性内容可以为图片组大小、位置等信息。实际应用中，标签之间可以互相嵌套，例如，一张图片嵌套在另一张图片中，再例如，还可以设置多个图片标签，并将设置的多个图片标签嵌套在上述的图片组元素名称中。

以图片地址来自于pic.png、图片宽100像素、高200像素、横坐标位置为20(x＝20)，对齐方式为居中(align＝”center”)的图片标签，采用XML定义的脚本语法规则格式行如下：

<img src＝”pic.png”width＝100height＝200x＝20align＝”center”></img>。

对于设置为变量的情形，在弹窗模板配置文件初次加载时，设置变量采用预先设置的默认值进行加载，加载的元素可以设置为空白元素。

再例如，对于字体为宋体、加粗、红色的文本段标签，采用XML定义的脚本语法规则如下：

<text font＝”宋体”color＝”#ff0000”blod＝TRUE>文本段内容部分</text>。

本发明实施例中，利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译为公知技术，在此略去详述。

步骤102，在生成的弹窗模板中，导入待编辑图片；

本步骤中，利用鼠标操作将编辑弹窗所需的待编辑图片导入图片组元素结构表中。

本发明实施例中，对于一计算机设备，可能需要存储不同弹窗所需的图片，在导入图片时，从存储的图片中查找编辑当前弹窗所需的图片并导入。因而，为了防止存储的图片标识发生重命名导致图片串号错误，在导入待编辑图片之前，该方法可以进一步包括：

设置包含多个弹窗图片子库的弹窗图片库，所述弹窗图片子库以弹窗资源标识进行区分，存储的图片以图片计数和图片资源名为图片标识，以使计算机设备用户依据所需编辑的弹窗资源标识，从所需编辑的弹窗资源标识映射的弹窗图片子库中，选取弹窗图片，并执行导入待编辑图片的流程。

本步骤中，为了使图片命名更加简单快捷，且能保障存储的图片之间不会串号，满足快速查询以及多人同时协作进行弹窗编辑，以弹窗为单位存储图片，并考虑在弹窗中图片较多的情况下，采用图片计数以减少图片串号现象。

本发明实施例中，弹窗图片库包括有多个弹窗图片子库，每一弹窗图片子库以相应的弹窗资源标识进行区分，并设置存储在弹窗图片库中的图片的图片标识由三部分组成，依序为弹窗资源标识、图片计数以及图片资源名。也就是说，图片标识结构为：弹窗资源ID+图片计数+图片资源名。其中，图片标识结构中的各部分之间可以利用预先设置的符号进行区分，例如，点号(.)、横折号(-)、逗号(，)等。当然，实际应用中，也可以表格的形式存储图片标识映射的图片。这样，通过弹窗资源标识进行分类，即使图片资源名相同的图片，只要其不属于同一弹窗，其弹窗资源标识不同，因而，也不会导致图片串号；而对于同一弹窗中图片资源名相同的图片，也可以通过图片计数进行区分，可以有效减少图片串号，从而避免由于图片串号导致更新的弹窗与预期不一致的现象发生。

本发明实施例中，每一弹窗图片子库对应存储一弹窗中使用过的所所有图片。这样，在查询弹窗中图片时，只需在该弹窗资源标识映射的弹窗图片子库中进行查询，而无需在整个弹窗图片库中进行查询，有效减少了查询所需的时间，提升了查询效率，使得编辑弹窗的效率得到提升。

作为一可选实施例，弹窗图片库中的图片(图片标识)可以存储为：

6000，01，action.bmp

其中，

6000为弹窗资源标识；

01为图片计数，表明该图片在该弹窗中的计数值为01；

Action.bmp为图片资源名。

作为一可选实施例，弹窗图片库以图片资源标识(POPRESID)表的形式进行存储，见表1，表1为一示意的图片资源标识表。

表1

表1中，每一弹窗资源ID映射一弹窗图片子库。其中，n，k为自然数，可根据实际需要进行设置。

步骤103，对导入的待编辑图片进行编辑，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

本步骤中，利用鼠标操作对导入的待编辑图片进行编辑，在得到弹窗资源文件后，可以对该弹窗资源文件进行推送或发布。

作为可选实施例，计算机设备用户可以按照弹窗中各图片的层次关系，在可视的弹窗模板中导入一待编辑图片后，对该图片进行编辑，并可在弹窗中显示即时编辑的效果；然后，依据层次关系，导入另一待编辑图片，并对该另一待编辑图片进行编辑，并可在弹窗中显示当前弹窗中已编辑的图片效果，直至最后一待编辑图片。当然，实际应用中，也可以一次性导入所有待编辑图片，例如，在弹窗模板中展示出所有导入的图片后，如果需要对某一图片进行编辑，则从导入的待编辑图片中选取。

本发明实施例中，作为一可选实施例，对导入的待编辑图片进行编辑包括：

A11，在弹窗模板中，依据弹窗中各图片的层次关系依序选取待编辑图片，利用鼠标拖拽事件将选取的待编辑图片的尺寸缩放至预设尺寸，拖动该缩放的待编辑图片至预先设置的位置；

本步骤中，图片的层次关系是指图片与图片之间是否存在嵌套，例如，默认当前编辑的图片为前景图片上一编辑的图片为背景图片。

本发明实施例中，鼠标操作包括鼠标拖拽事件，鼠标拖拽事件包括鼠标移动事件(mouseMoveEvent)、拖动到达事件(dragEnterEvent)以及拖动释放事件(dropEvent)。通过监听用户的鼠标拖拽事件，根据鼠标拖拽事件确定用户对图片的操作，例如，在监听到拖动到达事件后，选取图片，在监听到鼠标移动事件后，触发选取的图片依据鼠标移动事件而移动，在监听到鼠标拖动释放事件后，停止对选取的图片的移动，并结束监听。

A12，获取拖动至预先设置位置的图片的元素结构表信息，并写入该图片对应的图片组元素结构表中。

本步骤中，弹窗监测用户的操作，在用户操作完成后，获取用户操作对应的图片的位置信息(元素结构表信息)，并写入元素结构表中，并将图片父节点标识设置为上一已编辑图片的图片标识。

作为另一可选实施例，对导入的待编辑图片进行编辑包括：

A21，在弹窗模板中选取待编辑图片，双击该待编辑图片，触发展示该待编辑图片对应的图片组元素结构表；

A22，在展示的图片组元素结构表中，编辑相应的元素结构表信息，并依据编辑的元素结构表信息，调整在弹窗模板中展示的图片。

本步骤中，通过修改图片组元素结构表中相应元素属性变量值，可以对图片的位置以及层次关系进行编辑。例如，可以通过双击该待编辑图片，触发显示图片组元素结构表，并在图片组元素结构表中，对相应元素属性变量值参数进行设置，举例来说，设置图片标识(nResID)，编辑图片的图片初始X坐标(nPosX)、图片初始Y坐标(nPosY)、图片尺寸(nSize)，添加图片属性(nAttri)对应的响应操作(例如，鼠标移近图片时的响应，鼠标在该图片上按下的响应以及鼠标离开该图片时的响应，图片是否具有按钮操作属性)以及在该图片属性中，该图片为前景图还是背景图等。其中，坐图片初始X坐标(nPosX)以及图片初始Y坐标(nPosY)标信息可以是待编辑图片在图片组中的相对位置信息，例如，以图片组的左顶点为坐标轴的原点坐标，在每一待编辑图片对应的图片组元素结构表中，记录待编辑图片的左顶点在该坐标轴上的位置作为坐图片初始X坐标(nPosX)以及图片初始Y坐标(nPosY)标信息，以及，将该待编辑图片相应的宽度、高度作为图片尺寸(nSize)。

作为一可选实施例，弹窗模板与图片组元素结构表可以设置为以分栏的形式进行展示，例如，对于一待编辑图片，在双击该待编辑图片后，弹窗模板切分为左右分栏，左分栏为弹窗模板，右分栏为图片组元素结构表。

较佳地，可以采用显示与XML代码相分离的操作，也就是说，当对导入弹窗模板中的所有图片的操作终止时，才对XML代码进行改动，而针对图片的编辑、修改的操作全部都是先转换为图片组元素结构表中数据的编辑和修改，并在内存中保存该图片数据(图片组元素结构表)，在用户确认编辑完成后，才调用脚本解析代码编，将存储在内存中的图片数据进行编译转换为XML代码。

作为再一可选实施例，对导入的待编辑图片进行编辑包括：

A31，将脚本语法规则中的待编辑图片对应的脚本语法规则格式行以树形结构保存在内存中；

本步骤中，树形结构是一种通用的数据结构，通过树形结构，可以描述各标签包含的所有元素属性的层级(层次)关系和前后关系，以便后续可以根据该描述的关系作逐一处理。当然，实际应用中，也可以以其他形式的结构保存标签。

本发明实施例中，通过在内存中保存待编辑图片对应的标签，可以提升标签的处理速度。

A32，在弹窗模板中选取待编辑图片，以控件工具框的方式加载内存中保存的选取的该待编辑图片对应的脚本语法规则格式行中的标签，编辑标签内容并存储。

本步骤中，当在弹窗模板中选取待编辑图片，例如，点击待编辑图片，触发弹窗模板以控件工具框的方式加载内存中该待编辑图片对应的标签，从而使得计算机设备用户可以利用工具框，通过修改工具框中相应属性值的的方式，实现对图片的编辑。

当然，实际应用中，计算机设备用户也可以直接在弹窗模板中拖动待编辑图片实现对该待编辑图片的编辑，例如，点击待编辑图片后按住鼠标不放以拖动图片，或者，将鼠标置于图片边框，移动鼠标以对图片进行缩放处理等。

本发明实施例中，在监测到所有待编辑图片编辑完毕后，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，生成相应包含头文件以及XML文件的弹窗资源文件。其中，文件头用于记录图片标识，一图片标识对应一已编辑图片，XML文件用于记录各已编辑图片在图片组中的图片组元素结构信息，例如，相对位置信息。

较佳地，该方法还可以进一步包括：

B11，接收弹窗资源文件，对所述弹窗资源文件进行解析，得到待展示弹窗的元素以及各元素的元素结构信息；

B12，按照各元素的元素结构信息进行加载，得到弹窗图片并在弹窗中进行展示。

作为一可选实施例，在进行展示之后，该方法还可以进一步包括：

当检测到对所述弹窗中图片属性的触发操作时，解析所述图片属性，得到链接信息，在计算机设备浏览器中打开所述链接信息对应的网页。

本步骤中，链接信息包括但不限于网页链接。

由上述可见，本发明实施例编辑弹窗图片的方法，由于对弹窗XML结构进行了可视化编辑，计算机设备用户只需在可视界面上进行图片操作和参数填写就能完成XML的代码编辑，因而，可以通过鼠标等方式拖动图片进行编辑，并设置各图片之间的层次关系，或者，编辑图片组元素结构表中的图片元素结构信息，从而无需计算机设备用户具有程序编程技能，降低了实现弹窗编辑的成本，也提升了计算机设备用户编辑弹窗的效率。进一步地，由于弹窗中相关联的元素属性值之间采用包含变量的函数进行表达，当变量值改变时，相关联的变量值根据函数表达式自动更新，无需遍历整个程序代码段进行适应性修改，也进一步提升了编辑弹窗的效率；而且，能够有效避免非编程技术人员在进行弹窗编辑时，编写程序代码段导致的错误，也解决了弹窗结构上较为复杂导致的对相关编程技术人员和非编程技术人员在编辑和测试成本上的消耗，能够实现安全、快速的弹窗开发。具体来说，具有如下又以技术效果：

第一，本发明实施例编辑弹窗图片的方法，通过预设弹窗模板配置文件，使得产品人员(计算机设备用户)、运营人员甚至是开发人员(编程技术人员)将不再依赖手动的创建弹窗的基本结构和框架填写，可有效的减少新创建弹窗的时间。

第二，不再要求创建弹窗或编辑弹窗的人员具有程序代码编程技能，无需编写程序代码段，降低弹窗的开发难度，从而无需培训人员，也降低了弹窗编辑的成本。

第三，由于是可视化编辑器，在图片进行改动后，不再需要人员在程序代码段中查询相关程序代码，对图片改动引起的其他图片改动进行程序代码的适应性修改，降低图片的摆放位置的编辑时间，可有效提高弹窗编辑效率。

图3为本发明实施例弹窗图片编辑装置结构示意图。参见图3，该装置包括：弹窗模板模块301、图片导入模块302以及弹窗资源文件生成模块303，其中，

弹窗模板模块301，用于在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；

本发明实施例中，弹窗模板配置文件中包括弹窗图片布局结构信息，其中，所述弹窗图片布局结构信息包括：背景元素、边框元素、图片组元素以及文本段元素。其中，

图片组元素包括：图片组标识、图片初始X坐标、图片初始Y坐标、图片尺寸、图片标识、图片属性、图片分块数、图片父节点标识、图片手型操作选项以及图片初始选中操作选项。

较佳地，可以利用XML定义脚本语法规则，设置以变量表示的图片初始X坐标、图片初始Y坐标以及图片尺寸。对于具有嵌套关系的图片，采用包含该元素变量的函数进行表达。例如，以变量表示的第一图片的图片初始X坐标为x、图片初始Y坐标为y，以及图片尺寸为(x+a，y+b)，则对于与第一图片具有嵌套关系的第二图片，包含第一图片的元素变量的函数表达式可以为：初始X坐标为x+x1、图片初始Y坐标为y+y1，以及图片尺寸为(x+x1+c，y+y1+d)，其中，x，y为变量，可根据图片在弹窗中的位置变动而变动，a、b、c、d、x1、x2、y1、y2，可以为变量，也可以为常量。

图片导入模块302，用于在生成的弹窗模板中，导入待编辑图片；

弹窗资源文件生成模块303，用于对导入的待编辑图片进行编辑，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

本发明实施例中，作为可选实施例，弹窗资源文件生成模块303可以包括：图片缩放及拖动单元、元素结构表信息获取单元以及编译单元(图中未示出)，其中，

图片缩放及拖动单元，用于在弹窗模板中，依据弹窗中各图片的层次关系依序选取待编辑图片，利用鼠标拖拽事件将选取的待编辑图片的尺寸缩放至预设尺寸，拖动该缩放的待编辑图片至预先设置的位置；

元素结构表信息获取单元，用于获取拖动至预先设置位置的图片的元素结构表信息，并写入该图片对应的图片组元素结构表中；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

作为另一可选实施例，弹窗资源文件生成模块303也可以包括：控件触发单元、元素结构表信息编辑单元以及编译单元(图中未示出)，其中，

控件触发单元，用于在弹窗模板中选取待编辑图片，双击该待编辑图片，触发展示该待编辑图片对应的图片组元素结构表；

元素结构表信息编辑单元，用于在展示的图片组元素结构表中，编辑相应的元素结构表信息，并依据编辑的元素结构表信息，调整在弹窗模板中展示的图片；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

作为再一可选实施例，所述弹窗模板配置文件中，采用XML定义的脚本语法规则格式行定义并设置各图片，所述弹窗资源文件生成模块303也可以包括：存储单元、控件编辑单元以及编译单元(图中未示出)，其中，

存储单元，用于将脚本语法规则中的待编辑图片对应的脚本语法规则格式行以树形结构保存在内存中；

控件编辑单元，用于在弹窗模板中选取待编辑图片，以控件工具框的方式加载内存中保存的选取的该待编辑图片对应的脚本语法规则格式行中的标签，编辑标签内容并存储；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

作为一可选实施例，该装置还可以进一步包括：

弹窗图片存储模块304，用于设置包含多个弹窗图片子库的弹窗图片库，所述弹窗图片子库以弹窗资源标识进行区分，存储的图片以图片计数和图片资源名为图片标识，以使计算机设备用户依据所需编辑的弹窗资源标识，从所需编辑的弹窗资源标识映射的弹窗图片子库中，选取弹窗图片，并执行导入待编辑图片的流程。

本发明实施例中，存储在弹窗图片库中的图片的图片标识由三部分组成，依序为弹窗资源标识、图片计数以及图片资源名。也就是说，图片标识结构为：弹窗资源ID+图片计数+图片资源名。

作为另一可选实施例，该装置还可以进一步包括：

弹窗展示模块305，用于接收弹窗资源文件，对所述弹窗资源文件进行解析，得到待展示弹窗的元素以及各元素的元素结构信息；按照各元素的元素结构信息进行加载，得到弹窗图片并在弹窗中进行展示。

本发明实施例中，作为再一可选实施例，该装置还可以进一步包括：

链接模块306，用于当检测到对所述弹窗中图片属性的触发操作时，解析所述图片属性，得到链接信息，在计算机设备浏览器中打开所述链接信息对应的网页。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (15)

1.一种编辑弹窗图片的方法，其特征在于，该方法包括：

在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的，利用XML定义脚本语法规则，设置以变量表示的所述弹窗模板配置文件中的图片初始X坐标、图片初始Y坐标以及图片尺寸；

在生成的弹窗模板中，导入待编辑图片；

对导入的待编辑图片进行编辑，编辑的图片实时在弹窗中展示，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件；

在所述导入待编辑图片之前，所述方法进一步包括：

设置包含多个弹窗图片子库的弹窗图片库，所述弹窗图片子库以弹窗资源标识进行区分，存储的图片以图片计数和图片资源名为图片标识，以使计算机设备用户依据所需编辑的弹窗资源标识，从所需编辑的弹窗资源标识映射的弹窗图片子库中，选取弹窗图片，并执行导入待编辑图片的流程。

2.根据权利要求1所述的方法，其特征在于，所述弹窗模板配置文件中包括弹窗图片布局结构信息，其中，所述弹窗图片布局结构信息包括：背景元素、边框元素、图片组元素以及文本段元素。

3.根据权利要求2所述的方法，其特征在于，所述图片组元素包括：图片组标识、图片初始X坐标、图片初始Y坐标、图片尺寸、图片标识、图片属性、图片分块数、图片父节点标识、图片手型操作选项以及图片初始选中操作选项。

4.根据权利要求1至3任一项所述的方法，其特征在于，所述对导入的待编辑图片进行编辑包括：

在弹窗模板中，依据弹窗中各图片的层次关系依序选取待编辑图片，利用鼠标拖拽事件将选取的待编辑图片的尺寸缩放至预设尺寸，拖动该缩放的待编辑图片至预先设置的位置；

获取拖动至预先设置位置的图片的元素结构表信息，并写入该图片对应的图片组元素结构表中。

5.根据权利要求1至3任一项所述的方法，其特征在于，所述对导入的待编辑图片进行编辑包括：

在弹窗模板中选取待编辑图片，双击该待编辑图片，触发展示该待编辑图片对应的图片组元素结构表；

在展示的图片组元素结构表中，编辑相应的元素结构表信息，并依据编辑的元素结构表信息，调整在弹窗模板中展示的图片。

6.根据权利要求1所述的方法，其特征在于，所述弹窗模板配置文件中，采用XML定义的脚本语法规则格式行定义并设置各图片。

7.根据权利要求6所述的方法，其特征在于，所述对导入的待编辑图片进行编辑包括：

将脚本语法规则中的待编辑图片对应的脚本语法规则格式行以树形结构保存在内存中；

在弹窗模板中选取待编辑图片，以控件工具框的方式加载内存中保存的选取的该待编辑图片对应的脚本语法规则格式行中的标签，编辑标签内容并存储。

8.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

接收弹窗资源文件，对所述弹窗资源文件进行解析，得到待展示弹窗的元素以及各元素的元素结构信息；

按照各元素的元素结构信息进行加载，得到弹窗图片并在弹窗中进行展示。

9.根据权利要求8所述的方法，其特征在于，所述方法进一步包括：

当检测到对所述弹窗中图片属性的触发操作时，解析所述图片属性，得到链接信息，在计算机设备浏览器中打开所述链接信息对应的网页。

10.一种弹窗图片编辑装置，其特征在于，该装置包括：弹窗模板模块、图片导入模块、弹窗图片存储模块以及弹窗资源文件生成模块，其中，

弹窗模板模块，用于在计算机设备浏览器中加载预先设置的弹窗模板配置文件，生成弹窗模板，所述弹窗模板配置文件为利用XML定义脚本语法规则设置弹窗图片布局结构信息，并调用脚本解析代码，对设置的弹窗图片布局结构信息进行编译生成的；

图片导入模块，用于在生成的弹窗模板中，导入待编辑图片；

弹窗资源文件生成模块，用于对导入的待编辑图片进行编辑，编辑的图片实时在弹窗中展示，调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件；

所述弹窗模板配置文件中包括弹窗图片布局结构信息，其中，所述弹窗图片布局结构信息包括：背景元素、边框元素、图片组元素以及文本段元素，其中，

图片组元素包括：图片组标识、图片初始X坐标、图片初始Y坐标、图片尺寸、图片标识、图片属性、图片分块数、图片父节点标识、图片手型操作选项以及图片初始选中操作选项，利用XML定义脚本语法规则，设置以变量表示的所述图片初始X坐标、图片初始Y坐标以及图片尺寸；

弹窗图片存储模块，用于设置包含多个弹窗图片子库的弹窗图片库，所述弹窗图片子库以弹窗资源标识进行区分，存储的图片以图片计数和图片资源名为图片标识，以使计算机设备用户依据所需编辑的弹窗资源标识，从所需编辑的弹窗资源标识映射的弹窗图片子库中，选取弹窗图片，并执行导入待编辑图片的流程。

11.根据权利要求10所述的装置，其特征在于，所述装置进一步包括：

弹窗展示模块，用于接收弹窗资源文件，对所述弹窗资源文件进行解析，得到待展示弹窗的元素以及各元素的元素结构信息；按照各元素的元素结构信息进行加载，得到弹窗图片并在弹窗中进行展示。

12.根据权利要求11所述的装置，其特征在于，所述装置进一步包括：

链接模块，用于当检测到对所述弹窗中图片属性的触发操作时，解析所述图片属性，得到链接信息，在计算机设备浏览器中打开所述链接信息对应的网页。

13.根据权利要求10所述的装置，其特征在于，所述弹窗资源文件生成模块包括：图片缩放及拖动单元、元素结构表信息获取单元以及编译单元，其中，

图片缩放及拖动单元，用于在弹窗模板中，依据弹窗中各图片的层次关系依序选取待编辑图片，利用鼠标拖拽事件将选取的待编辑图片的尺寸缩放至预设尺寸，拖动该缩放的待编辑图片至预先设置的位置；

元素结构表信息获取单元，用于获取拖动至预先设置位置的图片的元素结构表信息，并写入该图片对应的图片组元素结构表中；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

14.根据权利要求10所述的装置，其特征在于，所述弹窗资源文件生成模块包括：控件触发单元、元素结构表信息编辑单元以及编译单元，其中，

控件触发单元，用于在弹窗模板中选取待编辑图片，双击该待编辑图片，触发展示该待编辑图片对应的图片组元素结构表；

元素结构表信息编辑单元，用于在展示的图片组元素结构表中，编辑相应的元素结构表信息，并依据编辑的元素结构表信息，调整在弹窗模板中展示的图片；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。

15.根据权利要求10所述的装置，其特征在于，所述弹窗模板配置文件中，采用XML定义的脚本语法规则格式行定义并设置各图片，所述弹窗资源文件生成模块包括：存储单元、控件编辑单元以及编译单元，其中，

存储单元，用于将脚本语法规则中的待编辑图片对应的脚本语法规则格式行以树形结构保存在内存中；

控件编辑单元，用于在弹窗模板中选取待编辑图片，以控件工具框的方式加载内存中保存的选取的该待编辑图片对应的脚本语法规则格式行中的标签，编辑标签内容并存储；

编译单元，用于调用脚本解析代码对编辑好的弹窗模板中的各待编辑图片进行编译，得到弹窗资源文件。