一种呈现引导蒙版的方法和装置以及电子设备和存储介质

技术领域

本申请涉及计算机技术领域，具体涉及一种呈现引导蒙版的方法和装置以及电子设备和存储介质。

背景技术

随着移动互联网的日益普及，移动端应用程序(App)产品的开发周期越来越短，迭代很快，每个版本的发布，必然会增加一些新功能，或修改老功能，而功能是通过应用程序的各个页面展示的。为了引导用户使用，修改老功能导致的页面改动，或新加功能时，以手机为例，手机应用程序一般会在该应用程序的页面上，弹出一个蒙版图遮罩手机屏幕，来告诉用户改动或功能介绍，从而提高用户体验。

目前市面上基于flutter实现引导蒙版功能可大致分为两种方案：

1.使用纯Flutter技术实现，由于没有考虑动态获取引导功能坐标、静态使用UI图片以及没有全面考虑不同分辨下的兼容等问题，无法应对不同需求时灵活快速实现可配置、可复用、可准确定位元素区域、快速响应等诸多问题，严重影响工作效率的问题，对用户体验以及产品自身也会带来较大被动。

2.依托于原生APP技术支持，通过APP原生端实现该功能，然后对外提供方法后，由flutter调用原生的方法来变相实现。此方案虽然能够完美解决上述方案1中的部分问题，但是对原生端依赖比较强，需要Android和iOS双端开发，从而增加开发成本，不利于快速解决产品述求，同时容易受APP原生端影响，带来不可控或者不可预知的问题。

发明内容

本申请的目的是提供一种呈现引导蒙版的方法以及系统。

本申请第一方面提供一种呈现引导蒙版的方法，包括：

对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

创建与所述页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；

调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使所述应用程序呈现所述指定页面的情况下，弹出所述蒙版图片。

在本申请的一些实施方式中，所述获取所述页面元素的尺寸以及在所述页面中的位置，包括：

将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与所述一个或多个蒙版类一一映射的映射关系表；所述蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在所述页面中的布局位置；

根据所述映射关系表确定所述页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取所述蒙版图片以及确定所述蒙版图片在所述纯透明色蒙版组件中的布局位置。

在本申请的一些实施方式中，所述蒙版类中还包含蒙版图所引导的页面元素的标识；

所述蒙版图片中包含箭头；

将一个或多个蒙版图片布局在该纯透明色蒙版组件中的步骤包括：将蒙版图片设置在所述纯透明色蒙版组件中，并且使所述蒙版图片中的箭头指向具有所述标识的页面元素。

在本申请的一些实施方式中，所述将一个或多个蒙版图片布局在该纯透明色蒙版组件中，包括：

基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，控制需要绘制透明引导区域范围，控制引导信息提示位置。

在本申请的一些实施方式中，所述对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，包括：

结合获取到的坐标值，同时设置当前功能引导区域范围,使用canvas画布，Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形。

在本申请的一些实施方式中，所述对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，还包括：

通过传参的方式动态设置提示内容，增加下一步或者取消操作按钮，所述下一步操作按钮用于切换当前引导蒙版功能，所述取消操作按钮用于结束当前引导蒙版功能。

在本申请的一些实施方式中，所述方法，包括：

使用router方式，在所需页面init时进行，路由蒙版页面实现蒙版遮罩基础功能。

本申请第二方面提供一种呈现引导蒙版的装置，包括：

前端解析模块，用于对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

前端展示模块，用于创建与所述页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使所述应用程序呈现所述指定页面的情况下，弹出所述蒙版图片。

本申请第三方面提供一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的方法。

本申请第四方面提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行上述的方法。

相较于现有技术，根据本申请实施例的技术方案，基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，精准控制需要绘制透明引导区域范围，动态灵活控制引导信息提示位置，采用canvas画布技术，使用Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形，并结合flutter路由特性，采用透明路由方式进行全屏蒙版覆盖，同时通过WillPopScope实现返回按钮拦截，确保方便准确的进行用户行为引导和提升重点功能感知力度，从而实现快速有效准确满足产品业务需求。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本申请的一些实施方式所提供的一种呈现引导蒙版的方法的一种流程图；

图2示出了本申请的一些实施方式所提供的一种呈现引导蒙版的系统的框图；

图3示出了本申请的一些实施方式所提供的一种引导蒙版基本效果展示。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施方式。虽然附图中显示了本公开的示例性实施方式，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本申请所属领域技术人员所理解的通常意义。

另外，术语“第一”和“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

本申请实施例提供一种呈现引导蒙版的方法，下面结合实施例及附图进行示例性说明。

如图1至2所示，本申请的一种呈现引导蒙版的方法，可以包括：

步骤101、对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取所述页面元素的尺寸以及在所述页面中的位置；

可以理解的是，获取组件精确坐标：通过Global Key实例进行widget绑定，获取准确位置集合(可进行坐标和像素值转换)，并可作为参数传递到蒙版组件调用方法中。即基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，精准控制需要绘制透明引导区域范围，动态灵活控制引导信息提示位置。

本实施例中，蒙版图不再是全屏大小的图片，而是按照预定的位置布置在纯透明色蒙版组件中，再用全屏的对话框弹出该纯透明色蒙版组件，这样纯透明色蒙版组件中包含了蒙版图，而且在全屏的对话框弹出之后，纯透明色蒙版组件自动与屏幕大小相适应，于是实现了在不同屏幕大小的情况下都能与屏幕相适应地显示蒙版图。

在一些实施例中，所述获取所述页面元素的尺寸以及在所述页面中的位置，包括：

步骤111、将保存的蒙版配置信息转换为多个蒙版类，并且形成多个页面元素与一个或多个蒙版类一一映射的映射关系表；蒙版类中包含蒙版图片或蒙版图片的网络地址，并且包含蒙版图片在页面中的布局位置；

当应用程序启动时，通过http/https进行服务端请求，如服务器有配置则将服务端的蒙版配置信息下载。将下载的服务端的蒙版配置信息和本地缓存的蒙版配置信息进行合并，形成本地缓存配置。

在需要展示蒙版图的功能页面中，由前端展示模块先判断该页面是否需要展示蒙版，如需要展示蒙版，则通过前端蒙版加工模块处理。在显示蒙版之后，设置一个蒙版标记。在应用程序呈现页面时，判断该页面是否需要展示蒙版图，若是，则再判断是否有蒙版标记，如果有蒙版标记，则说明蒙版图已经展示过，从而不再展示蒙版图。为了使用户能够再次看到蒙版图，在应用程序的设置功能中加入一个清理蒙版标记的选项，用户可以在看过蒙版图之后，使用该选项清理蒙版标记，这样在上述的判断是否有蒙版标记时，已经不存在蒙版标记，从而再次展示蒙版图，此时调用前端解析模块，进行以下步骤的操作。可以看出，根据蒙版配置信息和蒙版标记来判断是否需要展示蒙版图，是一种比较简单的判断逻辑，便于处理，有助于使终端设备运行流畅。

前端解析模块将需要展示蒙版图的页面对应的蒙版配置xml信息加工成针对该页面的配置类，以Android平台为例，加工成蒙版Java类并将具体的蒙版Java类与当前页面中要展示蒙版图的页面元素一一对应，从而形成页面元素与蒙版类的映射关系表。

步骤112、根据映射关系表确定页面中要展示蒙版图的页面元素所对应的蒙版类，按照该蒙版类获取蒙版图片以及确定蒙版图片在纯透明色蒙版组件中的布局位置。

前端解析模块通过Android SDK平台提供的纯透明色蒙版组件技术(主要包括Drawable图形生成、原控件位置计算、控件大小随设备屏幕大小计算等)，将该页面要展示蒙版图的界面元素，一一获取其对应页面的准确布局位置与大小，并通过映射关系表，找到对应的蒙版类。

步骤102、创建与页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；

可以理解的是，创建蒙版组件：实现一个全透明的蒙版组件，作为所有功能模块的构建基础；实现基础蒙版遮罩：巧妙使用router方式，在所需页面init时进行路由蒙版页面，实现蒙版遮罩基础功能。

本实施例中，使用纯Flutter技术，基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，精准控制需要绘制透明引导区域范围，动态灵活控制引导信息提示位置。

步骤103、调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使应用程序呈现指定页面的情况下，弹出蒙版图片。

可以理解的是，绘制真实蒙版图形：结合获取到的坐标值，同时设置当前功能引导区域范围(延伸宽高),使用canvas画布，Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形；增加引导文字和逻辑：通过传参的方式动态设置提示内容。增加下一步或者取消等操作按钮，切换或者结束当前引导蒙版功能。

本实施例中，实现一个全透明的蒙版组件，作为所有功能模块的构建基础；巧妙使用router方式，在所需页面init时进行，路由蒙版页面实现蒙版遮罩基础功能；通过GlobalKey实例进行widget绑定，获取准确位置集合(可进行坐标和像素值转换)，并可作为参数传递到蒙版组件调用方法中；结合获取到的坐标值，同时设置当前功能引导区域范围(延伸宽高),使用canvas画布，Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形；增加引导文字和逻辑：通过传参的方式动态设置提示内容。增加下一步或者取消等操作按钮，切换或者结束当前引导蒙版功能。

在本申请实施例的一些变更实施方式中，将一个或多个蒙版图片布局在该纯透明色蒙版组件中，包括：

基于widget中GlobalKey实例获取准确坐标，转换成实际像素值，通过传参方式，控制需要绘制透明引导区域范围，动态灵活控制引导信息提示位置。

对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，包括：

结合获取到的坐标值，同时设置当前功能引导区域范围,使用canvas画布，Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形。

本实施例中，采用canvas画布技术，使用Paint画笔以及三阶贝塞尔曲线cubicTo进行绘制所需图形，并结合flutter路由特性，采用透明路由方式进行全屏蒙版覆盖，同时通过WillPopScope实现返回按钮拦截，确保方便准确的进行用户行为引导和提升重点功能感知力度，从而实现快速有效准确满足产品业务需求。

在本申请实施例的一些变更实施方式中，蒙版类中还包含蒙版图所引导的页面元素的标识；

蒙版图片中包含箭头；

将一个或多个蒙版图片布局在该纯透明色蒙版组件中的步骤包括：将蒙版图片设置在纯透明色蒙版组件中，并且使蒙版图片中的箭头指向具有标识的页面元素。

其中，前端展示模块将此控件通过一个全屏的对话框弹出，并可进一步使用Android平台动画技术，淡入显示蒙版图纯透明色蒙版组件，这样用户看到了精准的页面蒙版图引导提示，并记录好蒙版图展示标记；蒙版图消失也采用动画技术实现淡出，提升用户体验。对于一些蒙版图片，包含有箭头，用来引导页面元素(例如按钮51)从而引起用户注意。

在本申请实施例的一些变更实施方式中，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，还包括：

通过传参的方式动态设置提示内容，增加下一步或者取消操作按钮，所述下一步操作按钮用于切换当前引导蒙版功能，所述取消操作按钮用于结束当前引导蒙版功能。

如图2所示，作为对上述各图所示方法的实现，本申请提供了一种公交路线优化系统的一个实施例，该系统实施例与图1所示的方法实施例相对应。

前端解析模块211，用于对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取页面元素的尺寸以及在页面中的位置；

前端展示模块212，用于创建与页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使应用程序呈现指定页面的情况下，弹出蒙版图片。

如图3所示，示出了本申请的呈现引导蒙版的方法的基本效果展示，图中，某APP应用升级后，进入页面，会弹出的页面，该页面需要展示蒙版图。页面中按钮“一键报价”需是需要展示蒙版图的页面元素；展示的蒙版图是“快速报价，在这里呦！”全屏显示的纯透明色蒙版组件被设置为半透明状态，在需要展示蒙版图的按钮处设置为全透明状态，以提示用户注意该按钮。半透明黑色画面，其中有一块区域是透明的，并配有说明，点击下一步会进行切换不同的位置提示，或者点击固定按钮可以跳过提示信息。此为最常见的用户引导蒙版功能。

在一个实施例中，提出了一种计算机设备，计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取页面元素的尺寸以及在页面中的位置；创建与页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使应用程序呈现指定页面的情况下，弹出蒙版图片。

在一个实施例中，提出了一种存储有计算机可读指令的存储介质，该计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行以下步骤：对于在应用程序的指定页面中要展示蒙版图的一个或多个页面元素，获取页面元素的尺寸以及在页面中的位置；创建与页面的尺寸一致的纯透明色蒙版组件，将一个或多个蒙版图片布局在该纯透明色蒙版组件中；调用编辑接口，对布局在该纯透明色蒙版组件中的蒙版图片进行编辑处理，使应用程序呈现指定页面的情况下，弹出蒙版图片。

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

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围，其均应涵盖在本申请的权利要求和说明书的范围当中。本申请确保方便准确的进行用户行为引导和提升重点功能感知力度，从而实现快速有效准确满足产品业务需求。