CN113448573A - 一种基于图片像素围栏的点击交互方法和装置 - Google Patents

Abstract

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

Description

一种基于图片像素围栏的点击交互方法和装置

技术领域

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

背景技术

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

可选的，所述将所述页面图中的像素点划分到不同围栏内，包括：获取所述页面图内的像素点组成的集合，根据不同像素透明度，将不同像素点划分到不同围栏内；对于任一围栏，以所述任一围栏中的任一个点为起点，从所述任一围栏的像素点集合中，查找所述起点的相邻点，重复上述操作，依次查找每个点的相邻点，直至查找到最后一个点为止；判断所述起点和所述最后一个点是否相邻，若相邻，则确定所述任一围栏为闭合围栏，按照所述起点到所述最后一个点的顺序，输出所述任一围栏排序后的像素点集合，否则确定所述任一围栏为非闭合围栏，显示提示信息。

可选的，所述查找所述起点的相邻点，包括：所述起点和所述起点的相邻点，在横轴方向上坐标值的差值小于或等于第一预设数值，以及在纵轴方向坐标值的差值小于或等于第二预设数值。

可选的，所述第一预设数值与所述第二预设数值相等。

可选的，在所述显示提示信息之后，还包括：接收对所述页面图的修改操作，以对所述任一围栏进行修改，之后重新对修改的所述任一围栏进行像素点判断。

可选的，所述判断所述像素点坐标是否落入任一可交互区域的围栏内，包括：从任一围栏的像素点集合中，选取相邻的第一点和第二点，连接所述第一点和所述第二点，得到一个线段；以所述像素点坐标为起点，沿横轴方向生成一个直线，计算所述直线与所述线段的交点；统计交点个数，若所述交点个数为奇数，则确定所述像素点坐标位于所述任一闭合围栏的内部，否则位于外部。

可选的，在所述连接所述第一点和所述第二点，得到一个线段之前，还包括：判断所述像素点坐标的纵轴坐标值是否位于所述第一点和所述第二点的纵轴坐标值之间；若否，则从所述像素点集合中重新选取其他两个相邻点，并重复上述操作，直至得到像素点坐标的横轴坐标轴在两个相邻点之间为止。

可选的，所述沿横轴方向生成一个直线，包括：沿横轴正方向生成一个射线。

可选的，在所述统计交点个数之前，还包括：对于其中一个交点，判断所述其中一个交点的横轴坐标值是否大于所述像素点坐标的横轴坐标值，若否，则过滤掉所述其中一个交点；重复上述操作，得到位于所述像素点坐标横轴正方向的一个或多个交点。

可选的，交互事件为点击事件或数据埋点事件。

可选的，所述页面图为落地页图。

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

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

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

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

可选的，还包括编译模块，用于：对所述页面图、图片框架、配置的交互事件的代码进行编译，得到可执行文件，并输出可交互的前端界面进行显示；其中，所述可执行文件包括所述可交互的前端界面。

可选的，还包括配置模块，用于：确定所述页面图中标注的交互区域；其中，交互区域的边界通过预设颜色值描绘，预设颜色值与交互区域存在映射关系；接收对不同预设颜色值的交互区域配置不同交互事件的操作。

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

可选的，还包括围栏模块，用于：根据描绘每个交互区域使用的像素透明度，在所述页面图中生成与交互区域数量对应的围栏，以将所述页面图中的像素点划分到不同围栏内。

可选的，所述围栏模块，用于：获取所述页面图内的像素点组成的集合，根据不同像素透明度，将不同像素点划分到不同围栏内；对于任一围栏，以所述任一围栏中的任一个点为起点，从所述任一围栏的像素点集合中，查找所述起点的相邻点，重复上述操作，依次查找每个点的相邻点，直至查找到最后一个点为止；判断所述起点和所述最后一个点是否相邻，若相邻，则确定所述任一围栏为闭合围栏，按照所述起点到所述最后一个点的顺序，输出所述任一围栏排序后的像素点集合，否则确定所述任一围栏为非闭合围栏，显示提示信息。

可选的，所述围栏模块，用于：所述起点和所述起点的相邻点，在横轴方向上坐标值的差值小于或等于第一预设数值，以及在纵轴方向坐标值的差值小于或等于第二预设数值。

可选的，所述第一预设数值与所述第二预设数值相等。

可选的，还包括重操作模块，用于：接收对所述页面图的修改操作，以对所述任一围栏进行修改，之后重新对修改的所述任一围栏进行像素点判断。

可选的，所述判断模块，用于：从任一围栏的像素点集合中，选取相邻的第一点和第二点，连接所述第一点和所述第二点，得到一个线段；以所述像素点坐标为起点，沿横轴方向生成一个直线，计算所述直线与所述线段的交点；统计交点个数，若所述交点个数为奇数，则确定所述像素点坐标位于所述任一闭合围栏的内部，否则位于外部。

可选的，所述判断模块，还用于：判断所述像素点坐标的纵轴坐标值是否位于所述第一点和所述第二点的纵轴坐标值之间；若否，则从所述像素点集合中重新选取其他两个相邻点，并重复上述操作，直至得到像素点坐标的横轴坐标轴在两个相邻点之间为止。

可选的，所述沿横轴方向生成一个直线，包括：沿横轴正方向生成一个射线。

可选的，所述判断模块，还用于：对于其中一个交点，判断所述其中一个交点的横轴坐标值是否大于所述像素点坐标的横轴坐标值，若否，则过滤掉所述其中一个交点；重复上述操作，得到位于所述像素点坐标横轴正方向的一个或多个交点。

可选的，交互事件为点击事件或数据埋点事件。

可选的，所述页面图为落地页图。

为实现上述目的，根据本发明实施例的再一方面，提供了一种基于图片像素围栏的点击交互电子设备。

本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的基于图片像素围栏的点击交互方法。

为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的基于图片像素围栏的点击交互方法。

根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：使开发者能够更加便捷并快速地将原页面图转换为前端界面，无需切图处理，并且可以实现对单个图片的内部设置不同的交互区域，实现点击响应或者埋点。另外整个代码框架可以复用，实现页面图的快速开发。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的一种基于图片像素围栏的点击交互方法的主要流程示意图；

图2是根据本发明实施例的一种可选的基于图片像素围栏的点击交互方法的流程示意图；

图3是根据本发明实施例的另一种可选的基于图片像素围栏的点击交互方法的流程示意图；

图4是根据本发明实施例的又一种可选的基于图片像素围栏的点击交互方法的流程示意图；

图5(a)是像素点坐标沿着x轴正方向生成射线示意图；

图5(b)是射线与围栏是否有交点示意图；

图5(c)是一个任意形状的围栏示意图；

图6是本方案的整体交互流程示意图；

图7根据本发明实施例的一种基于图片像素围栏的点击交互装置的主要模块示意图；

图8是本发明实施例可以应用于其中的示例性系统架构图；

图9是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

对于本方案涉及的词语，做解释如下：

围栏：指的是在界面(一般指地图)上画出的一个闭合的边界，以将界面划分为围栏内和围栏外两部分。围栏一般用于圈定某个区域，实现内部事件监控。

切图：切，代表前端。切图是指将设计稿切成便于制作成页面的各种小图片，用于完成html+css布局的静态页面，有利于交互，形成良好的视觉感。

颜色值：在计算机中由透明度(A)、红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)、最高值为255(十六进制为FF)。写法为“#”号后跟8个十六进制字符，8位数表示为#AARRGGBB，如不透明红色为#FFFF0000，全透明红色为#00FF0000。

交互区域：表示接收点击事件的响应区域，可以是一个按钮，也可以是某个图片区域。

埋点：是数据采集领域(尤其是用户行为数据采集领域)的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程，如用户对某个icon点击次数、观看某个视频的时长等。

地理围栏(Geo-fencing)：是LBS的一种应用，通过使用一个虚拟的栅栏围出一个虚拟地理边界。当手机进入、离开某个特定地理区域，或在该区域内活动时，手机可以接收自动通知和警告。

落地页，也称着陆页、引导页，是指访问者在其他地方看到发出的某个具有明确主题的特定营销活动，点击后被链接到网站上的第一个页面。

现有在页面图中设置点击交互事件的方式为：

1、UI设计人员设计带源码活动的落地页大图，根据开发人员的需求，将页面内部的各种图片和按钮(将设计图切成背景大图和交互区域小图)切图出来；

2、开发人员编写前端代码(App/HTML)进行布局设计，将各个图片块按照设计图进行位置摆放，之后对各个图片块设置点击事件或数据埋点，输出到前端页面；

3、用户点击页面中的交互区域(比如按钮等)，调用预设方法进行事件响应或者触发埋点数据上传操作。

现有方式存在的问题：1、页面设计复杂，重复劳动多，每个页面都需重复切图，设计页面布局样式，摆放按钮的位置，然后再设置点击事件。2、无法针对整个某个图片中的某个区域设置点击事件并埋点，目前仅仅针对整张图片设置。

参见图1，示出的是本发明实施例提供的一种基于图片像素围栏的点击交互方法的主要流程图，包括如下步骤：

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

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

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

上述实施方式中，对于步骤S101，页面可以是落地页。落地页上各种信息背后暗藏的是发掘并收集潜在消费者信息的表单，目的是将访问者转化为潜在客户，根据收集到的信息继续跟进。落地页为访问者提供了一种“目标超明确”的访问体验，通过呈现一个特定页面，为访问者指出一条明确的路径继续加深与网站的关系。

获取配置有交互事件的页面图，对页面图、图片框架、配置的交互事件的代码，一同使用IDE(Integrated-Drive-Electronics)开发工具进行编译，得到一个可执行文件，如HTML页面文件或App前端页面文件。将该可执行文件存放到网上，用户既可正常打开页面进行访问。

可执行文件包含可交互的前端界面，用户点击前端界面中的某个可交互区域(如按钮)，图片围栏框架系统通过鼠标点击位置，计算用户点击屏幕的坐标，将屏幕点击坐标转换为像素点坐标。获取屏幕点击坐标以及将其转换为像素点坐标的方式为现有，本方案对此不做详细说明。

对于步骤S102～S103，UI设计人员在处理页面图的过程中，会使用不同的像素透明度圈出不同的交互区域，且每个交互区域的围栏都是闭合的(参见后续图2所示描述)。

图片围栏框架系统根据UI设计人员预先绘制各个交互区域使用的颜色值透明度，在页面图中生成一个一个围栏，以将整个页面图中的像素点划分到不同交互区域的围栏内。之后使用像素围栏算法，计算转换的像素点坐标是否落入某一可交互区域的围栏内部，如落入，则获取围栏内预设的点击事件或埋点事件，执行点击事件或埋点事件，否则不进行交互操作。

上述实施例所提供的方法，预先使用围栏圈定界面中的可交互区域，在用户点击前端界面后，可以自动获知用户点击位置，自动判断该位置是否落入围栏内，只有落入的情况才会自动响应事件，整个代码框架可以复用，以此实现快速开发页面图的目的。

参见图2，示出了根据本发明实施例的一种可选的基于图片像素围栏的点击交互方法流程示意图，包括如下步骤：

S201：获取源页面图，确定源页面图中的交互区域，对于任一交互区域，使用预设像素透明度修改所述任一交互区域的边界，得到页面图；

S202：接收对不同预设像素透明度的交互区域，配置不同交互事件的操作；其中，交互事件为点击事件或数据埋点事件；

S203：对所述页面图、图片框架、配置的交互事件的代码进行编译，得到可执行文件，并输出可交互的前端界面进行显示；其中，所述可执行文件包括所述可交互的前端界面。

上述实施方式中，对于步骤S201，UI设计人员设计根据开发人员的需求，设计出一个完整的源页面图。在页面图中对每个交互区域的边界所使用的颜色值不同，具体地，像素透明度不同，以此在页面图中描绘出每个交互区域的边界，输出最终的页面图给前端开发人员。

例如，UI设计人员输出一张双十一优惠大促销的活动页面图，除了广告图文外，还包含一个商户的logo，最终的目的是用户点击该logo，浏览器可以自动打开该商户的详情介绍页(假设页面地址是https://www.abc.com/shopA)。UI设计人员使用颜色值0xFEFF0000(像素透明度是FE)，圈出该商户的logo，之后导出带标注的页面图。

对于步骤S202，前端开发人员将UI设计人员传输的页面图输入到图片围栏框架系统，之后在图片围栏框架系统内对交互区域配置点击事件或数据埋点。需要说明的是，UI设计人员最后输出的只是一张完整页面图，仅标注交互区域，但并未对交互区域设置点击事件或数据埋点事件，事件需由前端开发人员配置完成。

接上例，前端开发人员对于像素透明度为FE的交互区域，设置点击事件为跳转到上述页面地址https://www.abc.com/shopA，即完成事件配置操作。但若有多个不同的商户logo，需设置多个像素透明度和与每个像素透明度对应的交互事件。

对于步骤S203，对页面图、图片框架、配置的交互事件的代码，一同使用IDE开发工具进行编译，得到一个可执行文件，如HTML页面文件或App前端页面文件。可执行文件包含可交互的前端界面，用户点击前端界面中的某个可交互区域进行交互操作。

上述实施例所提供的方法，使得开发者能够更加便捷及快速地将源页面图转换为前端页面，无需切图，且可以实现对单个图片的内部设置不同的交互区域，实现点击响应或者埋点。

参见图3，示出了根据本发明实施例的另一种可选的基于图片像素围栏的点击交互方法流程示意图，包括如下步骤：

S301：获取页面图内的像素点组成的集合，根据不同像素透明度，将不同像素点划分到不同围栏内；

S302：对于任一围栏，以所述任一围栏中的任一个点为起点，从所述任一围栏的像素点集合中，查找所述起点的相邻点，重复上述操作，依次查找每个点的相邻点，直至查找到最后一个点为止；

S303：判断所述起点和所述最后一个点是否相邻；

S304：若相邻，则确定所述任一围栏为闭合围栏，按照所述起点到所述最后一个点的顺序，输出所述任一围栏排序后的像素点集合；

S305：若不相邻，则确定所述任一围栏为非闭合围栏，显示提示信息。

上述实施方式中，对于步骤S301，获取所有围栏内的像素点组成的集合points[n]，将集合输入图片围栏框架系统，以根据不同像素透明度，将不同像素点划分到不同围栏组内。例如，围栏1的像素透明度为0xFE，围栏1的像素透明度为0xFD，围栏1的像素透明度为0xFC。

需要说明的是，不同交互区域围栏的像素透明度不同。对交互区域的圈定，仅仅是改变原有围栏的透明度，没有改变颜色，因此用户肉眼是看不到圈定的围栏。

对于步骤S302，选取其中某个围栏，以该围栏中的任一个点为起点，在该围栏中查找与该起点相邻的下一个点，之后继续查找该下一个点的相邻点，重复上述操作，依次查找出每个点的相邻点，直至查找到最后一个点为止，即终点。

此处对于相邻点的判断，是与前一个点在横轴方向在横轴方向上坐标值的差值小于或等于第一预设数值，以及在纵轴方向坐标值的差值小于或等于第二预设数值。在将页面图放大后，可知页面图有多个像素点做成的，与同一个像素点相邻的至少有2点，上、下、左、右中的2个，最多有4个。因此，上述第一预设数值和第二预设数值通常设定为1，即x,y值相差或等于1。

对于步骤S303～S305，如果终点与起点相邻，则表示此围栏为合法闭合围栏，最后输出排好序的围栏像素点集合points[n]，否则表明此围栏为非闭合围栏/非合法围栏，提示围栏设置有误，UI设计人员需要重新修改页面图，重新绘制围栏，之后重新对修改的围栏进行像素点判断操作。

上述实施例所提供的方法，使用特定的像素透明度，圈定页面图中交互区域的边界，然后将像素透明度和交互区域内的交互事件进行映射，以此实现整个页面的交互功能。

参见图4，示出了根据本发明实施例的又一种可选的基于图片像素围栏的点击交互方法流程示意图，包括如下步骤：

S401：从任一围栏的像素点集合中，选取相邻的第一点和第二点，连接所述第一点和所述第二点，得到一个线段；

S402：判断所述像素点坐标的纵轴坐标值是否位于所述第一点和所述第二点的纵轴坐标值之间；

S403：若否，则从所述像素点集合中重新选取其他两个相邻点，并重复上述操作，直至得到像素点坐标的横轴坐标轴在两个相邻点之间为止；

S404：以所述像素点坐标为起点，沿横轴方向生成一个直线，计算所述直线与所述线段的交点；

S405：统计交点个数，若所述交点个数为奇数，则确定所述像素点坐标位于所述任一闭合围栏的内部，否则位于外部。

上述实施方式中，对于步骤S401～S405，当用户点击了前端界面中的某一个位置时，运行像素围栏算法判断被点击位置是否位于交互区域内。具体流程如下：

1、假设像素点坐标为[x,y]，某一闭合围栏排序后的像素点集合为points[n]，从像素点集合points[n]中任选两个相邻的点，假定为(x1,y1)、(x2,y2)，两者连起来是一个线段，并非无限长的直线。

2、首先判断像素点坐标y是否位于y1和y2之间，若位于，则进行下一步判断，否则返回上一步获取其他两个相邻点进行继续判断，参见图5(a)所示，像素点坐标位于线段下方，与围栏不存在交点。

3、若y的大小在y1和y2之间，生成像素点坐标(x,y)沿着x轴正方向的射线，计算射线与y1、y2连线线段的交点，此时只需计算x轴正方向的交点个数即可。

或者，生成像素点坐标(x,y)沿着x轴方向的直线，计算射线与y1、y2连线线段的交点，之后从中筛选出x轴坐标值大于像素点坐标x的交点。如(2,1)位于像素点坐标(1,1)右侧，则保留，而对于(0,1)则过滤掉。

如x轴正方向没有任何交点，则表明像素点坐标位于围栏外部，参见图5(b)所示。

4、累计交点个数(不含顶点或边缘重合)，如果是奇数，表示点击的目标点位于围栏的内部，触发点击事件或埋点事件。

需要说明的是，一般围栏可以使用矩形表示，但本方案提供的围栏可以是任意形状，以此实现精准点击。参见图5(c)所示，为多边形状的围栏，其与像素点坐标横轴方向直线交点个数为9(包含自身坐标)，但可用坐标仅为3个。用户点击多边形内部即可实现弹出对话框或打开页面操作，而点击其他位置却得不到任何响应。且因为围栏形状的不规则性质，若简圈出一个矩形围栏，会包含该多边形附近的区域，用户点击这些区域也会跳转。

实际操作中，会存在相交围栏顶点的情况，通过设定像素点的坐标y的大小位于y1和y2之间，即可怕排除该种情况。

上述实施例所提供一种图片像素围栏算法，筛选位于像素点坐标右侧的交点个数，如交点个数是奇数，则确定点在多边形内，否则在多边形外，以此实现一种自动化计算目的。

参见图6，示出了整体交互示意图，包括如下步骤：

1、UI设计人员根据开发人员的需求，设计出源页面图。

2、UI设计人员使用特定的像素透明度描绘出交互区域的边界。

3、UI设计人员输出带标注交互区域的页面图给前端开发人员。

4、前端开发人员将完整的原型图设置进图片围栏框架系统。

5、前端开发人员针对不同的像素透明度的围栏，配置不同的交互事件，如点击事件或数据埋点事件。

6、图片围栏框架系统对页面图、图片框架、配置的交互事件的代码一同进行编译，生成最终可执行文件(HTML或者app界面)，可执行文件包括可交互的前端界面。

7、图片围栏框架系统输出可交互的前端界面呈献给用户。

8、用户点击前端界面中的某个位置。

9、图片围栏框架系统采集用户的屏幕点击坐标。

10、图片围栏框架系统将屏幕点击坐标转换为像素点坐标。

11、图片围栏框架系统根据描绘每个交互区域使用的像素透明度，在页面图中生成与交互区域数量对应的围栏，以将页面图中的像素点划分到不同围栏内；

12、图片围栏框架系统根据像素围栏算法，计算像素点坐标是否在某一交互区域的围栏内部；

13、图片围栏框架系统获取围栏内预设的点击事件或埋点事件。

14、图片围栏框架系统执行点击事件或埋点事件。

本发明基于图像像素围栏技术，设计一个点击交互事件快速设置的实现框架，相比现有技术，至少存在如下有益效果：

1、图像内部事件交互：传统一张图片只能设置一个交互事件，本方案使用图像像素围栏的算法，可以对完整图像内部进行切割，设置多个交互事件或者埋点；

2、简化开发：本来由前端开发的复杂HTML页面设计或者App界面XML设计，转化为直接在图片上绘制(圈出)一个一个的围栏，速度快，且可以在设计阶段就产出；

3、可复用框架系统，解放重复劳动力：只需使用特定像素透明度在页面图中描绘出围栏，并预设交互响应事件即可，无需重复绘制前端界面，极大的减轻前端开发工作量，可复用；

4、自动化处理，在用户点击前端界面后，可以自动获知用户点击位置，自动响应事件。

参见图7，示出了本发明实施例提供的一种基于图片像素围栏的点击交互装置700的主要模块示意图，包括：

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

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

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

本发明实施装置还包括编译模块，用于：

对所述页面图、图片框架、配置的交互事件的代码进行编译，得到可执行文件，并输出可交互的前端界面进行显示；其中，所述可执行文件包括所述可交互的前端界面。

本发明实施装置还包括配置模块，用于：

确定所述页面图中标注的交互区域；其中，交互区域的边界通过预设颜色值描绘，预设颜色值与交互区域存在映射关系；

接收对不同预设颜色值的交互区域配置不同交互事件的操作。

本发明实施装置中，颜色值包括像素透明度；

所述装置还包括修改模块，用于：获取源页面图，确定所述源页面图中的交互区域，对于任一交互区域，使用预设像素透明度修改所述任一交互区域的边界，得到所述页面图。

本发明实施装置还包括围栏模块，用于：

根据描绘每个交互区域使用的像素透明度，在所述页面图中生成与交互区域数量对应的围栏，以将所述页面图中的像素点划分到不同围栏内。

本发明实施装置中，所述围栏模块，用于：

获取所述页面图内的像素点组成的集合，根据不同像素透明度，将不同像素点划分到不同围栏内；

对于任一围栏，以所述任一围栏中的任一个点为起点，从所述任一围栏的像素点集合中，查找所述起点的相邻点，重复上述操作，依次查找每个点的相邻点，直至查找到最后一个点为止；

判断所述起点和所述最后一个点是否相邻，若相邻，则确定所述任一围栏为闭合围栏，按照所述起点到所述最后一个点的顺序，输出所述任一围栏排序后的像素点集合，否则确定所述任一围栏为非闭合围栏，显示提示信息。

本发明实施装置中，所述围栏模块，用于：所述起点和所述起点的相邻点，在横轴方向上坐标值的差值小于或等于第一预设数值，以及在纵轴方向坐标值的差值小于或等于第二预设数值。

本发明实施装置中，所述第一预设数值与所述第二预设数值相等。

本发明实施装置还包括重操作模块，用于：

接收对所述页面图的修改操作，以对所述任一围栏进行修改，之后重新对修改的所述任一围栏进行像素点判断。

本发明实施装置中，所述判断模块702，用于：

从任一围栏的像素点集合中，选取相邻的第一点和第二点，连接所述第一点和所述第二点，得到一个线段；

以所述像素点坐标为起点，沿横轴方向生成一个直线，计算所述直线与所述线段的交点；

统计交点个数，若所述交点个数为奇数，则确定所述像素点坐标位于所述任一闭合围栏的内部，否则位于外部。

本发明实施装置中，所述判断模块702，还用于：

判断所述像素点坐标的纵轴坐标值是否位于所述第一点和所述第二点的纵轴坐标值之间；

若否，则从所述像素点集合中重新选取其他两个相邻点，并重复上述操作，直至得到像素点坐标的横轴坐标轴在两个相邻点之间为止。

本发明实施装置中，所述沿横轴方向生成一个直线，包括：沿横轴正方向生成一个射线。

本发明实施装置中，所述判断模块702，还用于：

对于其中一个交点，判断所述其中一个交点的横轴坐标值是否大于所述像素点坐标的横轴坐标值，若否，则过滤掉所述其中一个交点；

重复上述操作，得到位于所述像素点坐标横轴正方向的一个或多个交点。

本发明实施装置中，交互事件为点击事件或数据埋点事件。

本发明实施装置中，所述页面图为落地页图。

另外，在本发明实施例中所述装置的具体实施内容，在上面所述方法中已经详细说明了，故在此重复内容不再说明。

图8示出了可以应用本发明实施例的示例性系统架构800，包括终端设备801、802、803，网络804和服务器805(仅仅是示例)。

终端设备801、802、803可以是具有显示屏并且支持网页浏览的各种电子设备，安装有各种通讯客户端应用，用户可以使用终端设备801、802、803通过网络804与服务器805交互，以接收或发送消息等。

网络804用以在终端设备801、802、803和服务器805之间提供通信链路的介质。网络804可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

服务器805可以是提供各种服务的服务器，用于执行采集屏幕点击坐标、确定像素点坐标、判断是否落入围栏内以及执行交互操作。

需要说明的是，本发明实施例所提供的方法一般由服务器805执行，相应地，装置一般设置于服务器805中。

应该理解，图8中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图9，其示出了适于用来实现本发明实施例的终端设备的计算机系统900的结构示意图。图9示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，计算机系统900包括中央处理单元(CPU)901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。在RAM 903中，还存储有系统900操作所需的各种程序和数据。CPU 901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

以下部件连接至I/O接口905：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被中央处理单元(CPU)901执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括处理模块、判断模块、执行模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，执行模块还可以被描述为“交互执行模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：

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

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

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

本发明基于图像像素围栏技术，设计一个点击交互事件快速设置的实现框架，相比现有技术，至少存在如下有益效果：

1、图像内部事件交互：传统一张图片只能设置一个交互事件，本方案使用图像像素围栏的算法，可以对完整图像内部进行切割，设置多个交互事件或者埋点；

2、简化开发：本来由前端开发的复杂HTML页面设计或者App界面XML设计，转化为直接在图片上绘制(圈出)一个一个的围栏，速度快，且可以在设计阶段就产出；

3、可复用框架系统，解放重复劳动力：只需使用特定像素透明度在页面图中描绘出围栏，并预设交互响应事件即可，无需重复绘制前端界面，极大的减轻前端开发工作量，可复用；

4、自动化处理，在用户点击前端界面后，可以自动获知用户点击位置，自动响应事件。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (18)

1.一种基于图片像素围栏的点击交互方法，其特征在于，包括：

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

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

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

2.根据权利要求1所述的方法，其特征在于，在所述响应于对前端界面中任一位置的点击操作之前，还包括：

对所述页面图、图片框架、配置的交互事件的代码进行编译，得到可执行文件，并输出可交互的前端界面进行显示；其中，所述可执行文件包括所述可交互的前端界面。

3.根据权利要求2所述的方法，其特征在于，在所述对所述页面图、图片框架、配置的交互事件的代码进行编译之前，还包括：

确定所述页面图中标注的交互区域；其中，交互区域的边界通过预设颜色值描绘，预设颜色值与交互区域存在映射关系；

接收对不同预设颜色值的交互区域配置不同交互事件的操作。

4.根据权利要求3所述的方法，其特征在于，颜色值包括像素透明度；

所述确定所述页面图中标注的交互区域，包括：

获取源页面图，确定所述源页面图中的交互区域，对于任一交互区域，使用预设像素透明度修改所述任一交互区域的边界，得到所述页面图。

5.根据权利要求4所述的方法，其特征在于，在所述判断所述像素点坐标是否落入任一可交互区域的围栏内之前，还包括：

根据描绘每个交互区域使用的像素透明度，在所述页面图中生成与交互区域数量对应的围栏，以将所述页面图中的像素点划分到不同围栏内。

6.根据权利要求5所述的方法，其特征在于，所述将所述页面图中的像素点划分到不同围栏内，包括：

获取所述页面图内的像素点组成的集合，根据不同像素透明度，将不同像素点划分到不同围栏内；

对于任一围栏，以所述任一围栏中的任一个点为起点，从所述任一围栏的像素点集合中，查找所述起点的相邻点，重复上述操作，依次查找每个点的相邻点，直至查找到最后一个点为止；

判断所述起点和所述最后一个点是否相邻，若相邻，则确定所述任一围栏为闭合围栏，按照所述起点到所述最后一个点的顺序，输出所述任一围栏排序后的像素点集合，否则确定所述任一围栏为非闭合围栏，显示提示信息。

7.根据权利要求6所述的方法，其特征在于，所述查找所述起点的相邻点，包括：

所述起点和所述起点的相邻点，在横轴方向上坐标值的差值小于或等于第一预设数值，以及在纵轴方向坐标值的差值小于或等于第二预设数值。

8.根据权利要求7所述的方法，其特征在于，所述第一预设数值与所述第二预设数值相等。

9.根据权利要求6所述的方法，其特征在于，在所述显示提示信息之后，还包括：

接收对所述页面图的修改操作，以对所述任一围栏进行修改，之后重新对修改的所述任一围栏进行像素点判断。

10.根据权利要求1所述的方法，其特征在于，所述判断所述像素点坐标是否落入任一可交互区域的围栏内，包括：

从任一围栏的像素点集合中，选取相邻的第一点和第二点，连接所述第一点和所述第二点，得到一个线段；

以所述像素点坐标为起点，沿横轴方向生成一个直线，计算所述直线与所述线段的交点；

统计交点个数，若所述交点个数为奇数，则确定所述像素点坐标位于所述任一闭合围栏的内部，否则位于外部。

11.根据权利要求10所述的方法，其特征在于，在所述连接所述第一点和所述第二点，得到一个线段之前，还包括：

判断所述像素点坐标的纵轴坐标值是否位于所述第一点和所述第二点的纵轴坐标值之间；

若否，则从所述像素点集合中重新选取其他两个相邻点，并重复上述操作，直至得到像素点坐标的横轴坐标轴在两个相邻点之间为止。

12.根据权利要求10所述的方法，其特征在于，所述沿横轴方向生成一个直线，包括：沿横轴正方向生成一个射线。

13.根据权利要求10所述的方法，其特征在于，在所述统计交点个数之前，还包括：

对于其中一个交点，判断所述其中一个交点的横轴坐标值是否大于所述像素点坐标的横轴坐标值，若否，则过滤掉所述其中一个交点；

重复上述操作，得到位于所述像素点坐标横轴正方向的一个或多个交点。

14.根据权利要求1-13所述的方法，其特征在于，交互事件为点击事件或数据埋点事件。

15.根据权利要求1-13所述的方法，其特征在于，所述页面图为落地页图。

16.一种基于图片像素围栏的点击交互装置，其特征在于，包括：

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

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

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

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

一个或多个处理器；

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

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

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

Images