[发明专利]一种基于图片像素围栏的点击交互方法和装置

说明书

本发明公开了一种基于图片像素围栏的点击交互方法和装置，涉及自动程序设计领域。该方法的一具体实施方式包括：响应于对前端界面中任一位置的点击操作，采集屏幕点击坐标，将所述屏幕点击坐标转换为像素点坐标；判断所述像素点坐标是否落入任一可交互区域的围栏内；若落入，则获取所落入围栏内的交互事件并执行，否则不进行交互操作。该实施方式预先使用围栏圈定页面图中的可交互区域，在用户点击前端界面后，可以自动获知用户点击位置，自动响应交互事件，且整个代码框架可以复用，以此实现快速开发页面图的目的。

技术领域

本发明涉及自动程序设计领域，尤其涉及一种基于图片像素围栏的点击交互方法和装置。

背景技术

当前各类移动应用或网页都会加载多种多样的HTML页面，页面上设有图片和按钮，按钮需要添加点击事件。目前针对前端页面中的交互点击事件，一般是将整张设计图切割为背景图片和小图片块，然后再通过编写前端代码(HTML/CSS/XML)方式，对图片块进行位置摆放和点击事件设置，从而实现交互响应或事件埋点。

在实现本发明的过程中，发明人发现现有技术至少存在如下问题：

1、开发过程繁琐，需把页面中涉及到点击事件的按钮切图出来，然后摆到设计图纸上，工作量较大。且需使用前端开发语言设计布局，比如Android界面、iOS界面、HTML界面等，要求较高；

2、代码不具备复用性，每张页面图都需重新切图和开发，无法复用历史开发成果，造成重复劳动多；

3、功能受限，目前仅针对整张图片设置点击事件或数据埋点，无法针对单个图片中的内部区域设置。另外，若用户点击是的整张图片，而又无法获知用户点击的具体区域，此时无法实现图片内部区域点击响应和数据埋点。

发明内容

有鉴于此，本发明实施例提供一种基于图片像素围栏的点击交互方法和装置，至少能够解决现有技术中页面开发过程繁琐、代码不具备复用性和功能受限的问题。

为实现上述目的，根据本发明实施例的一个方面，提供了一种基于图片像素围栏的点击交互方法，包括：

响应于对前端界面中任一位置的点击操作，采集屏幕点击坐标，将所述屏幕点击坐标转换为像素点坐标；

判断所述像素点坐标是否落入任一可交互区域的围栏内；其中，前端界面与页面图对应，页面图由可交互区域和非交互区域组成；

若落入，则获取所落入围栏内的交互事件并执行，否则不进行交互操作。

可选的，在所述响应于对前端界面中任一位置的点击操作之前，还包括：对所述页面图、图片框架、配置的交互事件的代码进行编译，得到可执行文件，并输出可交互的前端界面进行显示；其中，所述可执行文件包括所述可交互的前端界面。

可选的，在所述对所述页面图、图片框架、配置的交互事件的代码进行编译之前，还包括：确定所述页面图中标注的交互区域；其中，交互区域的边界通过预设颜色值描绘，预设颜色值与交互区域存在映射关系；接收对不同预设颜色值的交互区域配置不同交互事件的操作。

可选的，颜色值包括像素透明度；所述确定所述页面图中标注的交互区域，包括：获取源页面图，确定所述源页面图中的交互区域，对于任一交互区域，使用预设像素透明度修改所述任一交互区域的边界，得到所述页面图。

可选的，在所述判断所述像素点坐标是否落入任一可交互区域的围栏内之前，还包括：根据描绘每个交互区域使用的像素透明度，在所述页面图中生成与交互区域数量对应的围栏，以将所述页面图中的像素点划分到不同围栏内。