CN111736740A - 图片热区生成方法、装置、设备和存储介质 - Google Patents

Abstract

本发明实施例公开了一种图片热区生成方法、装置、设备和存储介质。该方法包括：获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于的图片、点击区域和容器，且图片和点击区域信息对应的点击区域布局在容器信息对应的容器内；通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。通过上述技术方案，实现了更加高效地生成应用程序中的图片热区，提高了应用程序性能和响应速度，降低了开发成本。

Description

图片热区生成方法、装置、设备和存储介质

技术领域

本发明实施例涉及计算机技术，尤其涉及一种图片热区生成方法、装置、设备和存储介质。

背景技术

图片热区技术是指在一张图片上使用程序划定若干个肉眼不可见的区域(即图片热区)，当鼠标点击该区域时会读取该区域中设置的url地址并进行跳转。

在应用程序中图片热区的应用很常见。以微信小程序为例，目前，开发人员面对微信小程序的图片热区开发场景时，通常是按点击区域将一张图片切割成多张子图片，并将切割出的每张子图片放入一个微信小程序元素中，同时为每个小程序元素指定点击事件，最后再通过微信小程序的布局代码将这些子图片拼接起来。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：(1)多张子图增加了图片显示过程中的http请求数量，降低了设备的请求性能。(2)多张子图的显示布局实现复杂度高，提升开发成本。

发明内容

本发明实施例提供一种图片热区生成方法、装置、设备和存储介质，以实现更加高效地生成应用程序中的图片热区，提高应用程序性能和响应速度，降低开发成本。

第一方面，本发明实施例提供了一种图片热区生成方法，包括：

获取存储有图片热区生成信息的配置文件，其中，所述图片热区生成信息包含容器信息、图片信息和点击区域信息，所述图片信息、所述点击区域信息和所述容器信息分别对应于图片、点击区域和容器，且所述图片和所述点击区域布局在所述容器内；

通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码；

通过渲染引擎执行所述目标图片热区代码，展现所述图片，并且在所述图片上覆盖不可见的点击区域。

第二方面，本发明实施例还提供了一种图片热区生成装置，该装置包括：

配置文件获取模块，用于获取存储有图片热区生成信息的配置文件，其中，所述图片热区生成信息包含容器信息、图片信息和点击区域信息，所述图片信息、所述点击区域信息和所述容器信息分别对应于图片、点击区域和容器，且所述图片和所述点击区域布局在所述容器内；

目标图片热区代码生成模块，用于通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码；

图片热区生成模块，用于通过渲染引擎执行所述目标图片热区代码，展现所述图片，并且在所述图片上覆盖不可见的点击区域。

第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明任意实施例所提供的图片热区生成方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现本发明任意实施例所提供的图片热区生成方法。

本发明实施例通过获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内；通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。实现了根据配置文件自动生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码，并通过代码的运行来展示图片及图片热区，达到了不切割图片即可在图片上划分多个可点击区域，且每个点击区域可跳转到不同的页面的目的，提高了应用程序中图片热区的生成效率和开发效率，同时提高了应用程序的性能和响应速度。

附图说明

图1是本发明实施例一中的一种图片热区生成方法的流程图；

图2是本发明实施例一中的一种配置文件的存储结构示意图；

图3是本发明实施例一中的一种图片和点击区域之间的透视关系示意图；

图4是本发明实施例一中的可视化配置文件生成工具中页面交互操作与配置文件生成的过程示意图；

图5是本发明实施例一中的预设组件的组件构成示意图；

图6是本发明实施例二中的一种图片热区生成方法的流程图；

图7是本发明实施例二中的初始图片热区生成代码的示意图；

图8是本发明实施例二中的目标图片热区生成代码的示意图；

图9是本发明实施例三中的一种图片热区生成装置的结构示意图；

图10是本发明实施例四中的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

本实施例提供的图片热区生成方法可适用于应用程序中图片热区的设置，例如微信小程序中图片热区的设置。该方法可以由图片热区生成装置来执行，该装置可以由软件和/或硬件的方式实现，该装置可以集成在可运行应用程序的电子设备中，例如典型的是用户终端设备，例如手机、平板电脑或智能手表等。参见图1，本实施例的方法具体包括如下步骤：

S110、获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内。

其中，图片热区生成信息是指生成应用程序中的图片热区所需的信息。容器信息是指应用程序中进行界面布局时的容器的信息，例如容器的布局位置和容器大小等。容器是指容纳其他界面布局元素的元素。图片信息是指承载不可见的图片热区的可见图片的信息，例如图片的布局位置和图片大小等。点击区域信息是指图片热区对应的不可见的、用于接收用户点击行为并关联点击后的跳转链接的区域的信息，例如点击区域的布局位置、区域大小和跳转链接等。容器信息、图片信息和点击区域信息的组合可以描述出相应容器、图片和点击区域的布局关系，即图片和点击区域布局在容器内。

本发明实施例中在生成微信小程序中的图片热区过程中，为了避免切割图片，且提高图片热区的生成效率，将包含容器信息、图片信息和点击区域信息的图片热区生成信息预先存储至配置文件中，且容器信息、图片信息和点击区域信息按照某种结构存储，该存储结构需要能够反映出图片和点击区域布局在容器中的元素间布局关系。这样，如果需要进行图片热区的重新布置，则只需修改配置文件即可，而不需要修改图片热区生成的逻辑代码，能提高小程序代码的可维护性，也能提高开发人员的开发效率。

本实施例中之所以额外设置容器元素，是考虑到在应用程序中进行显示的元素会占据一定的空间，且对相应元素进行坐标变化时默认会影响其他元素在整个界面中的位置，因此设置一个布局位置固定的容器元素来放置布局位置(即元素坐标值)可能变化的图片和点击区域，从而将元素坐标值变化的影响限定在容器内，而不影响其他元素的布局。

示例性地，配置文件的存储结构为：父节点存储容器信息，隶属于父节点的子节点存储图片信息和点击区域信息。由于容器用于容纳图片和点击区域，故本实施例在设置配置文件的存储结构时，将容器信息设置在顶层节点，即存储至父节点；同时，将图片信息和点击区域信息存储至隶属于该父节点的各子节点中。图片信息及布局在该图片范围内的各点击区域的点击区域信息(称为一组图片热区信息)可以存储在不同的子节点中，只需注明图片信息所在的子节点和点击区域信息所在的子节点之间的关联关系即可。一组图片热区信息也可以全部存储至同一个子节点中。如果一个子节点存储了至少两组图片热区信息，那么也需要注明图片信息和点击区域信息之间的关联关系。

配置文件的存储结构可参见图2，容器信息(container)存储在顶层父节点中，其包含容器标识符、容器宽度和容器高度(图中未示出)等；图片信息和点击区域信息均存储在隶属于该父节点的同一个子节点中，且图片信息和点击区域信息属于并列关系。如此，为了区分两类信息，除了设置相应的标识符之外，还设置了元素类型的属性字段，那么，图片信息包含图片标识符、图片宽度、图片高度(图中未示出)、图片加载地址(即图片资源路径)、元素类型以及图片相对于容器的图片布局坐标(即图片坐标)等。点击区域包含点击区域标识符、点击区域宽度、点击区域高度(图中未示出)、点击后的跳转链接地址(即跳转路径)、元素类型以及点击区域相对于容器的点击区域布局坐标(即点击区域坐标)等。容器信息、图片信息和点击区域信息均可以数组来存储。这样设置的好处在于，可以更加全面且简明地表征容器、图片和点击区域的布局关系。

示例性地，配置文件通过可视化配置文件生成工具而生成，且配置文件的数据格式为可视化配置文件生成工具和应用程序均可识别的通用格式，其中，可视化配置文件生成工具通过测量由人机交互而布局的容器、图片和点击区域来获得容器信息、图片信息和点击区域信息。

虽然配置文件可以由人工编写而生成，但是手工方式编写配置文件有两个缺点：一是不够直观，需要调整元素的位置时需预估坐标值，同时需要把配置文件交给应用程序解析后才知道位置是否准确；二是编写配置文件只能具有相关专业知识的人员才能完成。所以，为了更加简便地生成配置文件，且提高配置文件中各元素的布局位置的精度，本实施例中利用具有直观的图形化界面和简单的操作交互方式的可视化配置文件生成工具来解决上述缺点。该可视化配置文件生成工具使用html元素来模拟配置文件中的容器、图片和点击区域，在操作交互上主要使用js语言，交互行为上使用点击来添加元素、选中元素，使用拖动来设置某个元素的位置和宽高。上述可视化配置文件生成工具的操纵过程为：导入图片--在图片上放置点击区域并调整好大小和坐标--导出配置文件。

以图2的配置文件为例，为了用html呈现配置文件中定义的信息，需要以下关键元素：一个宽度指定为750px的div元素作为容器，其位置position属性设置为relative；每个点击区域使用一个div元素来呈现，其位置position属性设置为absolute，且表征元素透视关系的透视属性z-index设为2(数值大的在上层)，同时该元素的dragable属性设置为true，以便可以拖动和调整大小；图片使用一个div元素里嵌套img元素来呈现，该div元素的位置position设置为absolute，透视属性z-index设为1。经过该设计，便可在浏览器中观察到图片上放置了多少点击区域，参见图3，可视效果类似于在图片310上盖了几块玻璃320，透过玻璃320可以看清下面的图片310，当移动玻璃320所在区域时，移动的是玻璃320本身。

通过web浏览器交互操作后，js语言可以测量出容器及放置在容器中的图片和各点击区域相对于该容器的起点坐标和元素自身的宽高。相应的测量属性是：offsetLeft(x坐标)和offsetParent(y坐标)来获取坐标值，clientWidth(宽度)和clientHeight(高度)来获取元素宽度和高度。之后，需要按照配置文件的存储结构来存储测量所得的信息。具体实施时，保存这些元素的信息需要使用一个js语言声明一个变量，当容器中插入元素、删除元素、拖动改变位置或大小时需要将元素的信息同步到js对象中。完整工作流程如图4，用户进入可视化制作页面后，可视化配置文件生成工具便初始化一个js对象来存储配置信息，此时可以通过对容器的设置操作在该配置信息中创建父节点，以存储容器信息。之后，js代码会持续监听交互操作，如插入图片或点击区域的点击按钮操作。当监听到图片插入操作后，js便向容器中插入相应的html元素以显示，并且js会测量该图片在容器中的相对坐标和图片大小，进而向js对象中存储的配置信息中增加子节点来存储图片信息。当js监听到用户针对图片的拖动修改操作后，会重新测量该图片在容器中的相对坐标和图片大小，进而修改js对象中存储的配置信息中的已有子节点中的图片信息。

需要说明的是，配置文件由可视化配置文件生成工具输出，且需输入至应用程序，故配置文件的数据格式应当为可视化配置文件生成工具和应用程序均可识别的通用格式，例如JSON格式，或者JavaScript语言文件(JS文件)格式。

S120、通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码。

其中，预设组件是指通过应用程序(如微信小程序)的定义组件功能而自定义的微信小程序的组件，也可称为标签。目标图片热区代码是指用于描述图片热区生成信息中各元素的布局关系的代码。

应用程序需要自动解析配置文件中的图片热区生成信息，且将解析出的信息应用至相应的组件，例如容器、图片和点击区域均需要微信小程序中的原生的视图(view)组件来布局，且图片需要原生的图像(image)组件来显示等。故为了在解析过程中还原配置文件中容器和图片、点击区域之间的布局关系，本发明实施例中自定义了包含原生组件在内的预设组件来解析配置文件，并将配置文件中的元素使用应用程序中的组件来呈现。该预设组件会读取配置文件中的信息，并将各类信息依次赋予相应的原生组件(如view组件、image组件等)，并设置各原生组件之间的布局关系，自动生成一段描述图片热区生成信息中各元素的布局关系的目标图片热区代码。

示例性地，参见图5，预设组件包含容器组件usermap、图片组件pic和点击区域组件maparea，并且容器组件中包含视图组件view，图片组件中包含视图组件view和图像组件image，点击区域组件中包含视图组件view。

S130、通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。

应用程序(如微信小程序)的渲染引擎执行目标图片热区代码，便可根据代码的描述来加载并呈现图片，并且在图片上放置各个不可见的点击区域，以覆盖图片的相应区域。这样，当用户点击某个点击区域时，便会触发点击区域中的点击事件的绑定跳转事件，并由页面专项功能来实现跳转链接的跳转。

相关技术中，将图片切割成N张子图片，使得图片加载时需发送N个http请求，而http请求从建立连接到服务器给出资源响应是一个昂贵的性能开销。而本发明实施例中不切割图片，将图片加载时的http请求降低为1个，提高了应用程序的性能和响应速度。另外，切割的图片越多，开发人员需要编写的布局排版代码越多，极大地增加了开发工作量；并且，如果一张图片的内容排版很复杂，会出现切割后无法再还原的情况。而本发明实施例由于不切割图片，极大程度上减少了图片布局的开发工作，且自动生成目标图片热区代码的方式能进一步降低开发人员的开发工作量。

本实施例的技术方案，通过获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内；通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。实现了根据配置文件自动生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码，并通过代码的运行来展示图片及图片热区，达到了不切割图片即可在图片上划分多个可点击区域，且每个点击区域可跳转到不同的页面的目的，提高了应用程序中图片热区的生成效率和开发效率，同时提高了应用程序的性能和响应速度。

在上述技术方案的基础上，通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码包括：以配置文件为输入参数，调用预设代码生成函数，获得目标图片热区代码，其中，预设代码生成函数用于实现通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码的功能。为了进一步提高开发人员的开发效率，本实施例中将配置文件自动解析以生成目标图片热区代码的功能封装为一个函数，即预设代码生成函数。这样，开发人员便可以配置文件为函数输入参数，来调用该预设代码生成函数，函数的输出便是目标图片热区代码。

实施例二

本实施例在上述实施例一的基础上，对“通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码”进行了进一步优化。其中与上述各实施例相同或相应的术语的解释在此不再赘述。参见图6，本实施例提供的图片热区生成方法包括：

S210、获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内。

S220、依据配置文件设置预设组件中的容器组件的数据源属性，创建初始图片热区代码，并通过容器组件中的容器视图组件解析配置文件中的父节点存储的容器信息，生成初始图片热区代码中的容器视图组件代码，以完善初始图片热区代码。

预设组件解析配置文件并生成代码的过程，首先是利用配置文件来设置预设组件中容器组件usermap的数据源属性data，即将配置文件赋值给usermap的data属性，完成初始图片热区代码的创建。之后，容器组件usermap将数据源属性data中的整个配置文件内容传递给后一层的view组件(即容器视图组件)，容器视图组件便会解析该配置文件中的父节点中存储的容器信息，来设置其布局样式属性，生成描述容器视图组件布局情况的代码，即容器视图组件代码，来完善初始图片热区代码。

示例性地，通过容器组件中的容器视图组件解析配置文件中的父节点存储的容器信息，生成初始图片热区代码中的容器视图组件代码包括：通过容器视图组件读取容器信息，并利用容器信息中的容器宽度、容器高度和相对定位的位置属性字段值设置容器视图组件的样式属性，生成初始图片热区代码中的容器视图组件代码。

生成容器视图组件代码的过程具体可以为：容器视图组件读取容器信息中的容器宽度、容器高度(图中未示出)和相对定位的位置属性字段值relative，并将各属性值赋值给该容器视图组件的样式属性style中的相应属性，便可生成容器视图组件代码。经过该操作后的初始图片热区代码结果可见图7。

S230、遍历配置文件中的各子节点，在子节点中存储信息的元素类型为图片类型时，通过预设组件中的图片组件解析子节点中的图片信息，或者在子节点中存储信息的元素类型为点击区域类型时，通过预设组件中的点击区域组件解析子节点中的点击区域信息，并将解析结果插入容器视图组件代码中，生成目标图片热区代码。

父节点信息解析完成后，便采用遍历的方式来解析配置文件中的各子节点，每个子节点的解析过程相同。以图2的配置文件为例，逐个解析子节点中的数组。先读取数组中的元素类型，判断其是图片类型还是点击区域类型。如果是图片类型，则该数组中存储的是图片信息，便通过图片组件来解析该数组，生成描述图片布局的图片组件代码。如果是点击区域类型，则该数组中存储的是点击区域信息，便通过点击区域组件来解析该数组，生成描述点击区域布局的点击区域组件代码。之后，将生成的图片组件代码和/或点击区域组件代码插入容器视图组件代码中，便生成了如图8所示的目标图片热区代码。

示例性地，通过预设组件中的图片组件解析子节点中的图片信息包括：依据图片信息设置图片组件的数据源属性，并通过图片组件中的图片视图组件读取图片信息；依据图片类型确定图片视图组件的布局透视属性为透视下层属性值，并利用绝对定位的位置属性字段值、透视下层属性值、以及图片信息中的图片宽度、图片高度和图片相对于容器的图片坐标设置图片视图组件的样式属性；利用图片信息中的图片资源路径，设置图片视图组件中的图像组件的图像路径属性，生成图片组件对应的图片组件代码，作为图片信息的解析结果。

S230中图片组件解析子节点中的图片信息的过程为：将图片信息所在的数组(对应于图8中的“子元素1的配置信息”)赋值给图片组件的数据源属性data，便将图片信息传递给图片组件内部的图片视图组件。该图片视图组件读取该图片信息中的元素类型为图片类型，则可确定图片视图组件的样式属性style中的布局透视属性z-index为数值相对较小的透视下层属性值(如1)；根据图片布局在容器内的设计，确定图片视图组件的样式属性style中的位置属性Position为绝对定位的位置属性字段值absolute；同时，图片视图组件读取该图片信息中的图片宽度、图片高度和图片相对于容器的图片坐标。然后，可利用绝对定位的位置属性字段值、透视下层属性值、图片宽度、图片高度(图中未示出)和图片相对于容器的图片坐标来设置图片视图组件的样式属性。之后，利用图片信息中的图片资源路径，设置图片视图组件中的图像组件image的图像路径属性，便可生成如图8中的图片组件对应的图片组件代码810。

示例性地，通过点击区域组件解析子节点中的点击区域信息包括：依据点击区域信息设置点击区域组件的数据源属性，并通过点击区域组件中的区域视图组件读取点击区域信息；依据点击区域类型确定区域视图组件的布局透视属性为透视上层属性值，并利用绝对定位的位置属性字段值、透视上层属性值、以及点击区域信息中的点击区域宽度、点击区域高度和点击区域相对于容器的点击区域坐标设置区域视图组件的样式属性；利用点击事件标识为区域视图组件设置绑定事件，并利用点击区域信息中的跳转路径设置绑定事件对应的触发事件，生成点击区域组件对应的点击区域组件代码，作为点击区域信息的解析结果。

S230中图片组件解析子节点中的点击区域信息的过程为：将点击区域信息所在的数组(对应于图8中的“子元素2的配置信息”)赋值给点击区域组件的数据源属性data，便将点击区域信息传递给点击区域组件内部的点击区域视图组件。该点击区域视图组件读取该点击区域信息中的元素类型为点击区域类型，则可确定点击区域视图组件的样式属性style中的布局透视属性z-index为数值相对较大的透视上层属性值(如2)；根据点击区域布局在容器内的设计，确定点击区域视图组件的样式属性style中的位置属性Position为绝对定位的位置属性字段值absolute；同时，点击区域视图组件读取该点击区域信息中的点击区域宽度、点击区域高度和点击区域相对于容器的点击区域坐标。然后，可利用绝对定位的位置属性字段值、透视上层属性值、点击区域宽度、点击区域高度(图中未示出)和点击区域相对于容器的点击区域坐标来设置点击区域视图组件的样式属性。再然后，将表明点击事件的标识信息(即点击事件标识，如onClick)赋值给时间绑定属性bindTap，为区域视图组件设置绑定事件。之后，将点击区域信息中的跳转路径赋值给跳转链接属性data-url，来设置绑定事件对应的触发事件，便可生成如图8中的点击区域组件对应的点击区域组件代码820。

S240、通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。

本实施例的技术方案，通过依据配置文件设置预设组件中的容器组件的数据源属性，创建初始图片热区代码，并通过容器组件中的容器视图组件解析配置文件中的父节点存储的容器信息，生成初始图片热区代码中的容器视图组件代码，以完善初始图片热区代码；遍历配置文件中的各子节点，在子节点中存储信息的元素类型为图片类型时，通过预设组件中的图片组件解析子节点中的图片信息，或者在子节点中存储信息的元素类型为点击区域类型时，通过预设组件中的点击区域组件解析子节点中的点击区域信息，并将解析结果插入容器视图组件代码中，生成目标图片热区代码。实现了利用自定义的容器组件、图片组件和点击区域组件来解析配置文件，并自动生成目标图片热区代码，提高了代码生成效率，从而进一步提高了图片热区生成效率。

实施例三

本实施例提供一种图片热区生成装置，参见图9，该装置具体包括：

配置文件获取模块910，用于获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内；

目标图片热区代码生成模块920，用于通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；

图片热区生成模块930，用于通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。

可选地，配置文件的存储结构为：父节点存储容器信息，隶属于父节点的子节点存储图片信息和点击区域信息。

可选地，目标图片热区代码生成模块920具体用于：

以配置文件为输入参数，调用预设代码生成函数，获得目标图片热区代码，其中，预设代码生成函数用于实现通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码的功能。

可选地，目标图片热区代码生成模块920包括：

初始图片热区代码生成子模块，用于依据配置文件设置预设组件中的容器组件的数据源属性，创建初始图片热区代码，并通过容器组件中的容器视图组件解析配置文件中的父节点存储的容器信息，生成初始图片热区代码中的容器视图组件代码，以完善初始图片热区代码；

目标图片热区代码生成子模块，用于遍历配置文件中的各子节点，在子节点中存储信息的元素类型为图片类型时，通过预设组件中的图片组件解析子节点中的图片信息，或者在子节点中存储信息的元素类型为点击区域类型时，通过预设组件中的点击区域组件解析子节点中的点击区域信息，并将解析结果插入容器视图组件代码中，生成目标图片热区代码。

进一步地，初始图片热区代码生成子模块具体用于：

通过容器视图组件读取容器信息，并利用容器信息中的容器宽度、容器高度和相对定位的位置属性字段值设置容器视图组件的样式属性，生成初始图片热区代码中的容器视图组件代码。

进一步地，目标图片热区代码生成子模块具体用于：

依据图片信息设置图片组件的数据源属性，并通过图片组件中的图片视图组件读取图片信息；

依据图片类型确定图片视图组件的布局透视属性为透视下层属性值，并利用绝对定位的位置属性字段值、透视下层属性值、以及图片信息中的图片宽度、图片高度和图片相对于容器的图片坐标设置图片视图组件的样式属性；

利用图片信息中的图片资源路径，设置图片视图组件中的图像组件的图像路径属性，生成图片组件对应的图片组件代码，作为图片信息的解析结果。

进一步地，目标图片热区代码生成子模块还具体用于：

依据点击区域信息设置点击区域组件的数据源属性，并通过点击区域组件中的区域视图组件读取点击区域信息；

依据点击区域类型确定区域视图组件的布局透视属性为透视上层属性值，并利用绝对定位的位置属性字段值、透视上层属性值、以及点击区域信息中的点击区域宽度、点击区域高度和点击区域相对于容器的点击区域坐标设置区域视图组件的样式属性；

利用点击事件标识为区域视图组件设置绑定事件，并利用点击区域信息中的跳转路径设置绑定事件对应的触发事件，生成点击区域组件对应的点击区域组件代码，作为点击区域信息的解析结果。

可选地，配置文件通过可视化配置文件生成工具而生成，且配置文件的数据格式为可视化配置文件生成工具和应用程序均可识别的通用格式，其中，可视化配置文件生成工具通过测量由人机交互而布局的容器、图片和点击区域来获得容器信息、图片信息和点击区域信息。

通过本发明实施例三的一种图片热区生成装置，实现了根据配置文件自动生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码，并通过代码的运行来展示图片及图片热区，达到了不切割图片即可在图片上划分多个可点击区域，且每个点击区域可跳转到不同的页面的目的，提高了应用程序中图片热区的生成效率和开发效率，同时提高了应用程序的性能和响应速度。

本发明实施例所提供的图片热区生成装置可执行本发明任意实施例所提供的图片热区生成方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述图片热区生成装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

实施例四

参见图10，本实施例提供了一种电子设备，其包括：一个或多个处理器1020；存储装置1010，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器1020执行，使得一个或多个处理器1020实现本发明实施例所提供的图片热区生成方法，包括：

获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内；

通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；

通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。

当然，本领域技术人员可以理解，处理器1020还可以实现本发明任意实施例所提供的图片热区生成方法的技术方案。

图10显示的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。如图10所示，该电子设备包括处理器1020、存储装置1010、输入装置1030和输出装置1040；电子设备中处理器1020的数量可以是一个或多个，图10中以一个处理器1020为例；电子设备中的处理器1020、存储装置1010、输入装置1030和输出装置1040可以通过总线或其他方式连接，图10中以通过总线1050连接为例。

存储装置1010作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的图片热区生成方法对应的程序指令/模块(例如，图片热区生成装置中的配置文件获取模块、目标图片热区代码生成模块和图片热区生成模块)。

存储装置1010可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置1010可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置1010可进一步包括相对于处理器1020远程设置的存储器，这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置1030可用于接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置1040可包括显示屏等显示设备。

实施例五

本实施例提供一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行一种图片热区生成方法，该方法包括：

获取存储有图片热区生成信息的配置文件，其中，图片热区生成信息包含容器信息、图片信息和点击区域信息，图片信息、点击区域信息和容器信息分别对应于图片、点击区域和容器，且图片和点击区域布局在容器内；

通过预设组件解析配置文件，生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码；

通过渲染引擎执行目标图片热区代码，展现图片，并且在图片上覆盖不可见的点击区域。

当然，本发明实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上的方法操作，还可以执行本发明任意实施例所提供的图片热区生成方法中的相关操作。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (11)

1.一种图片热区生成方法，其特征在于，包括：

获取存储有图片热区生成信息的配置文件，其中，所述图片热区生成信息包含容器信息、图片信息和点击区域信息，所述图片信息、所述点击区域信息和所述容器信息分别对应于图片、点击区域和容器，且所述图片和所述点击区域布局在所述容器内；

通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码；

通过渲染引擎执行所述目标图片热区代码，展现所述图片，并且在所述图片上覆盖不可见的点击区域。

2.根据权利要求1所述的方法，其特征在于，所述配置文件的存储结构为：父节点存储所述容器信息，隶属于所述父节点的子节点存储所述图片信息和所述点击区域信息。

3.根据权利要求2所述的方法，其特征在于，所述通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码包括：

以所述配置文件为输入参数，调用预设代码生成函数，获得所述目标图片热区代码，其中，所述预设代码生成函数用于实现所述通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码的功能。

4.根据权利要求1或3所述的方法，其特征在于，所述通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码包括：

依据所述配置文件设置所述预设组件中的容器组件的数据源属性，创建初始图片热区代码，并通过所述容器组件中的容器视图组件解析所述配置文件中的父节点存储的所述容器信息，生成所述初始图片热区代码中的容器视图组件代码，以完善所述初始图片热区代码；

遍历所述配置文件中的各子节点，在所述子节点中存储信息的元素类型为图片类型时，通过所述预设组件中的图片组件解析所述子节点中的所述图片信息，或者在所述子节点中存储信息的元素类型为点击区域类型时，通过所述预设组件中的点击区域组件解析所述子节点中的所述点击区域信息，并将解析结果插入所述容器视图组件代码中，生成所述目标图片热区代码。

5.根据权利要求4所述的方法，其特征在于，所述通过所述容器组件中的容器视图组件解析所述配置文件中的父节点存储的所述容器信息，生成所述初始图片热区代码中的容器视图组件代码包括：

通过所述容器视图组件读取所述容器信息，并利用所述容器信息中的容器宽度、容器高度和相对定位的位置属性字段值设置所述容器视图组件的样式属性，生成所述初始图片热区代码中的容器视图组件代码。

6.根据权利要求4所述的方法，其特征在于，所述通过所述预设组件中的图片组件解析所述子节点中的所述图片信息包括：

依据所述图片信息设置所述图片组件的数据源属性，并通过所述图片组件中的图片视图组件读取所述图片信息；

依据所述图片类型确定所述图片视图组件的布局透视属性为透视下层属性值，并利用绝对定位的位置属性字段值、所述透视下层属性值、以及所述图片信息中的图片宽度、图片高度和图片相对于容器的图片坐标设置所述图片视图组件的样式属性；

利用所述图片信息中的图片资源路径，设置所述图片视图组件中的图像组件的图像路径属性，生成所述图片组件对应的图片组件代码，作为所述图片信息的解析结果。

7.根据权利要求4所述的方法，其特征在于，所述通过所述点击区域组件解析所述子节点中的所述点击区域信息包括：

依据所述点击区域信息设置所述点击区域组件的数据源属性，并通过所述点击区域组件中的区域视图组件读取所述点击区域信息；

依据所述点击区域类型确定所述区域视图组件的布局透视属性为透视上层属性值，并利用绝对定位的位置属性字段值、所述透视上层属性值、以及所述点击区域信息中的点击区域宽度、点击区域高度和点击区域相对于容器的点击区域坐标设置所述区域视图组件的样式属性；

利用点击事件标识为所述区域视图组件设置绑定事件，并利用所述点击区域信息中的跳转路径设置所述绑定事件对应的触发事件，生成所述点击区域组件对应的点击区域代码，作为所述点击区域信息的解析结果。

8.根据权利要求1所述的方法，其特征在于，所述配置文件通过可视化配置文件生成工具而生成，且所述配置文件的数据格式为所述可视化配置文件生成工具和应用程序均可识别的通用格式，其中，所述可视化配置文件生成工具通过测量由人机交互而布局的所述容器、所述图片和所述点击区域来获得所述容器信息、所述图片信息和所述点击区域信息。

9.一种图片热区生成装置，其特征在于，包括：

配置文件获取模块，用于获取存储有图片热区生成信息的配置文件，其中，所述图片热区生成信息包含容器信息、图片信息和点击区域信息，所述图片信息、所述点击区域信息和所述容器信息分别对应于图片、点击区域和容器，且所述图片和所述点击区域布局在所述容器内；

目标图片热区代码生成模块，用于通过预设组件解析所述配置文件，生成用于描述所述图片热区生成信息中各元素的布局关系的目标图片热区代码；

图片热区生成模块，用于通过渲染引擎执行所述目标图片热区代码，展现所述图片，并且在所述图片上覆盖不可见的点击区域。

10.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的图片热区生成方法。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8中任一所述的图片热区生成方法。

Images