logo好方法网

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


技术摘要:
本发明实施例公开了一种图片热区生成方法、装置、设备和存储介质。该方法包括:获取存储有图片热区生成信息的配置文件,其中,图片热区生成信息包含容器信息、图片信息和点击区域信息,图片信息、点击区域信息和容器信息分别对应于的图片、点击区域和容器,且图片和点  全部
背景技术:
图片热区技术是指在一张图片上使用程序划定若干个肉眼不可见的区域(即图片 热区),当鼠标点击该区域时会读取该区域中设置的url地址并进行跳转。 在应用程序中图片热区的应用很常见。以微信小程序为例,目前,开发人员面对微 信小程序的图片热区开发场景时,通常是按点击区域将一张图片切割成多张子图片,并将 切割出的每张子图片放入一个微信小程序元素中,同时为每个小程序元素指定点击事件, 最后再通过微信小程序的布局代码将这些子图片拼接起来。 在实现本发明过程中,发明人发现现有技术中至少存在如下问题:(1)多张子图增 加了图片显示过程中的http请求数量,降低了设备的请求性能。(2)多张子图的显示布局实 现复杂度高,提升开发成本。
技术实现要素:
本发明实施例提供一种图片热区生成方法、装置、设备和存储介质,以实现更加高 效地生成应用程序中的图片热区,提高应用程序性能和响应速度,降低开发成本。 第一方面,本发明实施例提供了一种图片热区生成方法,包括: 获取存储有图片热区生成信息的配置文件,其中,所述图片热区生成信息包含容 器信息、图片信息和点击区域信息,所述图片信息、所述点击区域信息和所述容器信息分别 对应于图片、点击区域和容器,且所述图片和所述点击区域布局在所述容器内; 通过预设组件解析所述配置文件,生成用于描述所述图片热区生成信息中各元素 的布局关系的目标图片热区代码; 通过渲染引擎执行所述目标图片热区代码,展现所述图片,并且在所述图片上覆 盖不可见的点击区域。 第二方面,本发明实施例还提供了一种图片热区生成装置,该装置包括: 配置文件获取模块,用于获取存储有图片热区生成信息的配置文件,其中,所述图 片热区生成信息包含容器信息、图片信息和点击区域信息,所述图片信息、所述点击区域信 息和所述容器信息分别对应于图片、点击区域和容器,且所述图片和所述点击区域布局在 所述容器内; 目标图片热区代码生成模块,用于通过预设组件解析所述配置文件,生成用于描 述所述图片热区生成信息中各元素的布局关系的目标图片热区代码; 图片热区生成模块,用于通过渲染引擎执行所述目标图片热区代码,展现所述图 片,并且在所述图片上覆盖不可见的点击区域。 第三方面,本发明实施例还提供了一种电子设备,该电子设备包括: 4 CN 111736740 A 说 明 书 2/11 页 一个或多个处理器; 存储装置,用于存储一个或多个程序, 当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理 器实现本发明任意实施例所提供的图片热区生成方法。 第四方面,本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机 程序,该计算机程序被处理器执行时实现本发明任意实施例所提供的图片热区生成方法。 本发明实施例通过获取存储有图片热区生成信息的配置文件,其中,图片热区生 成信息包含容器信息、图片信息和点击区域信息,图片信息、点击区域信息和容器信息分别 对应于图片、点击区域和容器,且图片和点击区域布局在容器内;通过预设组件解析配置文 件,生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码;通过渲染 引擎执行目标图片热区代码,展现图片,并且在图片上覆盖不可见的点击区域。实现了根据 配置文件自动生成用于描述图片热区生成信息中各元素的布局关系的目标图片热区代码, 并通过代码的运行来展示图片及图片热区,达到了不切割图片即可在图片上划分多个可点 击区域,且每个点击区域可跳转到不同的页面的目的,提高了应用程序中图片热区的生成 效率和开发效率,同时提高了应用程序的性能和响应速度。 附图说明 图1是本发明实施例一中的一种图片热区生成方法的流程图; 图2是本发明实施例一中的一种配置文件的存储结构示意图; 图3是本发明实施例一中的一种图片和点击区域之间的透视关系示意图; 图4是本发明实施例一中的可视化配置文件生成工具中页面交互操作与配置文件 生成的过程示意图; 图5是本发明实施例一中的预设组件的组件构成示意图; 图6是本发明实施例二中的一种图片热区生成方法的流程图; 图7是本发明实施例二中的初始图片热区生成代码的示意图; 图8是本发明实施例二中的目标图片热区生成代码的示意图; 图9是本发明实施例三中的一种图片热区生成装置的结构示意图; 图10是本发明实施例四中的一种电子设备的结构示意图。
分享到:
收藏