CN116466952B - 控件视觉效果元素调节方法、装置、电子设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

在当前的应用程序开发中，视觉效果元素，如颜色、文字颜色、文字背景蒙层、阴影和边框颜色等，都是界面设计的重要组成部分。特别是在动态图布局中，背景图是由服务器拉取的，可以随时调整变化，而在背景图上又布局着各类控件如文字、按钮等。然而，这种布局模式存在一个显著的问题，即当背景图的颜色对比度低（如浅色或白色）时，其上的文字和按钮可能变得难以辨认。

现有的解决方案主要有三种：第一种是限制服务器传递给客户端的图片内容，只能固定某种颜色，这显然限制了内容的多样性，不利于广告的运营效果。第二种是让界面上所有控件的视觉效果元素可调节，由服务器接口下发视觉效果元素数据，然而这种方式也存在局限性，例如如果图片数量较多，控件较多，运营人员任务重、容易出错，同时如果因网络原因接口数据未到达，控件无法更换视觉效果元素。第三种是把控件及其效果画在图片上，但这种方式无法保证控件在想要的位置，同时如果控件和用户是有交互的，那么一张图片很难实现这一点。因此，目前的视觉效果元素调节方法仍存在无法根据图片动态灵活改变视觉效果元素，导致视觉效果元素单一，呈现效果差的问题。

发明内容

有鉴于此，本申请实施例提供了一种控件视觉效果元素调节方法、装置、电子设备及存储介质，以解决现有技术存在的无法根据图片动态灵活改变视觉效果元素，导致视觉效果元素单一，呈现效果差的问题。

本申请实施例的第一方面，提供了一种控件视觉效果元素调节方法，包括：获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。

本申请实施例的第二方面，提供了一种控件视觉效果元素调节装置，包括：处理模块，被配置为获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；分类模块，被配置为确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；提取模块，被配置为对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；比较模块，被配置为依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；调节模块，被配置为当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。

本申请实施例的第三方面，提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述方法的步骤。

本申请实施例的第四方面，提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

通过获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。本申请可以根据从服务器拉取的动态图改变控件视觉效果元素的效果，使控件的颜色与背景图的颜色形成反差，提高控件内视觉效果元素的显示效果。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本申请实施例提供的控件视觉效果元素调节方法的流程示意图；

图2是本申请实施例提供的控件视觉效果元素调节装置的结构示意图；

图3是本申请实施例提供的电子设备的结构示意图。

其中，图中各附图标记：

201、处理模块；202、分类模块；203、提取模块；204、比较模块；205、调节模块；

3、电子设备；301处理器；302、存储器；303计算机程序。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

如背景技术所描述的内容，在客户端的实际开发中，经常遇到动态图布局，即:背景图是由服务器拉取的，是可以随时调整变化的，背景图其上布局着各类控件如文字，按钮等，这种布局有个问题，对其背景图的内容有一定要求，如果背景图的颜色与控件的视觉效果元素之间的颜色非常接近时，例如背景图的颜色和视觉效果元素的颜色都是白色时，那么视觉效果元素（比如文字）将不容易被看到，影响应用程序的视觉效果元素展示效果。现有技术中为解决该问题，提供了以下技术方案：

第一种：约束服务器传到客户端的图片内容，只能固定某种色系，例如只能是深色图片。这种方式局限性很大，不利于广告内容的多样化，达不到运营效果。

第二种：让界面上所有控件的视觉效果元素可调节，其要使用的视觉效果元素数据用服务器的接口进行下发；运营人员在服务器后台针对不同图片，设置所有控件的视觉效果元素。这种方式局限性也很大:其一，如果图片数量较多，控件较多，则运营人员任务重、容易出错。其二，数据依赖于服务器接口下发，如果因网络原因接口数据未到达，则控件没有更换到视觉效果元素。

第三种：将控件及其效果画在图片上。这种方式一般不能采用:其一，图片大小和实际的图片控件大小经常不一致，图片会进行一定的缩放和裁剪，这样无法保证控件在想要的位置。其二，如果控件和用户是有交互(如点击，双击，长按等)的，那么一张图片很难做到这一点。

有鉴于此，本申请实施例提供了一种控件视觉效果元素调节方法。本申请通过对图片进行处理并确定子控件在主控件坐标系下的矩形区域，因此，可以针对不同的背景图调整控件的视觉效果元素，从而使得控件在任何背景图上都能清晰可见，增强了用户界面的可视性和互动性。通过提取图片中各个矩形区域对应的颜色数据，并确定每个矩形区域的主色，因此，可以自动调整控件的颜色以适应背景图的颜色，从而解决了因背景图颜色对比度低而使得控件难以辨认的问题。本申请还通过对颜色差异进行判断和对主色的反向颜色进行确定，因此，可以自动完成控件颜色的调整工作，从而减轻了运营人员的工作负担。通过将反向颜色的颜色数据赋值给相应的子控件，因此，可以提供一个更为美观和协调的用户界面，从而提升了用户体验。由于本申请能够自动调整控件的颜色以适应任何背景图，从而解决了当背景图的颜色与控件的颜色非常接近时，视觉效果元素不便于识别的问题。

下面结合附图以及具体实施例对本申请技术方案的内容进行详细描述。

图1是本申请实施例提供的控件视觉效果元素调节方法的流程示意图。图1的控件视觉效果元素调节方法可以由iOS应用程序执行。如图1所示，该控件视觉效果元素调节方法具体可以包括：

S101，获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；

S102，确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；

S103，对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；

S104，依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；

S105，当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。

在一些实施例中，基于承载图片的主控件的尺寸对图片进行处理，包括：

获取主控件及图片的宽度，将主控件的宽度与图片的宽度进行比较，以便确定宽度比；

获取主控件及图片的高度，将主控件的高度与图片的高度进行比较，以便确定高度比；

基于宽度比以及高度比确定目标比，依据目标比对图片进行缩放和裁剪。

具体地，由于移动终端设备有很多，而且还在不断推出新机型，每种设备屏幕分辨率也可能不一样，服务器一般不会对每种设备去生成单独分辨率的图片。因此，从服务器获取到图片后，需根据设备上图片控件的尺寸，对图片进行缩放和裁剪。在实际应用中，对图片进行缩放和裁剪一般是通过保持图片原始宽高比例不变来缩放图片，从而使图片尽可能放入图片控件，保证图片宽和高的较小值和控件的宽和高的较小值重合。下面结合具体实施例对图片处理的过程及原理进行详细说明，具体可以包括以下内容：

首先，获取主控件的宽度以及图片的宽度，判断两者的大小，如果主控件的宽度＞图片的宽度，则计算出一个宽度比为:图片的宽度/主控件的宽度；如果主控件的宽度≤图片的宽度，则将宽度比设为1。

其次，获取主控件的高度以及图片的高度，判断两者的大小，如果主控件的高度＞图片的高度，则计算出一个高度比为：图片的高度/主控件的高度；如果主控件的高度≤图片的高度，则将高度比设为1。

进一步地，比较宽度比与高度比，将两者之中比值较小的作为目标比，例如：当宽度比＞高度比时，那么选择高度比作为目标比；利用目标比计算需要将图片缩放或裁剪至的尺寸，即：裁剪后图片的宽度=原始图片的宽度×目标比，裁剪后图片的高度=原始图片的高度×目标比。

在一个具体示例中，以iOS中图片的缩放和裁剪为例，对利用目标比实现图片的缩放和裁剪的方式进行说明，具体可以包括以下内容：

首先，使用UIImage类将从服务器获取的图片保存下来。然后，创建一个UIGraphicsImageRenderer实例来绘制图片。可以通过调用UIGraphicsImageRenderer的初始化方法并传入所需的宽度和高度作为尺寸参数，以及源图片的imageRendererFormat属性或者根据屏幕分辨率等数据新生成的UIGraphicsImageRendererFormat类实例作为格式参数。

接着，通过调用render实例的image方法来获取缩放后的图片。这个方法的参数是一个回调函数，该函数调用图片实例的draw(in:)方法并传入所需的尺寸作为参数，这样，就能够将图片重绘为指定的尺寸。

然后，根据业务需求计算出裁剪图片的起始x和y值。比如，如果想裁剪图片的中间部分，可以使用公式（主控件的宽度/高度-需要的宽度/高度）/2来计算起始值。

最后，可以创建一个新的UIGraphicsImageRenderer实例，并调用其image方法来获取裁剪后的图片。这个方法的参数是一个回调函数，该函数调用图片实例的draw(at:)方法并传入起始x和y值组成的点作为参数。这样，就能从指定的点开始绘制图片，并将超出指定尺寸的部分丢弃。

需要说明的是，可以将上述的缩放和裁剪步骤合并到一个render实例中来实现。只需要在回调函数中同时调用draw(in:)方法和draw(at:)方法即可。通过这种方式，可以确保图片和图片控件的大小完全一致（即尺寸具有1:1的关系），这对于后续的位置和矩形区域计算非常有帮助。本申请实施例的主控件是用于承载应用程序界面的背景图的控件，因此主控件也可以被称为图片控件。

在一些实施例中，确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，包括：

获取子控件在主控件坐标系下的位置坐标，依据子控件的位置坐标确定与子控件相对应的矩形区域；

依据子控件对应的颜色对矩形区域进行划分，将相同颜色的子控件对应的矩形区域划分到同一颜色类别下；

将颜色类别与矩形区域之间的对应关系用键值对表示，利用键值对生成包含对应关系的数据结构。

具体地，主控件上具有多个用于承载视觉效果元素的子控件，下面以iOS中获取子控件在主控件坐标系下对应的矩形区域以及矩形区域的分类过程为例进行详细说明，具体可以包括以下内容：

首先，由于布局是自定义的，所以已经知道了子控件的x坐标值，y坐标值，宽度和高度。然而，这些坐标是在子控件的父控件坐标系下的。由于子控件和图片控件之间的层级关系可能不同，因此需要使用iOS提供的方法（convert(:to:)或convert(:from:)）来将x值和y值转换为图片控件坐标系下的x和y值。

在实际应用中，当子控件为文字控件时，由于一个文字控件可能包含大小和颜色不同的文字，因此，处理文字控件的矩形区域的操作相对复杂。本申请实施例通过将文字控件进行分割，利用iOS的TextKit库中的NSTextStorage类，NSLayoutManager类和NSTextContainer类对当前文字控件进行模拟绘制。模拟绘制包括以下三种方法：

第一种方法：如果文字控件不是用UITextView控件绘制的，则新建一个UITextView类实例，设置相关的属性如:文字，颜色，字体等，将视觉效果调整的和源控件一模一样即可。因为UITextView控件底层就是用NSTextStorage类和NSLayoutManager类和NSTextContainer类去实现的，所以它持有这3个类对象的引用(textStorage，layoutManager， textContainer)，直接获取即可。

第二种方法：如果文字控件不是用UITextView控件绘制的，则新生成一个NSTextStorage类(或者子类化)实例一个NSLayoutManager类(或者子类化)实例，一个NSTextContainer类(或者子类化)实例，将他们三个设置为从前到后的引用关系:NSTextStorage类实例持有NSLayoutManager类实例， NSLayoutManager类实例持有NSTextContainer类实例；并设置其对应属性(或者重写其对应方法如NSLayoutManager类实例的方法draw(_ rect: CGRect))，使得视觉效果和源控件一模一样。

第三种方法：如果文字控件是用UITextView控件绘制的，则直接读取它的三个属性(textStorage，layoutManager， textContainer)即可。

进一步地，通过NSLayoutManager类的某些方法可以得知其绘制的所有文字在其NSTextContainer的lineFragment坐标系下的坐标和宽高，通过iOS的坐标转换系函数(convert(_:to:)或convert(_:from:))，得到在图片控件坐标系下的位置和宽高。下面对通过NSLayoutManager类的某些方法确定其绘制的所有文字在其NSTextContainer的lineFragment坐标系下的坐标和宽高的过程进行详细说明，具体可以包括以下内容：

首先，对于某种颜色的字，由于是自己绘制的，所以已知其在整个字符串中的位置(起始位置+长度)，通过调用NSLayoutManager类实例的方法-(NSRange)glyphRangeForCharacterRange:(NSRange)charRangeactualCharacterRange:(nullableNSRangePointer)actualCharRange；其第一个参数传入位置，第二个参数传入NULL，得到其对应的字形(glyph)在绘制区域(NSTextContainer)中的位置(就是方法的返回值)。

然后，调用-NSLayoutManager类实例的方法 (CGRect)boundingRectForGlyphRange:(NSRange)glyphRangeinTextContainer:(NSTextContainer)container；得到字形的绘制位置；其第一个参数传入字形位置，第二个参数传入NSTextContainer的实例。

进一步地，控件可以有多个颜色，根据业务需求，不同的控件有不同的颜色，相同的控件下也可以有多个颜色的内容（如文字），要根据颜色的不同把控件对应的矩形区域进行分类，相同颜色的矩形归纳在同一个分类下，得到一种键值对的数据结构。例如，红色文字对应以下矩形区域：矩形1，矩形2，矩形3，蓝色文字对应以下矩形区域：矩形4，矩形5，黄色文字对应以下矩形区域:矩形6，矩形7。

可选地，在将将相同颜色的子控件对应的矩形区域划分到同一颜色类别下之后，可以采用键值对的方式表示颜色类别与矩形区域之间的对应关系，其中，键表示颜色，值是由矩形组成的数组；也可以用类来组织数据关系，例如创建一个类，该类具有颜色属性和矩形数组属性，然后创建多个类的实例。

在一些实施例中，对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据，包括：

依据矩形区域在主控件坐标系下的位置以及矩形区域的尺寸，将图片切割成多个子图片；

创建颜色空间对象以及位图上下文对象，其中，颜色空间对象用于表征图片在设备中对应的RGB颜色空间；

将子图片对应的矩形区域绘制在位图上下文对象中，并获取位图上下文对象中每个子图片对应矩形区域的颜色数据，其中，颜色数据中包含RGBA数值。

具体地，对每个矩形区域所在图片的RGBA数据进行提取，通过遍历键值对数据结构，对于每个颜色对应的多个矩形，根据矩形的位置和大小信息，将图片切割成多个区域，即得到多个子图片。再对每个子图片进行取色操作，即得到其RGBA数据。

在一个具体示例中，首先将图片切割成多个子图片，再提取子图片的颜色数据，在实际应用中，可以采用以下方式进行图片切割：调用UIGraphicsImageRenderer的初始化方法init(bounds: CGRect，format:UIGraphicsImageRendererFormat)生成一个render实例，其第一个参数传入矩形的尺寸(width，height)，第二个参数传入源图片的imageRendererFormat属性或者根据上下文新生成的UIGraphicsImageRendererFormat类实例；对render实例调用其image方法，其返回值是缩放后的图片，其参数是一个回调函数，在函数中写:对图片实例调用成员方法draw(in:)方法，参数传入矩形的尺寸。对子图片的颜色数据进行提取，具体可以包括以下内容：

首先，通过调用CGColorSpaceCreateDeviceRGB()函数创建一个CGColorSpaceRef类型的实例，表示图片的RGB颜色空间。

接下来，使用CGContext的初始化函数创建一个位图绘制上下文对象，简称位图上下文。这个函数的参数包括：

data：传入NULL，表示让上下文对象自己生成数据，这个数据是一块连续内存，也可以看作是一个字节数据，称为rgbaData。

width和height：分别传入矩形的宽度和高度。

bitsPerComponent：传入8，表示rgbaData中每个数组单元的长度，字节长度为8。

bytesPerRow：传入矩形的宽度×4，表示图片每一行的字节。

space：传入上述创建的颜色空间。

bitmapInfo：传入数据RGBA的组成方式，可以选择kCGImageAlphaPremultipliedFirst或者kCGImageAlphaPremultipliedLast，分别表示图片的alpha通道放在RGB的前面或后面。

然后，将图片的指定矩形区域绘制在位图上下文对象中。通过调用draw(in，_:)方法，第一个参数传入图片，第二个参数传入图片的绘制位置，需要的类型是CGRect对象。为此，创建一个CGRect对象，其x和y值为矩形的x和y值的负数（因为此时的绘制原点在位图上下文对象的左上角，偏移量为负数），width和height为矩形的宽度和高度。

最后，得到位图上下文中的图片区域的所有RGBA的数据，即上面提到的rgbaData。可以通过访问位图上下文对象的data属性来获取，这是一个包含所有RGBA数据的数组，长度为4（因为通道是RGBA，所以是4）×矩形宽度×矩形高度。

在一些实施例中，依据颜色数据确定每个矩形区域对应的主色，包括：

创建一个用于统计颜色出现次数的集合，集合的大小与矩形区域所包含的像素数量相等；

以预定步长遍历矩形区域中的像素，每当遍历到一个像素时，从颜色数据中获取像素的颜色，并将像素的颜色存放到数组中；

将数组添加到集合中，对集合中各个颜色出现的次数进行统计，将出现次数最多的颜色作为矩形区域的主色。

具体地，以预定步长（比如步长4）去遍历rgbaData，得到每个颜色数据，统计其颜色出现的次数，进行排序形成一个颜色数组，次数最多的颜色就是主要颜色。由此可见，本申请实施例矩形区域主色的确定方式及原理为：首先遍历这个区域中的每一个像素，由于每个像素由RGBA 四个部分组成，所以每四步，就可以得到一个像素的颜色。然后统计每种颜色出现的次数，并把这些颜色按出现次数从多到少排列，形成一个颜色数组。数组中的第一个颜色就是出现次数最多的颜色，也就是主要颜色。

下面结合具体实施例对矩形区域主色的确定方法进行详细说明，矩形区域主色的确定可以包括以下两种方式：

第一种方式：使用RGBA的数值进行统计分析，获取矩形区域中的主要颜色。

(1) 创建一个NSCountedSet实例对象，初始化函数中传入集合的大小，为矩形的宽度和高度。这种集合可以统计添加的元素的次数，即使元素是重复的。

(2) 在每次循环中，需要调用rgbaData的load(fromByteOffset:as:)方法四次，以获取一个颜色的RGBA值。第二个参数传入UInt8。self，意味着取出的值将以无符号整型存储。由于RGB值在内存中的存储范围是0-255，alpha通道的值范围是0-1，所以选择了无符号整型。

该方法的第一个参数传入偏移量，即当前遍历的累计步长加偏移量，偏移量是0或1或2或3。根据传入的第七个参数传入数据RGBA的组成方式，是kCGImageAlphaPremultipliedFirst还是kCGImageAlphaPremultipliedLast，这里的取值方式有所不同，例如具体取值方式如下：

kCGImageAlphaPremultipliedFirst，alpha通道在最前面，则:

颜色的alpha值的偏移量=当前遍历的累计步长

颜色的R值的偏移量=当前遍历的累计步长加1

颜色的G值的偏移量=当前遍历的累计步长加2

颜色的B值的偏移量=当前遍历的累计步长加3

kCGImageAlphaPremultipliedLast，alpha通道在最后面，则:

颜色的R值的偏移量=当前遍历的累计步长

颜色的G值的偏移量=当前遍历的累计步长加1

颜色的B值的偏移量=当前遍历的累计步长加2

颜色的alpha值的偏移量=当前遍历的累计步长加3

把这4个值放进一个新生成的数组中，调用(1)中的NSCountedSet实例对象的add(_:)方法，把数组加入集合。

(3) 统计NSCountedSet实例对象中出现次数最多的那个（那n个）数组，以确定主要颜色。

创建一个记录变量，用于记录出现次数最多的颜色。

使用NSCountedSet实例对象的objectEnumerator()方法获取一个枚举器，然后循环调用nextObject()方法，直到枚举器中的所有元素都被遍历完。

在每次循环中，调用NSCountedSet实例对象的count(for:)方法，参数为颜色数组，这个方法的返回值就是该颜色数组在集合中的总次数。

比较得到的总次数与记录变量的大小。如果记录变量大，就忽略当前的总次数，进入下一个循环；如果总次数大，就更新记录变量的值为当前的总次数。

完成循环后，记录变量将记录这块区域（子图片）中的主要颜色。

第二种方式：以颜色为单位进行统计分析，获取矩形区域中的主要颜色。

(1) 创建一个集合类对象(如数组)，在其初始化函数中传入集合的大小，为矩形宽度×矩形高度。

(2) 在以步长4去遍历rgbaData中，每次遍历，读取rgbaData在某索引处的值。索引如下：

根据前述步骤中传入的第七个参数传入数据RGBA的组成方式，是kCGImageAlphaPremultipliedFirst还是kCGImageAlphaPremultipliedLast，这里的索引取值方式有所不同，例如具体索引取值方式如下：

kCGImageAlphaPremultipliedFirst，alpha通道在最前面，则:

颜色的alpha值的索引=当前遍历的累计步长

颜色的R值的索引=当前遍历的累计步长加1

颜色的G值的索引=当前遍历的累计步长加2

颜色的B值的索引=当前遍历的累计步长加3

kCGImageAlphaPremultipliedLast，alpha通道在最后面，则：

颜色的R值的索引=当前遍历的累计步长

颜色的G值的索引=当前遍历的累计步长加1

颜色的B值的索引=当前遍历的累计步长加2

颜色的alpha值的索引=当前遍历的累计步长加3

(3) 通过索引读到的值，调用UIColor的类方法+(UIColor)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)bluealpha:(CGFloat)alpha；把4个值传入方法的四个参数中，生成一个颜色类实例。把颜色类实例加入生成的数组中。

(4) 循环完成后，生成的数组就装着字图片所有的颜色。

(5) 生成一个字典，字典的键是自定义的颜色，字典的值是数组。遍历数组，把相同颜色存放在同一个键对应的数组下。

(6) 对字典调用allValues()方法获取到字典全部的值，这个方法返回的是一个数组，里面的每个值就是(5)中的数组，所以这里得到的是颜色数组的数组，称其为b；遍历这个数组b，统计b中的颜色数组的个数，将b按照个数从高到第进行排序。

(7) 生成一个结果数组，把(6)中排序后的数组b中的每个数组取第一个(即颜色)，放进结果数组。

在一些实施例中，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求，包括：

将子控件的颜色以及矩形区域的主色分别转换为RGB颜色，得到各自颜色对应的RGB值，计算子控件的颜色的RGB值与主色的RGB值之间的差值、向量距离和/或三维向量的夹角；

将差值、向量距离和/或三维向量的夹角与各自对应的阈值进行比较，依据比较结果判断子控件的颜色与矩形区域的主色之间为近似色或者非近似色。

具体地，在将子控件的颜色与相应的矩形区域的主色进行比较之前，需要首先将RGBA转换为RGB颜色，方法是分别对R、G、B值乘以Alpha的值，得到新的R、G、B值。在这个过程中，颜色的透明度信息被融合到了颜色的其它三个通道中。本申请实施例提供了三种判断子控件的颜色与矩形区域的主色之间是否接近的方法，下面结合具体实施例对这三种判断方法进行详细介绍，具体可以包括以下内容：

第一种判断方法：对两个颜色（由UIColor类实例表示）的R、G、B值分别相减求差值（取绝对值）。设置一个阈值，该阈值定义了颜色差距的上限。如果任何一个通道的差值超过这个阈值，那么就认为这两个颜色不相近。阈值可以由业务需求指定，也可以根据经验设置。例如，如果三个通道的差值中至少有一个不得小于阈值，那么这两个颜色就被认为是不相近的。

在一个示例中，3个差值中，至少有1个不得小于阈值。阈值为最大颜色范围255的一半，也就是阈值为127.5；注意，在实际使用时，RGBA值也能是0-255的值，也可能是个百分比(就是:把0-255的值除以255)，范围是0-1；则相应的，差值的阈值为0.5。

举例:矩形区域的主要颜色为:R:0.0，G:0.478，B:1.0，当前控件色为: R:1.0，G:0.2，B:0.37 ，R的差值为: 1.0 – 0.0 = 1，G的差值为: 0.2 – 0.478 = 0.278，B的差值为: 0.237–1.0=0.278，差值有1个超过0.5，判定为不相近。

第二种判断方法：对两个颜色实体的R，G，B值求向量距离，即的值的平方根，也即颜色空间的距离。设置阈值，即判断当平方根的计算结果超过多少判定为两个颜色不相近，这个值可以由业务需求指定；也可以根据经验设置，例如:0.75 (意思是/>)。

第三种判断方法：计算两个颜色对应的三维向量的夹角，夹角越小，颜色越接近，例如：，，；设置阈值，即判断当三维向量的夹角计算结果超过多少判定为两个颜色不相近，这个值可以由业务需求指定；也可以根据经验设置。

需要说明的是，即使几个控件的矩形区域不在一处，但是控件的颜色是同一种(意为控件颜色要变化就要一起变化)，所以需将几个矩形的主要颜色和控件颜色都进行比较一次。如果得出的结论相同，则对几个控件的矩形区域做同样的处理，如果得出的结论不相同；例如:矩形区域1：矩形区域的主要颜色和当前控件色接近；矩形区域2：矩形区域的主要颜色和当前控件色不接近；矩形区域3：矩形区域的主要颜色和当前控件色接近。

在一些实施例中，当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，包括：

当差值、向量距离和/或三维向量的夹角小于各自对应的阈值时，判断子控件的颜色与矩形区域的主色之间为近似色，确定与主色相反的颜色范围，从相反的颜色范围中选取一个颜色作为反向颜色，其中，相反的颜色范围表示与主色的RGB值之间的差异达到预设条件的颜色所形成的颜色区间。

具体地，当子控件的颜色与矩形区域的主色接近时，通过计算矩形区域的主色对应的反色，并确保这个反色与原色（即主色）之间有足够的视觉差异。反色是在色彩空间中与给定颜色最远的颜色，因此它们在视觉上有最大的对比和区分度。本申请提供了两种计算反向颜色的方法，下面结合具体实施例对这两种方法分别进行说明，具体可以包括以下内容：

在第一种方法中，对原色的RGB值进行"反转"操作，即用最大值（对于范围为0-255的整数，最大值为255；对于范围为0-1的百分比，最大值为1）减去原色的RGB值。然后，使用前面提到的方法来判断反色是否与原色接近。如果接近，那么就在反色的RGB值上加上一个在0-0.5（或0-127.5）范围内的随机数，然后重复这个过程，直到找到一个不接近原色的反色为止。

在第二种方法中，对原色的RGB值中的任意两个进行增/减操作。如果原色的值大于0.5，就减去0.5；如果原色的值小于0.5，就加上0.5。这个操作的目的是使得反色的RGB值与原色的RGB值相差足够大。然后，使用同样的方法来判断反色是否与原色接近。如果接近，那么就在增/减操作中使用的0.5上加上一个在0-0.5范围内的随机数，然后重复这个过程，直到找到一个不接近原色的反色为止。

上述这两种方法都是为了确保反色与原色有足够的视觉差异。这在许多应用中是很有用的，例如在设计UI时，如果想要一个元素在某种背景色上显得醒目，就可以使用与背景色反色的颜色。

在一些实施例中，依据颜色数据确定每个矩形区域对应的主色，包括：将每个矩形区域对应的颜色数据转换为HSL数据，依据HSL数据确定每个矩形区域中的每种颜色对应的饱和度和亮度，对每个矩形区域中的每种颜色出现的次数进行统计，将每种颜色对应的饱和度、亮度以及出现次数相加，得到每种颜色对应的评分，将评分最高的颜色作为矩形区域的主色。

具体地，本申请实施例还提供了另外一种获取视觉主色的方法，这种视觉主色的选取方法是基于取色器来实现的，即本申请前述实施例中提取矩形区域的主色所采用的技术手段，也可以是基于iOS的取色器来实现的方法。目前，android和windows已在系统层实现了对整张图片的取色功能，但是iOS系统暂时没有提供这样的功能。例如:用户在浏览一组图片，每个图片都不一样，图片以外的视图控件(甚至是整个app)要求以每个图片的主色调进行配色:在红色为主的图片被浏览时，相框的颜色要求为红色；在蓝色为主的图片被浏览时，相框的颜色要求为蓝色；那么，为了满足上述需求，在得到图片主色之后，用主色去更换控件颜色或app主题等。

一张图片的主色不能仅针对出现最多的颜色进行确认，还要取到符合人眼习惯的，一眼就能识别出来的颜色，例如，一张图片中出现最多的颜色是灰色，但是视觉主色却是蓝色。色彩饱和度越高，亮度越高，视觉效果越鲜艳，人眼就能关注到。因此在一张图中寻找主色，首先看色彩饱和度和亮度，其次参考颜色出现的次数，越多越好。

本申请实施例通过计算饱和度Saturation、亮度Lightnesss 以及出现次数的和，如果某个颜色在上述三个值的和上胜出，则这就是视觉主色。其次，这种方案可以解决RGBA方案无法解决的另一个问题:就是一张图片上颜色分布较为均匀，各个颜色次数都差不多，所以得到的主色不太准确。所以，要根据业务需求决定到底是根据RGBA取次数最多的为主色，还是根据HSL取饱和度+亮度+次数最多的为主色。

在一个具体示例中，确定视觉主色的过程可以分为以下几个步骤：

(1) 首先，需要从图像中提取位图数据，并将这些数据转换为HSL（色调、饱和度、亮度）格式。虽然iOS系统的UIColor类提供了多种提取颜色数据的方法，但是它并不直接支持提取HSL数据。因此，需要首先提取RGBA数据，然后将这些数据转换为HSL格式。具体的转换步骤包括创建一个RGB颜色空间，创建一个位图上下文，并将图像的指定矩形区域绘制在这个上下文中。然后，我们可以从这个位图上下文中提取所有的RGBA数据，并将这些数据转换为HSL格式。下面对RGBA数据的提取方法进行说明，具体可以包括以下内容：

调用CGColorSpaceCreateDeviceRGB()函数创建一个CGColorSpaceRef类型的实例，它代表:图片的RGB颜色空间。

创建位图上下文：调用CGContext的初始化函数init！(data:UnsafeMutableRawPointer!， width: Int， height: Int， bitsPerComponent: Int，bytesPerRow: Int， space: CGColorSpace， bitmapInfo: UInt32， releaseCallback:CGBitmapContextReleaseDataCallback!， releaseInfo: UnsafeMutableRawPointer!)生成一个位图绘制上下文对象(后面简称位图上下文)，第一个参数传入NULL，意思是让上下文对象自己生成数据，这个数据是一块连续内存，可视作一个字节数据，我称数据为rgbaData；第二个参数传入图片的宽度；第三个参数传入图片的高度；第四个参数传入8，它的意思是指定rgbaData中每个数组单元的长度，字节长度为8所以传入8；第五个参数传入图片的宽度×4，它意思是图片每一行的字节；第六个参数传入(1)中生成的颜色空间；第七个参数传入数据RGBA的组成方式，可以选择kCGImageAlphaPremultipliedFirst或者kCGImageAlphaPremultipliedLast，kCGImageAlphaPremultipliedFirst意思是:图片的alpha通道放在RGB的前面，kCGImageAlphaPremultipliedLast意思是:图片的alpha通道放在RGB的后面。还可以附加kCGBitmapByteOrder32Big。

将图片的指定矩形区域绘制在位图上下文对象中：对位图上下文对象调用draw(，_:)方法，第一个参数传入图片；第二个参数传入图片的绘制位置，它需要的类型是CGRect对象，所以生成一个CGRect对象，调用构造函数CGRectMake(CGFloat x， CGFloaty， CGFloat width， CGFloat height)；

x传入0；y传入0，width传入图片的宽，height传入图片的高；图片的宽用CG_EXTERN size_tCGImageGetWidth(CGImageRef cg_nullable image)函数得到，其参数传入图片；图片的高用CG_EXTERN size_tCGImageGetHeight(CGImageRef cg_nullable image)得到，其参数传入图片。

得到位图上下文中的图片区域的所有RGBA的数据，即前面步骤(2)中提到的rgbaData，访问位图上下文对象的data属性，这就是所有RGBA的数据，它是一个数组，长度是4(因为通道是RGBA，所以是4) ×图片宽度×图片高度。

然后以步长为4遍历这个数组，把每个RGBA数据转成HSL模式的数据，得到这个颜色的S值(饱和度Saturation)，L值(亮度Lightness)。

(2) 在转换为HSL格式的过程中，还需要统计每种颜色出现的次数，以及每种颜色的饱和度和亮度的和。这可以通过遍历RGBA数据数组并转换为HSL数据来实现。在这个过程中，可以使用一个合适的数据结构来存储每种颜色出现的次数，以及每种颜色的饱和度和亮度的和。

(3) 最后，需要对存储的数据进行排序，找出饱和度和亮度和以及颜色出现次数三者之和最大的颜色。这种颜色就是图像的视觉主色。这个过程可能需要使用一种适当的排序算法，例如快速排序或归并排序。

根据本申请实施例提供的技术方案，本申请实施例通过对图片进行处理并确定子控件在主控件坐标系下的矩形区域，该技术可以针对不同的背景图调整控件的视觉效果元素，从而使得控件在任何背景图上都能清晰可见，增强了用户界面的可视性和互动性。通过提取图片中各个矩形区域对应的颜色数据，并确定每个矩形区域的主色，该技术可以自动调整控件的颜色以适应背景图的颜色，从而解决了因背景图颜色对比度低而使得控件难以辨认的问题。通过对颜色差异进行判断和对主色的反向颜色进行确定，该技术可以自动完成控件颜色的调整工作，从而减轻了运营人员的工作负担。通过将反向颜色的颜色数据赋值给相应的子控件，该技术可以提供一个更为美观和协调的用户界面，从而提升了用户体验。本申请的控件视觉效果元素调节方法能够自动调整控件的颜色以适应任何背景图，提高控件内视觉效果元素的显示效果。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

图2是本申请实施例提供的控件视觉效果元素调节装置的结构示意图。如图2所示，该控件视觉效果元素调节装置包括：

处理模块201，被配置为获取服务器发送的图片，基于承载图片的主控件的尺寸对图片进行处理，以使主控件与图片之间的尺寸相同；

分类模块202，被配置为确定各个子控件在主控件坐标系下对应的矩形区域，并依据子控件的颜色对矩形区域进行分类，得到与子控件的颜色相对应的一个或多个矩形区域；

提取模块203，被配置为对图片中每个矩形区域对应的颜色进行提取，得到每个矩形区域对应的颜色数据；

比较模块204，被配置为依据颜色数据确定每个矩形区域对应的主色，将子控件的颜色与相应的矩形区域的主色进行比较，得到颜色差异，判断颜色差异是否满足预设要求；

调节模块205，被配置为当颜色差异满足预设要求时，基于主色的RGB值确定与主色相对应的反向颜色，将反向颜色的颜色数据赋值给相应的子控件的矩形区域，以调节子控件的视觉效果元素。

在一些实施例中，图2的处理模块201获取主控件及图片的宽度，将主控件的宽度与图片的宽度进行比较，以便确定宽度比；获取主控件及图片的高度，将主控件的高度与图片的高度进行比较，以便确定高度比；基于宽度比以及高度比确定目标比，依据目标比对图片进行缩放和裁剪。

在一些实施例中，图2的分类模块202获取子控件在主控件坐标系下的位置坐标，依据子控件的位置坐标确定与子控件相对应的矩形区域；依据子控件对应的颜色对矩形区域进行划分，将相同颜色的子控件对应的矩形区域划分到同一颜色类别下；将颜色类别与矩形区域之间的对应关系用键值对表示，利用键值对生成包含对应关系的数据结构。

在一些实施例中，图2的提取模块203依据矩形区域在主控件坐标系下的位置以及矩形区域的尺寸，将图片切割成多个子图片；创建颜色空间对象以及位图上下文对象，其中，颜色空间对象用于表征图片在设备中对应的RGB颜色空间；将子图片对应的矩形区域绘制在位图上下文对象中，并获取位图上下文对象中每个子图片对应矩形区域的颜色数据，其中，颜色数据中包含RGBA数值。

在一些实施例中，图2的比较模块204创建一个用于统计颜色出现次数的集合，集合的大小与矩形区域所包含的像素数量相等；以预定步长遍历矩形区域中的像素，每当遍历到一个像素时，从颜色数据中获取像素的颜色，并将像素的颜色存放到数组中；将数组添加到集合中，对集合中各个颜色出现的次数进行统计，将出现次数最多的颜色作为矩形区域的主色。

在一些实施例中，图2的比较模块204将每个矩形区域对应的颜色数据转换为HSL数据，依据HSL数据确定每个矩形区域中的每种颜色对应的饱和度和亮度，对每个矩形区域中的每种颜色出现的次数进行统计，将每种颜色对应的饱和度、亮度以及出现次数相加，得到每种颜色对应的评分，将评分最高的颜色作为矩形区域的主色。

在一些实施例中，图2的比较模块204将子控件的颜色以及矩形区域的主色分别转换为RGB颜色，得到各自颜色对应的RGB值，计算子控件的颜色的RGB值与主色的RGB值之间的差值、向量距离和/或三维向量的夹角；将差值、向量距离和/或三维向量的夹角与各自对应的阈值进行比较，依据比较结果判断子控件的颜色与矩形区域的主色之间为近似色或者非近似色。

在一些实施例中，图2的调节模块205当差值、向量距离和/或三维向量的夹角小于各自对应的阈值时，判断子控件的颜色与矩形区域的主色之间为近似色，确定与主色相反的颜色范围，从相反的颜色范围中选取一个颜色作为反向颜色，其中，相反的颜色范围表示与主色的RGB值之间的差异达到预设条件的颜色所形成的颜色区间。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

图3是本申请实施例提供的电子设备3的结构示意图。如图3所示，该实施例的电子设备3包括：处理器301、存储器302以及存储在该存储器302中并且可以在处理器301上运行的计算机程序303。处理器301执行计算机程序303时实现上述各个方法实施例中的步骤。或者，处理器301执行计算机程序303时实现上述各装置实施例中各模块/单元的功能。

示例性地，计算机程序303可以被分割成一个或多个模块/单元，一个或多个模块/单元被存储在存储器302中，并由处理器301执行，以完成本申请。一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序303在电子设备3中的执行过程。

电子设备3可以是桌上型计算机、笔记本、掌上电脑及云端服务器等电子设备。电子设备3可以包括但不仅限于处理器301和存储器302。本领域技术人员可以理解，图3仅仅是电子设备3的示例，并不构成对电子设备3的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如，电子设备还可以包括输入输出设备、网络接入设备、总线等。

处理器301可以是中央处理单元（Central Processing Unit，CPU），也可以是其它通用处理器、数字信号处理器（Digital Signal Processor，DSP）、专用集成电路（Application SpecificIntegrated Circuit，ASIC）、现场可编程门阵列（Field-Programmable Gate Array，FPGA）或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器302可以是电子设备3的内部存储单元，例如，电子设备3的硬盘或内存。存储器302也可以是电子设备3的外部存储设备，例如，电子设备3上配备的插接式硬盘，智能存储卡（Smart Media Card，SMC），安全数字（Secure Digital，SD）卡，闪存卡（Flash Card）等。进一步地，存储器302还可以既包括电子设备3的内部存储单元也包括外部存储设备。存储器302用于存储计算机程序以及电子设备所需的其它程序和数据。存储器302还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

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

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

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，计算机程序可以存储在计算机可读存储介质中，该计算机程序在被处理器执行时，可以实现上述各个方法实施例的步骤。计算机程序可以包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器（Read-Only Memory，ROM）、随机存取存储器（Random Access Memory，RAM）、电载波信号、电信信号以及软件分发介质等。需要说明的是，计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如，在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (11)

1.一种控件视觉效果元素调节方法，其特征在于，包括：

获取服务器发送的图片，基于承载所述图片的主控件的尺寸对所述图片进行处理，以使所述主控件与所述图片之间的尺寸相同；

确定各个子控件在主控件坐标系下对应的矩形区域，并依据所述子控件的颜色对所述矩形区域进行分类，得到与所述子控件的颜色相对应的一个或多个矩形区域；

对所述图片中每个所述矩形区域对应的颜色进行提取，得到每个所述矩形区域对应的颜色数据；

依据所述颜色数据确定每个所述矩形区域对应的主色，将所述子控件的颜色与相应的所述矩形区域的主色进行比较，得到颜色差异，依据所述颜色差异判断所述子控件的颜色与所述矩形区域的主色之间是否属于近似色；

当属于近似色时，基于所述主色的RGB值确定与所述主色相对应的反向颜色，将所述反向颜色的颜色数据赋值给相应的所述子控件的矩形区域，以调节所述子控件的视觉效果元素。

2.根据权利要求1所述的方法，其特征在于，所述基于承载所述图片的主控件的尺寸对所述图片进行处理，包括：

获取所述主控件及所述图片的宽度，将所述主控件的宽度与所述图片的宽度进行比较，以便确定宽度比；

获取所述主控件及所述图片的高度，将所述主控件的高度与所述图片的高度进行比较，以便确定高度比；

基于所述宽度比以及所述高度比确定目标比，依据所述目标比对所述图片进行缩放和裁剪。

3.根据权利要求1所述的方法，其特征在于，所述确定各个子控件在主控件坐标系下对应的矩形区域，并依据所述子控件的颜色对所述矩形区域进行分类，包括：

获取所述子控件在所述主控件坐标系下的位置坐标，依据所述子控件的位置坐标确定与所述子控件相对应的矩形区域；

依据所述子控件对应的颜色对所述矩形区域进行划分，将相同颜色的所述子控件对应的矩形区域划分到同一颜色类别下；

将所述颜色类别与所述矩形区域之间的对应关系用键值对表示，利用所述键值对生成包含所述对应关系的数据结构。

4.根据权利要求1所述的方法，其特征在于，所述对所述图片中每个所述矩形区域对应的颜色进行提取，得到每个所述矩形区域对应的颜色数据，包括：

依据所述矩形区域在所述主控件坐标系下的位置以及所述矩形区域的尺寸，将所述图片切割成多个子图片；

创建颜色空间对象以及位图上下文对象，其中，所述颜色空间对象用于表征所述图片在设备中对应的RGB颜色空间；

将所述子图片对应的矩形区域绘制在所述位图上下文对象中，并获取所述位图上下文对象中每个所述子图片对应矩形区域的颜色数据，其中，所述颜色数据中包含RGBA数值。

5.根据权利要求1所述的方法，其特征在于，所述依据所述颜色数据确定每个所述矩形区域对应的主色，包括：

创建一个用于统计颜色出现次数的集合，所述集合的大小与所述矩形区域所包含的像素数量相等；

以预定步长遍历所述矩形区域中的像素，每当遍历到一个像素时，从所述颜色数据中获取所述像素的颜色，并将所述像素的颜色存放到数组中；

将所述数组添加到所述集合中，对所述集合中各个颜色出现的次数进行统计，将出现次数最多的颜色作为所述矩形区域的主色。

6.根据权利要求1所述的方法，其特征在于，所述依据所述颜色数据确定每个所述矩形区域对应的主色，包括：

将每个所述矩形区域对应的颜色数据转换为HSL数据，依据所述HSL数据确定每个所述矩形区域中的每种颜色对应的饱和度和亮度，对每个所述矩形区域中的每种颜色出现的次数进行统计，将每种颜色对应的饱和度、亮度以及出现次数相加，得到每种颜色对应的评分，将所述评分最高的颜色作为所述矩形区域的主色。

7.根据权利要求1所述的方法，其特征在于，所述将所述子控件的颜色与相应的所述矩形区域的主色进行比较，得到颜色差异，依据所述颜色差异判断所述子控件的颜色与所述矩形区域的主色之间是否属于近似色，包括：

将所述子控件的颜色以及所述矩形区域的主色分别转换为RGB颜色，得到各自颜色对应的RGB值，计算所述子控件的颜色的RGB值与所述主色的RGB值之间的差值、向量距离和/或三维向量的夹角；

将所述差值、向量距离和/或三维向量的夹角与各自对应的阈值进行比较，依据比较结果判断所述子控件的颜色与所述矩形区域的主色之间是否属于近似色。

8.根据权利要求7所述的方法，其特征在于，所述当属于近似色时，基于所述主色的RGB值确定与所述主色相对应的反向颜色，包括：

当所述差值、向量距离和/或三维向量的夹角小于各自对应的阈值时，判断所述子控件的颜色与所述矩形区域的主色之间为近似色，确定与所述主色相反的颜色范围，从所述相反的颜色范围中选取一个颜色作为所述反向颜色，其中，所述相反的颜色范围表示与所述主色的RGB值之间的差异达到预设条件的颜色所形成的颜色区间。

9.一种控件视觉效果元素调节装置，其特征在于，包括：

处理模块，被配置为获取服务器发送的图片，基于承载所述图片的主控件的尺寸对所述图片进行处理，以使所述主控件与所述图片之间的尺寸相同；

分类模块，被配置为确定各个子控件在主控件坐标系下对应的矩形区域，并依据所述子控件的颜色对所述矩形区域进行分类，得到与所述子控件的颜色相对应的一个或多个矩形区域；

提取模块，被配置为对所述图片中每个所述矩形区域对应的颜色进行提取，得到每个所述矩形区域对应的颜色数据；

比较模块，被配置为依据所述颜色数据确定每个所述矩形区域对应的主色，将所述子控件的颜色与相应的所述矩形区域的主色进行比较，得到颜色差异，依据所述颜色差异判断所述子控件的颜色与所述矩形区域的主色之间是否属于近似色；

调节模块，被配置为当属于近似色时，基于所述主色的RGB值确定与所述主色相对应的反向颜色，将所述反向颜色的颜色数据赋值给相应的所述子控件的矩形区域，以调节所述子控件的视觉效果元素。

10.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至8中任一项所述的方法。

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