一种渐变色生成方法和装置制造方法及图纸

技术编号:15692047 阅读:45 留言:0更新日期:2017-06-24 05:45
本申请提供一种渐变色生成方法和装置。所述方法包括:根据用户的操作确定用户选择的基础颜色;根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。本申请基于贝塞尔曲线或其他类似曲线的渐变色的产生过程,可以允许用户(比如设计师)将渐变色的选择范围扩大,相对于线性插值得到的渐变色,设计师更加容易得到表达更为丰富渐变色,为UI设计能力的提升提供了更为坚实的技术基础。

Method and device for generating gradient color

The present application provides a gradient color generating method and apparatus. The method comprises: according to the operation of the user to determine the basis of color selected by the user; according to predetermined rules the basic color color generating candidate set based on the candidate set generation and surface color color display to the user based on the algorithm according to the curve; curve parameters are specified and some selected variables using predetermined from the surface color selection a collection of the corresponding color is provided to the user as a color gradient. The application of gradient Bessel curve or other similar curves based on, can allow users (such as designers) will select the range of the gradient expansion relative to the gradient by linear interpolation, the designer more easily expressed more abundant color gradient, UI design capability provides a more solid technical foundation.

【技术实现步骤摘要】
一种渐变色生成方法和装置
本申请涉及用户图形界面领域,尤其涉及一种渐变色生成方法和装置。
技术介绍
图形用户界面(GraPhicalUserInterface,简称GUI)在计算机软件领域通常又会被从业者简称为用户界面(UserInterface,UI),以下若无特殊说明,本申请所说的UI是指GUI。UI是技术与工业设计融合的产物,比如说设计新颖独特的UI可以申请GUI外观专利加以保护。然而设计师在进行UI设计时,其也需要技术上的支持和辅助,比如特定形状的绘制工具,又或者特定颜色的选取工具。在UI设计过程中,设计师经常会使用到渐变色,比如将某一按钮的颜色设置为渐变色,这关系到整个界面的美观,也关系到用户使用体验。比如:渐变色可以帮助用户清晰地了解按钮的状态,还可以清晰直观地帮助用户了解数据大小和分布,诸如居民出行的热力分布图等。然而,目前在渐变色的选取上,设计师受限于工具能力的限制,很多时候难以取得自己心目中理想的渐变色,这大大制约了设计师在UI设计过程中的利用颜色渐变进行表达的能力。
技术实现思路
有鉴于此,本申请提供一种渐变色生成方法和装置。具体地,本申请是通过如下技术方案实现的:一种渐变色生成方法,包括:根据用户的操作确定用户选择的基础颜色;根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。可选的,其中所述用户的操作是针对预设的基色带的选择操作,所述基色带是通过HSL模型建立的,该基色带的各个颜色点均具有相同的色相H,不同颜色点之间的饱和度S以及亮度L的组合不同。可选的,所述预定规则包括:保持基础颜色的色相H、饱和度S以及亮度L中任意一个参数不变,变化其他两个参数以生成若干候选颜色,所述候选颜色集合包括基础颜色和候选颜色。可选的,所述曲线算法为贝塞尔曲线算法。可选的,所述曲线参数是若干控制点坐标,该方法还包括:根据用户通过鼠标或者预设文本框输入的控制点坐标,在所述变色面上生成对应的贝塞尔曲线展示给用户。可选的,所述若干选点变量是基于用户指定的选点变量计算参数以及选点变量产生算法生成的。一种渐变色生成装置,包括:基础确定单元,根据用户的操作确定用户选择的基础颜色;变色展示单元,根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;渐变色选择单元,根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。可选的,其中所述用户的操作是针对预设的基色带的选择操作,所述基色带是通过HSL模型建立的,该基色带的各个颜色点均具有相同的色相H,不同颜色点之间的饱和度S以及亮度L的组合不同。可选的,所述预定规则包括:保持基础颜色的色相H、饱和度S以及亮度L中任意一个参数不变,变化其他两个参数以生成若干候选颜色,所述候选颜色集合包括基础颜色和候选颜色。可选的,所述曲线算法为贝塞尔曲线算法。可选的,所述曲线参数是若干控制点坐标,该装置还包括:曲线生成单元,根据用户通过鼠标或者预设文本框输入的控制点坐标,在所述变色面上生成对应的贝塞尔曲线展示给用户。可选的,所述若干选点变量是基于用户指定的选点变量计算参数以及选点变量产生算法生成的。由以上描述可以看出,本申请基于贝塞尔曲线或其他类似曲线的渐变色的产生过程,可以允许用户(比如设计师)将渐变色的选择范围扩大,相对于线性插值得到的渐变色,设计师更加容易得到表达更为丰富渐变色,为UI设计能力的提升提供了更为坚实的技术基础。附图说明图1是一种HSL模型描绘的色彩空间的示意图。图2是相关技术中一种典型的线性渐变色的填充效果示意图。图3是本申请一示例性实施例示出的一种渐变色生成方法的流程示意图。图4是本申请一示例性实施例示出的一种用户界面示意图。图5是本申请一示例性实施例示出的一种贝塞尔曲线算法示意图。图6A是本申请一示例性实施例示出的一种曲线变化示意图。图6B是本申请一示例性实施例示出的一种曲线变化示意图。图7是本申请一示例性实施例示出的一种用于渐变色生成装置的一结构示意图。图8是本申请一示例性实施例示出的一种渐变色生成装置的结构框图。具体实施方式这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。在本申请使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。应当理解,尽管在本申请可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本申请范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。在具体介绍本申请各种具体实现之前,首先介绍一下本申请涉及到的基础概念及本申请使用到的一些自定义。在计算机软件开发领域,获取单个或者多个颜色可以理解为从一个色彩空间(也称为“颜色空间”)中获得一组或者多组数值(比如坐标值),一组数值就代表着一个颜色。从某种形象的角度来看,一个颜色可以理解为色彩空间中的一个特定的坐标,选择一个颜色通常也被理解为选择一个颜色点。色彩空间事实上是把一个色彩模型所有能表示的颜色都放在一起组成的一个集合。常用的色彩模型包括RGB模型以及HSL模型。对于RGB模型来说,RGB分别代表红色、绿色、蓝色三个分量,每个分量的取值范围是0到1。标准的红色在RGB模型中表示为:RGB(1,0,0),也就是说绿色和蓝色的分量为0。HSL模型是目前计算机软件开发领域最流行的模型,其使用色相H(0--360)、饱和度S(0%--100%)以及亮度L(0%--100%)来表示一个颜色。标准红色在HSL模型中表示为HSL(0,100%,50%)。请参考图1,图1是HSL模型描绘的色彩空间的示例。以下描述中将以HSL模型为例进行说明,RGB模型或其他模型与HSL模型原理类似不再一一赘述。在相关技术中,产生渐变色或者说选择渐变色的实现方式是取得两个颜色点,然后由特定工具在两个颜色点之间通过线性插值的方式来实现颜色渐变。渐变色事实上是一个颜色集合,在渐变色的应用上,可以利用渐变色对一个图形进行填充得到渐变显示效果。与单色填充一样,渐变色填充只不过是把使用对象从单色变为渐变色(若干单色的集合),填充的时候可以选择各种填充方式,比如线性填充,矩形填充,射线填充等等。无论是那种填充一般都是定义填充的起点和重点以及填充方向。值得注意的是,这种填充方式本质上是对渐变色的利用,而不是本申请后续讨论的如何取得一个不单调本文档来自技高网...
一种渐变色生成方法和装置

【技术保护点】
一种渐变色生成方法,其特征在于,包括:根据用户的操作确定用户选择的基础颜色;根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。

【技术特征摘要】
1.一种渐变色生成方法,其特征在于,包括:根据用户的操作确定用户选择的基础颜色;根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。2.根据权利要求1所述的方法,其特征在于,其中所述用户的操作是针对预设的基色带的选择操作,所述基色带是通过HSL模型建立的,该基色带的各个颜色点均具有相同的色相H,不同颜色点之间的饱和度S以及亮度L的组合不同。3.根据权利要求1所述的方法,其特征在于,所述预定规则包括:保持基础颜色的色相H、饱和度S以及亮度L中任意一个参数不变,变化其他两个参数以生成若干候选颜色,所述候选颜色集合包括基础颜色和候选颜色。4.根据权利要求1所述的方法,其特征在于,所述曲线算法为贝塞尔曲线算法。5.根据权利要求4所述的方法,其特征在于,所述曲线参数是若干控制点坐标,该方法还包括:根据用户通过鼠标或者预设文本框输入的控制点坐标,在所述变色面上生成对应的贝塞尔曲线展示给用户。6.根据权利要求5所述的方法,其特征在于,所述若干选点变量是基于用户指定的选点变量计算参数以及选点变量产生算法生成的。7.一种渐变色生成装置,其特征在于...

【专利技术属性】
技术研发人员:韩凯黄通
申请(专利权)人:阿里巴巴集团控股有限公司
类型:发明
国别省市:开曼群岛,KY

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1