控件视觉效果元素调节方法、装置、电子设备及存储介质制造方法及图纸

本申请提供一种控件视觉效果元素调节方法、装置、电子设备及存储介质。该方法包括：基于主控件的尺寸对图片进行处理；确定各个子控件在主控件坐标系下对应的矩形区域，并对矩形区域进行分类，得到与子控件的颜色相对应的矩形区域；对图片中矩形区域对应的颜色进行提取，得到矩形区域的颜色数据；依据颜色数据确定每个矩形区域的主色，将子控件的颜色与矩形区域的主色进行比较，得到颜色差异；当颜色差异满足预设要求时，确定主色的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。本申请能够自动调整控件的颜色以适应任何背景图，提高控件内视觉效果元素的显示效果。控件内视觉效果元素的显示效果。控件内视觉效果元素的显示效果。

【技术实现步骤摘要】
控件视觉效果元素调节方法、装置、电子设备及存储介质


[0001]本申请涉及应用程序开发
，尤其涉及一种控件视觉效果元素调节方法、装置、电子设备及存储介质。

技术介绍

[0002]在当前的应用程序开发中，视觉效果元素，如颜色、文字颜色、文字背景蒙层、阴影和边框颜色等，都是界面设计的重要组成部分。特别是在动态图布局中，背景图是由服务器拉取的，可以随时调整变化，而在背景图上又布局着各类控件如文字、按钮等。然而，这种布局模式存在一个显著的问题，即当背景图的颜色对比度低（如浅色或白色）时，其上的文字和按钮可能变得难以辨认。
[0003]现有的解决方案主要有三种：第一种是限制服务器传递给客户端的图片内容，只能固定某种颜色，这显然限制了内容的多样性，不利于广告的运营效果。第二种是让界面上所有控件的视觉效果元素可调节，由服务器接口下发视觉效果元素数据，然而这种方式也存在局限性，例如如果图片数量较多，控件较多，运营人员任务重、容易出错，同时如果因网络原因接口数据未到达，控件无法更换视觉效果元素。第三种是把控件及其效果画在图片上，但这种方式无法保证控件在想要的位置，同时如果控件和用户是有交互的，那么一张图片很难实现这一点。因此，目前的视觉效果元素调节方法仍存在无法根据图片动态灵活改变视觉效果元素，导致视觉效果元素单一，呈现效果差的问题。

技术实现思路

[0004]有鉴于此，本申请实施例提供了一种控件视觉效果元素调节方法、装置、电子设备及存储介质，以解决现有技术存在的无法根据图片动态灵活改变视觉效果元素，导致视觉效果元素单一，呈现效果差的问题。
[0005]本申请实施例的第一方面，提供了一种控件视觉效果元素调节方法，包括：获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。
[0006]本申请实施例的第二方面，提供了一种控件视觉效果元素调节装置，包括：处理模块，被配置为获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；分类模块，被配置为确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的
一个或多个矩形区域；提取模块，被配置为对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；比较模块，被配置为依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；调节模块，被配置为当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。
[0007]本申请实施例的第三方面，提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述方法的步骤。
[0008]本申请实施例的第四方面，提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。
[0009]本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：通过获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。本申请可以根据从服务器拉取的动态图改变控件视觉效果元素的效果，使控件的颜色与背景图的颜色形成反差，提高控件内视觉效果元素的显示效果。
附图说明
[0010]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
[0011]图1是本申请实施例提供的控件视觉效果元素调节方法的流程示意图；图2是本申请实施例提供的控件视觉效果元素调节装置的结构示意图；图3是本申请实施例提供的电子设备的结构示意图。
[0012]其中，图中各附图标记：201、处理模块；202、分类模块；203、提取模块；204、比较模块；205、调节模块；3、电子设备；301处理器；302、存储器；303计算机程序。
具体实施方式
[0013]以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电
路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。
[0014]如
技术介绍
所描述的内容，在客户端的实际开发中，经常遇到动态图布局，即:背景图是由服务器拉取的，是可以随时调整变化的，背景图其上布局着各类控件如文字，按钮等，这种布局有个问题，对其背景图的内容有一定要求，如果背景图的颜色与控件的视觉效果元素之间的颜色非常接近时，例如背景图的颜色和视觉效果元素的颜色都是白色时，那么视觉效果元素（比如文字）将不容易被看到，影响应用程序的视觉效果元素展示效果。现有技术中为解决该问题，提供了以下技术方案：第一种：约束服务器传到客户端的图片内容，只能固定某种色系，例如只能是深色图片。这种方式局限性很大，不利于广告内容的多样化，达不到运营效果。
[0015]第二种：让界面上所有控件的视觉效果元素可调节，其要使用的视觉效果元素数据用服务器的接口进行下发；运营人员在服务器后台针对不同图片，设置所有控件的视觉效果元素。这种方式局限性也很大:其一，如果图片数量较多，控件较多，则运营人员任务重、容易出错。其二，数据依赖于服务器接口下发，如果因网络原因接口数据未到达，则控件没有更换到视觉效果元素。
[0016]第三种：将控件及其效果画在图片上。这种本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种控件视觉效果元素调节方法，其特征在于，包括：获取服务器发送的图片，基于承载所述图片的主控件的尺寸对所述图片进行处理，以使所述主控件与所述图片之间的尺寸相同；确定各个子控件在主控件坐标系下对应的矩形区域，并依据所述子控件的颜色对所述矩形区域进行分类，得到与所述子控件的颜色相对应的一个或多个矩形区域；对所述图片中每个所述矩形区域对应的颜色进行提取，得到每个所述矩形区域对应的颜色数据；依据所述颜色数据确定每个所述矩形区域对应的主色，将所述子控件的颜色与相应的所述矩形区域的主色进行比较，得到颜色差异，判断所述颜色差异是否满足预设要求；当所述颜色差异满足预设要求时，基于所述主色的RGB值确定与所述主色相对应的反向颜色，将所述反向颜色的颜色数据赋值给相应的所述子控件的矩形区域，以调节所述子控件的视觉效果元素。2.根据权利要求1所述的方法，其特征在于，所述基于承载所述图片的主控件的尺寸对所述图片进行处理，包括：获取所述主控件及所述图片的宽度，将所述主控件的宽度与所述图片的宽度进行比较，以便确定宽度比；获取所述主控件及所述图片的高度，将所述主控件的高度与所述图片的高度进行比较，以便确定高度比；基于所述宽度比以及所述高度比确定目标比，依据所述目标比对所述图片进行缩放和裁剪。3.根据权利要求1所述的方法，其特征在于，所述确定各个子控件在主控件坐标系下对应的矩形区域，并依据所述子控件的颜色对所述矩形区域进行分类，包括：获取所述子控件在所述主控件坐标系下的位置坐标，依据所述子控件的位置坐标确定与所述子控件相对应的矩形区域；依据所述子控件对应的颜色对所述矩形区域进行划分，将相同颜色的所述子控件对应的矩形区域划分到同一颜色类别下；将所述颜色类别与所述矩形区域之间的对应关系用键值对表示，利用所述键值对生成包含所述对应关系的数据结构。4.根据权利要求1所述的方法，其特征在于，所述对所述图片中每个所述矩形区域对应的颜色进行提取，得到每个所述矩形区域对应的颜色数据，包括：依据所述矩形区域在所述主控件坐标系下的位置以及所述矩形区域的尺寸，将所述图片切割成多个子图片；创建颜色空间对象以及位图上下文对象，其中，所述颜色空间对象用于表征所述图片在设备中对应的RGB颜色空间；将所述子图片对应的矩形区域绘制在所述位图上下文对象中，并获取所述位图上下文对象中每个所述子图片对应矩形区域的颜色数据，其中，所述颜色数据中包含RGBA数值。5.根据权利要求1所述的方法，其特征在于，所述依据所述颜色数据确定每个所述矩形区域对应的主色，包括：创建一个用于统计颜色出现次数的集合，所述集合的大小与所述矩形区域所包含的像
素数量相等；以预定步长遍历所述矩形区域中的像素，每当遍历到一个像素时，从所述颜色数据中获取所述像素的颜色，并将所述像素的颜色存放到数组中；将所述数组添加到所述集合中，对所述集合中各个颜色出现的次数进行统计，将出现次数最多的颜色作为所...

【专利技术属性】
技术研发人员：陈裕聪，唐如意，叶松林，
申请(专利权)人：成都赛力斯科技有限公司，
类型：发明
国别省市：