CN113419797A - 一种组件显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种组件显示方法、装置、电子设备及存储介质，应用于电子设备，包括：在图像操作页面显示待操作图像，在图像操作页面的组件显示区域显示目标面板，若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。本申请实施例不是像现有技术一样，目标面板始终为单一颜色，而是可以基于被遮挡区域和/或待操作图像的图像特征信息对目标面板的显示实现自适应改变，为后续用户能够更好的对图像和目标面板的区分做好铺垫，简单便捷，提高用户体验。

Description

一种组件显示方法、装置、电子设备及存储介质

技术领域

本公开涉及互联网技术领域，尤其涉及一种组件显示方法、装置、电子设备及存储介质。

背景技术

设计趋势持续变化，在近年来扁平化设计的流行趋势逐渐减弱后，拟真的设计趋势再一次回归到设计圈的视野当中，新拟态对旧拟物风格进行了再创新，重新流行了起来。

目前，已知图像编辑器的操作面板区域的表现形式均为单一颜色的填充，比如白色或者黑色。其在以下场景中可能会存在问题：若输入图像编辑器的图像的颜色和操作面板区域的颜色是一样的，那么用户在对图像进行操作的时候，由于图像和操作面在整体界面中的层级关系是不明显的，这可能导致用户分不出进行放大后的图像和操作面板的区分线在哪里，进而影响用户对图像的操作，降低用户体验。

发明内容

本公开提供一种组件显示方法、装置、电子设备及存储介质，本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种组件显示方法，应用于电子设备，包括：

在图像操作页面显示待操作图像；

在图像操作页面的组件显示区域显示目标面板；

若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板包括：

响应于对待操作图像的预设操作指令，对待操作图像进行预设操作；预设操作包括但不限于移动、放大和翻转中的一项或者多项；

若检测到经过预设操作的待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，被遮挡区域和/或待操作图像的图像特征信息包括色相、亮度和/或饱和度，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板包括：

基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度确定目标面板的特征信息；

基于目标面板的特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板的特征信息包括颜色、透明度和/或模糊程度，基于目标面板的特征信息在组件显示区域显示目标面板包括：

基于目标面板的颜色、透明度和/或模糊程度在组件显示区域以毛玻璃效果显示目标面板。

在一些可能的实施例中，基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度确定目标面板的特征信息包括：

基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度从N个图像特征等级中确定出目标图像特征等级；

从N个面板特征等级中确定目标图像特征等级对应的目标面板特征等级；

从目标面板特征等级获取目标面板的特征信息；

其中，N为大于等于2的整数，N个图像特征等级中的每个图像特征等级中的色相、亮度和/或饱和度的数值分别在不同的N个预设范围内。

在一些可能的实施例中，基于目标面板的特征信息在组件显示区域显示目标面板包括：

获取电子设备的资源信息；

基于目标面板的特征信息和资源信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板为包含有操作子组件的操作面板。

在一些可能的实施例中，方法还包括；

在组件显示区域中的子显示区域显示目标工具栏；

基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板包括：

基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板，在子显示区域显示目标工具栏；

目标工具栏为包含工具组件的工具栏。

根据本公开实施例的第二方面，提供一种组件显示装置，包括：

第一显示模块，被配置为执行在图像操作页面显示待操作图像；

第二显示模块，被配置为执行在图像操作页面的组件显示区域显示目标面板；

第三显示模块，被配置为执行若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，第三显示模块包括：

操作模块，被配置为执行响应于对待操作图像的预设操作指令，对待操作图像进行预设操作；预设操作包括但不限于移动、放大和翻转中的一项或者多项；显示子模块，被配置为执行若检测到经过预设操作的待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，被遮挡区域和/或待操作图像的图像特征信息包括色相、亮度和/或饱和度，第三显示模块包括：

信息确定模块，被配置为执行基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度确定目标面板的特征信息；

显示子模块，被配置为执行基于目标面板的特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板的特征信息包括颜色、透明度和/或模糊程度，显示子模块，被配置为执行：

基于目标面板的颜色、透明度和/或模糊程度在组件显示区域以毛玻璃效果显示目标面板。

在一些可能的实施例中，信息确定模块，被配置为执行：

基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度从N个图像特征等级中确定出目标图像特征等级；

从N个面板特征等级中确定目标图像特征等级对应的目标面板特征等级；

从目标面板特征等级获取目标面板的特征信息；

其中，N为大于等于2的整数，N个图像特征等级中的每个图像特征等级中的色相、亮度和/或饱和度的数值分别在不同的N个预设范围内。

在一些可能的实施例中，显示子模块，被配置为执行：

获取电子设备的资源信息；

基于目标面板的特征信息和资源信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板为包含有操作子组件的操作面板。

在一些可能的实施例中，装置还包括；

第四显示模块，被配置为执行在组件显示区域中的子显示区域显示目标工具栏；

第三显示模块，被配置为执行：

基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板，在子显示区域显示目标工具栏；

目标工具栏为包含工具组件的工具栏。

根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现如上述第一方面中任一项的方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开实施例的第一方面中任一项的方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从可读存储介质读取并执行计算机程序，使得计算机设备执行本公开实施例的第一方面中任一项的方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

在图像操作页面显示待操作图像，在图像操作页面的组件显示区域显示目标面板，若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。本申请实施例不是像现有技术一样，目标面板始终为单一颜色，而是可以基于被遮挡区域和/或待操作图像的图像特征信息对目标面板的显示实现自适应改变，为后续用户能够更好的对图像和目标面板的区分做好铺垫，简单便捷，提高用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种应用环境的示意图；

图2是根据一示例性实施例示出的一种组件显示方法的流程图；

图3是根据一示例性实施例示出的一种组件显示方法的流程图；

图4是根据一示例性实施例示出的一种图像操作页面的示意图；

图5是根据一示例性实施例示出的一种图像操作页面的示意图；

图6是根据一示例性实施例示出的一种各组件对比的示意图；

图7是根据一示例性实施例示出的一种各组件对比的示意图；

图8是根据一示例性实施例示出的一种组件显示装置的框图；

图9是根据一示例性实施例示出的一种用于组件显示的电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的第一对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

请参阅图1，图1是根据一示例性实施例示出的一种组件显示方法的应用环境的示意图，如图1所示，该应用环境可以包括显示待操作图像101和目标面板102的电子设备，该电子设备上可以显示图像操作页面10，以及在该图像操作页面10上显示的待操作图像101和目标面板102。

在一个可选的实施例中，上述的电子设备可以在图像操作页面显示待操作图像，在图像操作页面的组件显示区域显示目标面板，若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或所述待操作图像的图像特征信息在组件显示区域显示目标面板。其中，上述的电子设备可以包括但不限于智能手机、台式计算机、平板电脑、笔记本电脑、智能音箱、数字助理、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、智能可穿戴设备等类型的电子设备。也可以为运行于上述电子设备的软体，例如应用程序、小程序等。可选的，电子设备上运行的操作***可以包括但不限于安卓***、IOS***、linux、windows、Unix等。

此外，需要说明的是，图1所示的仅仅是本公开提供的对象播放方法的一种应用环境，在实际应用中，还可以包括其他应用环境，例如，在实际应用中，可以存在服务器。其中，电子设备显示的待操作图像可以是从服务器获取的，当启动电子设备的图像编辑应用程序后，服务器可以向电子设备发送待操作图像。可选的，服务器可以包括是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式***，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。

在一些可选的实施例中，电子设备和服务器之间可以通过有线链路连接，也可以通过无线链路连接。

图2是根据一示例性实施例示出的一种组件显示方法的流程图，如图2所示，组件显示方法可以应用于电子设备，也可以应用于其他节点设备，包括以下步骤：

在步骤S201中，在图像操作页面显示待操作图像。

本申请实施例中，电子设备上可以装载有图像编辑应用程序、视频编辑应用程序等能够对图像或者视频中的帧图像进行操作和处理的应用程序。以图像编辑应用程序为例，当电子设备启动该图像编辑应用程序后，可以显示图像操作页面。该图像操作页面上可以包含有图像导入组件。

在一些可能的实施例中，当用户触碰该图像导入组件时，电子设备可以检测到该图像导入组件触发的图像导入指令，可选的，电子设备可以跳转到图像库。随后，当用户触碰某一张图像时，电子设备可以检测到针对该张图像的确认指令时，电子设备就可以将该张图像导入至图像白编辑应用程序中，显示在图像操作页面上。

在步骤S203中，在图像操作页面的组件显示区域显示目标面板。

本申请实施例中，如图1所示，目标面板可以是图像编辑应用程序自带的。组件显示区域102可以被设置在图像操作页面的底部。可选的，组件显示区域102还可以被设置在图像操作页面的顶部、左侧或者右侧任一一个区域。实际被设置的位置可以根据用户的使用习惯来确定。

可选的，该组件显示区域并不是固定不变的，是可以基于用户使用习惯进行调整的。可选的，该图像操作页面还可以包括区域调节组件，当电子设备检测到该区域调节组件触发的区域调节指令后，可以根据该区域调节指令对应的调节轨迹对该组件显示区域进行调节。

在一些可能的实施例中，本申请实施例中的目标面板和待操作图像可以如图1所示，在待操作图像导入图像操作页面的初始阶段，是没有重叠部分的。或者，可以在待操作图像导入图像操作页面的初始阶段，该待操作图像是铺满整个图像操作页面的，因此，组件显示区域可以位于待操作图像的上层。下面为了对本申请进行清晰全面的传输，将以目标面板和待操作图像没有重叠部分为例进行阐述。

在一些可能的实施例中，目标面板可以是任一组件，比如对话框，图片，表格，按钮，或者针对于对图像进行修改的包含有操作子组件的操作面板，其中，操作子组件可以包括美图配方、智能优化、编辑、调色、滤镜和去美容等子组件。

如此，可以丰富目标面板的种类，为实现对待操作图像的各种可能操作做好准备。

在步骤S205中，若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或所述待操作图像的图像特征信息在组件显示区域显示目标面板。

本申请实施例中，可选的，当电子设备检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，可以基于被遮挡区域的图像特征信息在组件显示区域显示目标面板。也就是说，如果待操作图像中存在某一部分被遮挡在组件显示区域之下，则这部分可以被称为被遮挡部分。随后，电子设备可以根据被遮挡区域的特征信息在组件显示区域显示目标面板。

在另一种可选的实施例中，当电子设备检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，可以基于待操作图像整个的图像特征信息在组件显示区域显示目标面板。

在另一种可选的实施例中，当电子设备检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，可以基于被遮挡区域的图像特征信息和待操作图像的图像特征信息综合考量，在组件显示区域显示目标面板。

下面将以基于被遮挡区域的图像特征信息在组件显示区域显示目标面板为例，具体阐述电子设备是如何在组件显示区域显示目标面板的。上文中的其他两种方式可以参考这种方式进行实施。

现有技术中，目标面板始终为单一颜色，若导入的待操作图像和目标面板的颜色是相同的，那么用户在对图像进行操作的时候，由于图像和操作面在整体界面中的层级关系是不明显的，这可能导致用户分不出进行放大后的图像和操作面板的区分线在哪里，进而影响用户对图像的操作，降低用户体验。而本申请实施例可以基于被遮挡区域的图像特征信息对目标面板的显示实现自适应改变，为后续用户能够更好的对图像和目标面板的区分做好铺垫，简单便捷，提高用户体验。

上文已经提到，本申请实施例将以目标面板和待操作图像没有重叠部分为例进行阐述。因此，当用户没有对图像进行操作时，必然不会出现待操作图像存在部分区域在目标面板所在的组件显示区域之下。

基于此，图3是根据一示例性实施例示出的一种组件显示方法的流程图，如图3所示，上述步骤S205可以更新为以下步骤：

在步骤S2051中，响应于对所述待操作图像的预设操作指令，对所述待操作图像进行预设操作；所述预设操作包括但不限于移动、放大和翻转中的一项或者多项。

可选的，该预设操作指令可以包括为对待操作图像进行移动，放大，翻转等预设操作的一项或者多项子指令的集合。

本申请实施例中，响应于针对待操作图像的移动，放大和/或翻转等预设操作指令时，可以对应地对待操作图像进行移动，放大和/或翻转。

在步骤S2053中，若检测到经过预设操作的待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，电子设备可以基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，以移动为例，当对待操作图像进行移动操作后，可以得到如图4所示的图，图4是根据一示例性实施例示出的一种图像操作页面的示意图，包括图像操作页面10，被组件显示区域102遮挡住身体部分的待操作图像101。

当电子设备检测到经过预设操作(移动操作)的待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，可以基于被遮挡区域(身体部分)的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，由于图像的样式***，不同色相(H)、饱和度(S)、亮度(B)的图片会影响整体操作面板的识别度，为了让用户得到最优的使用体验，提出基于被遮挡区域和/或待操作图像的图像特征信息对目标面板的显示实现自适应改变。

可选的，电子设备可以先确定被遮挡区域和/或待操作图像的图像特征信息。可选的，被遮挡区域和/或待操作图像的图像特征信息可以包括被遮挡区域和/或待操作图像色相、被遮挡区域和/或待操作图像亮度，和/或被遮挡区域和/或待操作图像饱和度，如此，上述步骤S2053中基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板可以扩展为：电子设备可以基于被遮挡区域和/或待操作图像的色相、被遮挡区域和/或待操作图像的亮度，和/或被遮挡区域和/或待操作图像的饱和度确定目标面板的特征信息，并基于目标面板的特征信息在组件显示区域显示目标面板。

如此，通过本公开实施例，可以实现在对不同图像进行预设操作的过程中，目标面板(操作面板)可以根据图片的不同生成不同的适应效果。

本申请实施例中，目标面板的特征信息包括颜色、透明度和/或模糊程度，电子设备可以基于目标面板的颜色、透明度和/或模糊程度在组件显示区域以毛玻璃效果显示目标面板。

换句话说，目标面板的特征信息可以是颜色、透明度和模糊程度中的一样或者多样，为了能够给予用户视觉上更丰富更精彩的体现，同时使得用户在视觉上能够透过上层的组件显示区域看见待操作图像的被遮挡区域，电子设备就可以以毛玻璃效果显示目标面板。

本申请实施例中，为了尽可能多的覆盖到市场上现有的不同机型,针对不同机型不同版本提出不同的自适应方案，本申请实施例中，电子设备可以获取电子设备自己的资源信息，并根据目标面板的特征信息和资源信息在组件显示区域显示目标面板。

可选的，上述的资源信息包括电子设备的***信息，比如windows***，安卓***，IOS***，还可以包括电子设备中***的版本信息，比如，IOS 10版本，IOS 11版本等。如此，可以使得本申请可以的覆盖到市场上现有的不同机型，使得更多的用户能够享受到本申请的便利性。

图5是根据一示例性实施例示出的一种图像操作页面的示意图，包括图像操作页面10，以及在该图像操作页面10上显示的待操作图像101和在组件显示区域显示的目标面板102，此外，还包括在组件显示区域中的子显示区域显示目标工具栏103。

可选的，步骤S205中的内容基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板可以被认为是：电子设备可以基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板，在子显示区域显示目标工具栏。其中，目标工具栏可以为包含工具组件的工具栏，当然，还可以是其他形式的组件。具体的组件由技术人员确定，这里不再赘述。

可选的，工具组件可以包括皮肤、人像、滤镜、和文字编辑等子组件。

具体的，电子设备可以基于被遮挡区域和/或待操作图像的图像特征信息确定目标面板的特征信息和目标工具栏的特征信息，并基于目标面板的特征信息在组件显示区域以毛玻璃效果显示目标面板，基于目标工具栏的特征信息在子显示区域以毛玻璃效果显示目标工具栏。

通过上述的实施例可以看出，本申请实施例可以在组件显示区域上进行别的区域的叠加，并以毛玻璃效果显示对应的组件，使得待操作图像、操作面板、工具栏的层级关系在表现明显，提高层次感。

在一些可能的实施例中，电子设备可以预先设置有N个图像特征等级，其中，N个图像特征等级中的每个图像特征等级中的色相、亮度和/或饱和度的数值分别在不同的N个预设范围内像。下面以图像特征信息包括亮度为例进行举例，假设N＝4,则，电子设备可以预先设置有4个图像特征等级，第一等级，第二等级，第三等级和第四等级。可选的，第一等级中的亮度为小于30，第二等级中的亮度为大于等于30小于等于70，第三等级中的亮度为大于70小于等于95，第四等级中的亮度为大于95。

本申请实施例中，假设当前被遮挡区域的亮度为小于30，则可以从上述4个图像特征等级中确定出第一等级为目标图像特征等级。可选的，图像特征等级和面板特征等级可以是一一对应的关系。

当电子设备确定出目标图像特征等级，可以根据一一对应关系从N个面板特征等级确定出一个目标面板特征等级，并从目标面板特征等级中获取目标面板的特征信息，比如颜色，透明度和/或模糊度。

下面通过两个实施例分别展示电子设备是如何基于被遮挡区域的图像特征信息在组件显示区域显示目标面板，在子显示区域显示目标工具栏：

图6是根据一示例性实施例示出的一种各组件对比的示意图，结合图6和被遮挡区域的亮度这个图像特征信息对IOS***上的目标面板(操作面板)和目标工具栏(工具栏)的特征参数的设置：

(a):亮度小于30；

目标面板：

颜色＝151517；

透明度＝40％；

模糊度＝10；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(b):亮度大于等于30小于等于70；

目标面板：

颜色＝151517；

透明度＝60％；

模糊度＝10；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(c):亮度大于70小于等于95；

目标面板：

颜色＝151517；

透明度＝80％；

模糊度＝10；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(d):亮度大于95；

目标面板：

颜色＝151517；

透明度＝80％；

模糊度＝10；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

由于高斯模糊效果无法在全部的安卓机型中进行还原，同时开发成本较高，图7是根据一示例性实施例示出的一种各组件对比的示意图，可以结合图7和被遮挡区域的亮度对安卓***上的目标面板(操作面板)和目标工具栏(工具栏)的特征参数的设置：

(a):亮度小于30；

目标面板：

颜色＝151517；

透明度＝80％；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(b):亮度大于等于30小于等于70；

目标面板：

颜色＝151517；

透明度＝90％；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(c):亮度大于70小于等于95；

目标面板：

颜色＝151517；

透明度＝90％；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

(d):亮度大于95；

目标面板：

颜色＝151517；

透明度＝90％；

目标工具栏：

颜色＝FFFFF；

透明度＝5％。

从上述两个例子可以看出，基于不同的电子设备的***信息，本申请实施例可以基于不同的被遮挡区域的图像特征信息(这里只示意出亮度)确定显示的目标面板的特征信息和目标工具栏的特征信息，实现显示的自适应。

综上，本申请实施例可以使得目标面板(操作面板)透明毛玻璃效果，增加界面的层次感，突出不同组件(图片，目标面板和目标工具栏)的上下层级关系，同时，通过对边缘的细腻化处理，还原真实的玻璃质感，使得其将毛玻璃质感的视觉美感发挥到极致的同时，保证操作面板的可用性与易读性。

图8是根据一示例性实施例示出的一种组件显示装置框图。参照图8，该装置包括第一显示模块801、第二显示模块802和第三显示模块803。

第一显示模块801，被配置为执行在图像操作页面显示待操作图像；

第二显示模块802，被配置为执行在图像操作页面的组件显示区域显示目标面板；

第三显示模块803，被配置为执行若检测到待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，第三显示模块包括：

操作模块，被配置为执行响应于对待操作图像的预设操作指令，对待操作图像进行预设操作；预设操作包括但不限于移动、放大和翻转中的一项或者多项；显示子模块，被配置为执行若检测到经过预设操作的待操作图像中存在被遮挡区域，且被遮挡区域位于组件显示区域的下层，基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，被遮挡区域和/或待操作图像的图像特征信息包括色相、亮度和/或饱和度，第三显示模块包括：

信息确定模块，被配置为执行基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度确定目标面板的特征信息；

显示子模块，被配置为执行基于目标面板的特征信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板的特征信息包括颜色、透明度和/或模糊程度，显示子模块，被配置为执行：

基于目标面板的颜色、透明度和/或模糊程度在组件显示区域以毛玻璃效果显示目标面板。

在一些可能的实施例中，信息确定模块，被配置为执行：

基于被遮挡区域和/或待操作图像的色相、亮度和/或饱和度从N个图像特征等级中确定出目标图像特征等级；

从N个面板特征等级中确定目标图像特征等级对应的目标面板特征等级；

从目标面板特征等级获取目标面板的特征信息；

其中，N为大于等于2的整数，N个图像特征等级中的每个图像特征等级中的色相、亮度和/或饱和度的数值分别在不同的N个预设范围内。

在一些可能的实施例中，显示子模块，被配置为执行：

获取电子设备的资源信息；

基于目标面板的特征信息和资源信息在组件显示区域显示目标面板。

在一些可能的实施例中，目标面板为包含有操作子组件的操作面板。

在一些可能的实施例中，装置还包括；

第四显示模块，被配置为执行在组件显示区域中的子显示区域显示目标工具栏；

第三显示模块，被配置为执行：

基于被遮挡区域和/或待操作图像的图像特征信息在组件显示区域显示目标面板，在子显示区域显示目标工具栏；

目标工具栏为包含工具组件的工具栏。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图9是根据一示例性实施例示出的一种用于组件显示的电子设备900的框图。

该电子设备可以是服务器，还可以是终端设备，其内部结构图可以如图9所示。该电子设备包括通过***总线连接的处理器、存储器和网络接口。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***和计算机程序。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该电子设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种组件显示方法。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本公开方案相关的部分结构的框图，并不构成对本公开方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在示例性实施例中，还提供了一种电子设备，包括：处理器；用于存储该处理器可执行指令的存储器；其中，该处理器被配置为执行该指令，以实现如本公开实施例中的组件显示方法。

在示例性实施例中，还提供了一种计算机可读存储介质，当该计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开实施例中的组件显示方法。

在示例性实施例中，还提供了一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从可读存储介质读取并执行计算机程序，使得计算机设备执行本公开实施例的组件显示方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种组件显示方法，其特征在于，应用于电子设备，包括：

在图像操作页面显示待操作图像；

在所述图像操作页面的组件显示区域显示目标面板；

若检测到所述待操作图像中存在被遮挡区域，且所述被遮挡区域位于所述组件显示区域的下层，基于所述被遮挡区域和/或所述待操作图像的图像特征信息在所述组件显示区域显示所述目标面板。

2.根据权利要求1所述的组件显示方法，其特征在于，所述若检测到所述待操作图像中存在被遮挡区域，且所述被遮挡区域位于所述组件显示区域的下层，基于所述被遮挡区域和/或所述待操作图像的图像特征信息在所述组件显示区域显示所述目标面板包括：

响应于对所述待操作图像的预设操作指令，对所述待操作图像进行预设操作；所述预设操作包括但不限于移动、放大和翻转中的一项或者多项；

若检测到经过所述预设操作的所述待操作图像中存在被遮挡区域，且所述被遮挡区域位于所述组件显示区域的下层，基于所述被遮挡区域和/或所述待操作图像的图像特征信息在所述组件显示区域显示所述目标面板。

3.根据权利要求1所述的组件显示方法，其特征在于，所述被遮挡区域和/或所述待操作图像的图像特征信息包括色相、亮度和/或饱和度，所述基于所述被遮挡区域和/或所述待操作图像的图像特征信息在所述组件显示区域显示所述目标面板包括：

基于所述被遮挡区域和/或所述待操作图像的色相、亮度和/或饱和度确定所述目标面板的特征信息；

基于所述目标面板的特征信息在所述组件显示区域显示所述目标面板。

4.根据权利要求3所述的组件显示方法，其特征在于，所述目标面板的特征信息包括颜色、透明度和/或模糊程度，所述基于所述目标面板的特征信息在所述组件显示区域显示所述目标面板包括：

基于所述目标面板的颜色、透明度和/或模糊程度在所述组件显示区域以毛玻璃效果显示所述目标面板。

5.根据权利要求3所述的组件显示方法，其特征在于，所述基于所述被遮挡区域和/或所述待操作图像的色相、亮度和/或饱和度确定所述目标面板的特征信息包括：

基于所述被遮挡区域和/或所述待操作图像的色相、亮度和/或饱和度从N个图像特征等级中确定出目标图像特征等级；

从N个面板特征等级中确定所述目标图像特征等级对应的目标面板特征等级；

从所述目标面板特征等级获取所述目标面板的特征信息；

其中，N为大于等于2的整数，所述N个图像特征等级中的每个图像特征等级中的色相、亮度和/或饱和度的数值分别在不同的N个预设范围内。

6.根据权利要求3所述的组件显示方法，其特征在于，所述基于所述目标面板的特征信息在所述组件显示区域显示所述目标面板包括：

获取所述电子设备的资源信息；

基于所述目标面板的特征信息和所述资源信息在所述组件显示区域显示所述目标面板。

7.一种组件显示装置，其特征在于，包括：

第一显示模块，被配置为执行在图像操作页面显示待操作图像；

第二显示模块，被配置为执行在所述图像操作页面的组件显示区域显示目标面板；

第三显示模块，被配置为执行若检测到所述待操作图像中存在被遮挡区域，且所述被遮挡区域位于所述组件显示区域的下层，基于所述被遮挡区域和/或所述待操作图像的图像特征信息在所述组件显示区域显示所述目标面板。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6中任一项所述的组件显示方法。

9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至6中任一项所述的组件显示方法。

10.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从所述可读存储介质读取并执行所述计算机程序，使得所述计算机设备执行如权利要求1至6中任一项所述的组件显示方法。

Images