CN106875454A - 一种渐变色生成方法和装置 - Google Patents

一种渐变色生成方法和装置 Download PDF

Info

Publication number
CN106875454A
CN106875454A CN201610578927.2A CN201610578927A CN106875454A CN 106875454 A CN106875454 A CN 106875454A CN 201610578927 A CN201610578927 A CN 201610578927A CN 106875454 A CN106875454 A CN 106875454A
Authority
CN
China
Prior art keywords
color
user
gradient
candidate
parameter
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610578927.2A
Other languages
English (en)
Inventor
韩凯
黄通
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201610578927.2A priority Critical patent/CN106875454A/zh
Publication of CN106875454A publication Critical patent/CN106875454A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/001Texturing; Colouring; Generation of texture or colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • G06T11/203Drawing of straight lines or curves
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/40Filling a planar surface by adding surface attributes, e.g. colour or texture

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

一种渐变色生成方法和装置
技术领域
本申请涉及用户图形界面领域,尤其涉及一种渐变色生成方法和装置。
背景技术
图形用户界面(GraPhical User Interface,简称GUI)在计算机软件领域通常又会被从业者简称为用户界面(User Interface,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模型原理类似不再一一赘述。
在相关技术中,产生渐变色或者说选择渐变色的实现方式是取得两个颜色点,然后由特定工具在两个颜色点之间通过线性插值的方式来实现颜色渐变。渐变色事实上是一个颜色集合,在渐变色的应用上,可以利用渐变色对一个图形进行填充得到渐变显示效果。与单色填充一样,渐变色填充只不过是把使用对象从单色变为渐变色(若干单色的集合),填充的时候可以选择各种填充方式,比如线性填充,矩形填充,射线填充等等。无论是那种填充一般都是定义填充的起点和重点以及填充方向。值得注意的是,这种填充方式本质上是对渐变色的利用,而不是本申请后续讨论的如何取得一个不单调的渐变色。
请参考图2所示,其一种典型的线性渐变色的填充效果示例,PowerPoint软件中的一个色彩基调下的8种渐变色填充方式,包括上下左右以及四个对角线方向的8种渐变填充,将鼠标移到任何一个渐变填充方式上,都会对渐变方式进行提示,比如“线性向下”或“线性对角”等等。
在线性插值技术生成渐变色的过程中,插值数量越多,渐变色所包含的颜色点就越多,反之则越少。但无论是颜色点多少,选出来得渐变色都非常得单调,并且不能很好地满足设计师对本意的表达需求。换一个角度来说,由于渐变色事实上是一个颜色点集合,但设计师只能使用两个颜色点连线上的若干颜色点中的任意一个,而无法获得连线以外的其他想要的颜色点,这显然制约了渐变色的丰富程度和表现能力。
请参考图3,在一个例子中,本申请提供一种渐变色生成方法。该方法可以包括以下步骤:
步骤301,根据用户的操作确定用户选择的基础颜色。
请参考图4的界面所示,在一个例子中,本申请渐变色生成方法首先可以在界面上向用户提供一个预设的基色带401(需要说明的是,由于附图不是彩色的,所以无法直观看出来基础颜色)供用户从该基色带401中选择到一个基础颜色。在这个例子中,基色带401是一个可以进行选择交互的界面,界面上包括若干的基础颜色点,可以理解为基础颜色的集合。
在一个例子中,基色带401可以包括HSL模型中所有的基础颜色的变化。所谓基础颜色在本申请中的定义是指:在饱和度S以及亮度L均为特定数值(比如S=100%;L=50%)的情况下的颜色。这也就是说,基础颜色集合事实上是色相H在(0--360)这个变化区间,而另外两个参数S和L不变所产生的颜色集合。基色带401由于与色相变化有关,因此有时候也被称为色相条。在其他例子中,也可以仅仅包括部分色相变化。用户可以通过鼠标或者其他方式在该界面上选定某个颜色点,该颜色点代表用户选择的基础颜色。
基色带401可以帮助用户更方便地选定其想要的基础颜色,但是在其他例子中,基色带401也不是必须的。比如说,用户可以输入一个数值来指代一个基础色,由于主要是色相在变化,因此只需要输入一个0--360之间的一个数字即可。当然在很多时候,可以将(0--360)这个变化区间进行归一化处理,也就是说输入一个(0--1)之间的一个数字即可,这样也可以唯一确定一个基础颜色。本领域普通技术人员还可以设计其他的方式来帮助用户选择基础颜色,本申请对此并无限制。
在以上的例子中,假设饱和度S以及亮度L不变,基于色相值H进行变化产生基色带401。在其他的例子中也可以是饱和度S或者亮度L变化,其他两个参数不变来产生基色带401。在更为简单的例子中,也可以直接输入HSL三个维度的参数来确定一个基础颜色。
步骤302,根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户。
在基础颜色选好之后,可以基于该基础颜色使用预定规则来确定出一个候选颜色集合,后续可以从这个候选颜色集合中确定出用户想要的渐变色。请参考图4,这个候选颜色集合可以在界面上展示为一个变色面402,其中每个颜色点均来自所述候选颜色集合。在一个例子中,候选颜色集合可以包括基础颜色以及基础颜色在HSL模型中S维度上以及L维度进行变化产生各种颜色(也成候选颜色)。如前所述,饱和度S的变化区间是(0%--100%),而亮度L的变化区间是(0%--100%),在本例子中,可以将饱和度S以及亮度L的变化进行穷尽以确定出所有可能变化的候选颜色。理论上来说,可以变化出的候选颜色是无穷多的,但事实上计算机是存在计算粒度的,因此可以变化出的候选颜色依然是有限的,只是数量依然相当庞大。这些变化出来的候选颜色与基础颜色的差异在于饱和度S和/或亮度S的不同,所有候选颜色的色相值都是相同的。在其他的例子中,饱和度S或者亮度L的变化区间未必是(0%--100%),也可以是其他预定的范围,比如(10%到80%)等等。值得注意的是,在其他例子中,确定基础颜色之后,也可以保持饱和度S或者亮度L不变,在其他两个维度进行变化。
步骤303,根据指定的曲线参数以及若干选点变量使用预定的曲线算法从变色面上选择出多个对应颜色的集合作为渐变色提供给用户。
在图4中,变色面402的基础颜色是“玫红色”,因此整个变色面402是玫红色在亮度L以及饱和度S上各种变化的颜色集合。与线性插值不同的是,本申请使用曲线算法来帮助用户选择出一个颜色集合作为渐变色。请参考图5,以贝塞尔(Bezier)曲线为例来讲解渐变色的产生过程。Bezier曲线是一种参数曲线,它可以通过多个控制点参数P(控制点的位置或者说控制点坐标)来控制曲线的形状,通过改变变量t(一维变量)的取值(0<t<1)来确定曲线上的每一点。贝塞尔曲线的阶数由控制点的个数n来决定,阶数为n–1。图4所示就是一个二阶Bezier曲线,由三个控制点P0,P1,P2来控制形状,当变量t=0.25时可以计算得到曲线上的一个点B。点B的集合构成贝塞尔曲线,通用贝塞尔曲线的计算公式如下:
其中
对于上述公式,当贝塞尔曲线算法的所有参数确定下来,即所有的P确定后,把变量t带入公式后就可以找到曲线上的对应的所有的点。具体来说,在0到1之间,变化变量t的值就可以计算出曲线上的每一个点的位置,把这些点连接起来就可以绘制出贝塞尔曲线,由于每个变量t的值都对应到一个颜色点,因此本申请将变量t也称为选点变量。假设本例中选用的贝塞尔曲线是三阶贝塞尔曲线,则该曲线对应4个控制点,这4个控制点就是三阶贝塞尔曲线的4个参数。
请参考图4,在这个例子中,所述四个控制点(P0,P1,P2,P3)可以分别位于各自的初始位置,具体位置在哪里并不具体限定。由于四个控制点已经确定,变化变量t的取值即可绘制出对应的贝塞尔曲线,也就是说此时有对应的初始贝塞尔曲线展示在变色面402上。变色面402中这条曲线路径上的所有颜色形成了一个颜色集合。如果这个曲线是用户满意的曲线,那么后续的渐变色将是这个颜色集合的子集。也就是说,这个颜色集合或者说这个曲线路径是渐变色的来源。
请继续参考图4,如果用户通过观察变色面402中这条贝塞尔曲线所覆盖的颜色集合后认为这个曲线所覆盖的范围不是自身预期的,则可以通过改变控制点的位置来改变曲线。当检测到用户使用鼠标或文本框的输入方式改变控制点位置时,根据用户的输入操作将该控制点的位置进行相应变化。当一个或多个控制点发生变化后,可以基于控制点位置变化使用贝塞尔曲线算法计算出新的贝塞尔曲线,并展示在变色面402上。请参考图6A以及6B所示不同控制点组合所对应的曲线变化示例。
除了可以根据鼠标的操作来改变控制点的位置进而改变曲线之外,在其他例子中,还可以提供文本框,供用户输入控制点在变色面402中的坐标。请参考图6A或图6B,假设变色面402的左下角是原点,X轴表达亮度L,变化范围为0到1,Y轴表达饱和度S,变化范围也是0到1。用户输入控制点的坐标就可以实现曲线的变化。在图4的示例中,四个控制点都有对应的坐标输入框,也就是控制点的实际坐标都允许用户通过文本框中输入数字来实现位置改变。
在本申请一个优选的例子中,界面当前使能了鼠标输入以及文本框输入两种方式。此时,可以根据用户在文本框的输入的控制点坐标实时改变变色面402中控制点的位置,也可以将在用户通过鼠标改变控制点位置后,将控制点新位置在所述输入框中将坐标更新。鼠标输入的方式是操作速度快,但很难得到一个精确的结果。而文本框输入的方式可以允许用户对这个大概可用的结果进行微调,调整精度高,但调整速度慢。这种通过鼠标输入与文本框输入两种方式的结合可以允许用户快速地变化出一条自己想要的贝塞尔曲线。用户可以通过鼠标输入的方式得到一个大概的结果,然后再通过文本框输入的方式微调来得到一个与其预期更加吻合的精确结果,即一条自己满意的贝塞尔曲线。
在得到自己想要的贝塞尔曲线后,就可以通过指定若干贝塞尔曲线算法中的变量t从贝塞尔曲线上获得多个颜色点。在控制点确定之后,贝塞尔曲线就可以确定下来。此时任意一个变量t都会对应到贝塞尔曲线中一个颜色点。由于当前呈现在变色面402中的曲线理论上代表了无数个颜色的集合,虽然事实上是有限的,但数量依然非常庞大。用户实际需要的渐变色可能是一个少数颜色的集合,比如20或者50个颜色的集合。一种简单的做法是,软件事先指定20个或50个变量t的值,就可以计算得到对应数量的颜色点,这些颜色点的颜色集合就是一个渐变色。根据这些颜色点代表的颜色相应生成对应的纯色图形(比如纯色框)给用户,这个序列中每个纯色图形对应使用一个计算得到的颜色点的颜色。换一个角度来说这个序列就是渐变色的一个直观表达,用户可以从这个纯色序列中选用任意多个颜色使用。
在另一个例子中,为了给用户提供更多的便利性,允许用户生成这个纯色图形序列中纯色图形的数量,也就是渐变色这个颜色集合中颜色的数量。在这个例子中,可以允许用户输入一个等差参数m来间接确定若干个t的取值,根据m确定一个等差数列,等差数列中的每个数值就是变量t的取值。其中等差数列S的项数为m,S0=0,Sm=1-1/m,公差为1/m。Si可以表达为:0+1/m*i,其中i为大于等于0,小于等于m-1的整数。假设m=10,那么t的取值分别为0,0.1,0.2,0.3……0.8,0.9。m的数值可以由用户指定。在其他例子中,还可以通过等比数列或其他的方式一次性产生若干个参数值t。在本申请中,这种一次性生成若干个参数值t的方法称为t值产生算法,也称为选点变量产生算法,其可以是各种算法,本申请并不限制;而m则称为选点变量计算参数。选点变量产生算法的优势在于,其允许用户输入少量参数即可得到其指定数量的变量t的值,从而一次性地通过贝塞尔曲线算法在曲线上找到与参数值t对应的指定数量的颜色点,基于这些颜色点确定出渐变色,进而可以产生出对应的纯色图形序列直观展现所述渐变色,供用户后续使用。
通过以上的描述可以看出,如果用户对产生的渐变色结果不满意,其可以随时通过改变控制点参数或参数值t来改变渐变色的产生,此时代表渐变色的纯色图形序列将跟随用户输入的改变而实时变化。值得注意的是,在传统技术中,贝塞尔曲线算法的多应用于工业领域的产品轮廓或建筑轮廓的设计。比如说汽车商场可以在汽车外形设计工具中利用贝塞尔曲线算法去设计和调整汽车的流线,获得更好的美观或者更低的风阻系数。在本申请中,贝塞尔曲线的利用主要是为了获得一组颜色的集合。这种基于贝塞尔曲线或其他类似曲线的渐变色的产生过程,可以允许用户(比如设计师)将渐变色的选择范围扩大,相对于线性插值得到的渐变色,设计师更加容易得到表达更为丰富渐变色,为UI设计能力的提升提供了更为坚实的技术基础。
需要说明的是,前述步骤303中预定的曲线算法并不限制于贝塞尔曲线算法,还可以采用其他基于参数样条曲线进行曲线渐变的曲线算法,本申请对此不作特殊限制。
与前述渐变色生成方法的实施例相对应,本申请还提供了渐变色生成装置的实施例。
本申请渐变色生成装置的实施例可以应用在终端上。装置实施例可以通过软件实现,也可以通过硬件或者软硬件结合的方式实现。以软件实现为例,作为一个逻辑意义上的装置,是通过其所在终端的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言,如图7所示,为本申请渐变色生成装置所在终端的一种硬件结构图,除了图7所示的处理器、内存、网络接口、以及非易失性存储器之外,实施例中装置所在的终端通常根据该指定的实际功能,还可以包括其他硬件,对此不再赘述。
图8是本申请一示例性实施例示出的一种渐变色生成装置的框图。
请参考图8,所述渐变色生成装置700可以应用在前述图7所示的终端中,包括有:基础确定单元701、变色展示单元702、渐变色选择单元703以及曲线生成单元704。
其中,所述基础确定单元701,根据用户的操作确定用户选择的基础颜色;
所述变色展示单元702,根据预定规则基于所述基础颜色生成候选颜色集合,基于该候选颜色集合生成变色面并展现给用户;
所述渐变色选择单元703,根据指定的曲线参数以及若干选点变量使用预定的曲线算法从所述变色面上选择出多个对应颜色的集合作为渐变色提供给用户。
可选的,其中所述用户的操作是针对预设的基色带的选择操作,所述基色带是通过HSL模型建立的,该基色带的各个颜色点均具有相同的色相H,不同颜色点之间的饱和度S以及亮度L的组合不同。
可选的,所述预定规则包括:
保持基础颜色的色相H、饱和度S以及亮度L中任意一个参数不变,变化其他两个参数以生成若干候选颜色,所述候选颜色集合包括基础颜色和候选颜色。
可选的,所述曲线算法为贝塞尔曲线算法。
可选的,所述曲线参数是若干控制点坐标,该装置还包括:
所述曲线生成单元704,根据用户通过鼠标或者预设文本框输入的控制点坐标,在所述变色面上生成对应的贝塞尔曲线展示给用户。
可选的,所述若干选点变量是基于用户指定的选点变量计算参数以及选点变量产生算法生成的。
以上所述仅为本申请的较佳实施例而已,并不用以限制本申请,凡在本申请的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本申请保护的范围之内。

Claims (12)

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

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610578927.2A CN106875454A (zh) 2016-07-20 2016-07-20 一种渐变色生成方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610578927.2A CN106875454A (zh) 2016-07-20 2016-07-20 一种渐变色生成方法和装置

Publications (1)

Publication Number Publication Date
CN106875454A true CN106875454A (zh) 2017-06-20

Family

ID=59239377

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610578927.2A Pending CN106875454A (zh) 2016-07-20 2016-07-20 一种渐变色生成方法和装置

Country Status (1)

Country Link
CN (1) CN106875454A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108986180A (zh) * 2018-06-07 2018-12-11 阿里巴巴集团控股有限公司 一种调色板的生成方法、装置及电子设备
CN111209070A (zh) * 2020-01-06 2020-05-29 杭州涂鸦信息技术有限公司 Web端线性渐变色取色方法
CN112199619A (zh) * 2020-10-30 2021-01-08 杭州安恒信息技术股份有限公司 一种页面颜色调整方法、装置、设备及可读存储介质
WO2021169030A1 (zh) * 2020-02-27 2021-09-02 杭州群核信息技术有限公司 一种瓷砖组合渐变铺贴的自动化生成方法及系统
CN113674368A (zh) * 2021-08-25 2021-11-19 中国电建集团河北省电力勘测设计研究院有限公司 一种基于AutoCAD的等高线自动着色方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102004974A (zh) * 2010-12-30 2011-04-06 用友软件股份有限公司 流程展现方法和装置
CN102903134A (zh) * 2012-09-13 2013-01-30 烽火通信科技股份有限公司 快速绘制多次曲线的方法
US20150062115A1 (en) * 2013-08-28 2015-03-05 Adobe Systems Incorporated Contour gradients using three-dimensional models
CN105590308A (zh) * 2014-10-22 2016-05-18 阿里巴巴集团控股有限公司 在终端屏幕上显示统计图的方法及其装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102004974A (zh) * 2010-12-30 2011-04-06 用友软件股份有限公司 流程展现方法和装置
CN102903134A (zh) * 2012-09-13 2013-01-30 烽火通信科技股份有限公司 快速绘制多次曲线的方法
US20150062115A1 (en) * 2013-08-28 2015-03-05 Adobe Systems Incorporated Contour gradients using three-dimensional models
CN105590308A (zh) * 2014-10-22 2016-05-18 阿里巴巴集团控股有限公司 在终端屏幕上显示统计图的方法及其装置

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108986180A (zh) * 2018-06-07 2018-12-11 阿里巴巴集团控股有限公司 一种调色板的生成方法、装置及电子设备
CN111209070A (zh) * 2020-01-06 2020-05-29 杭州涂鸦信息技术有限公司 Web端线性渐变色取色方法
CN111209070B (zh) * 2020-01-06 2023-09-26 杭州涂鸦信息技术有限公司 Web端线性渐变色取色方法
WO2021169030A1 (zh) * 2020-02-27 2021-09-02 杭州群核信息技术有限公司 一种瓷砖组合渐变铺贴的自动化生成方法及系统
CN112199619A (zh) * 2020-10-30 2021-01-08 杭州安恒信息技术股份有限公司 一种页面颜色调整方法、装置、设备及可读存储介质
CN112199619B (zh) * 2020-10-30 2024-03-22 杭州安恒信息技术股份有限公司 一种页面颜色调整方法、装置、设备及可读存储介质
CN113674368A (zh) * 2021-08-25 2021-11-19 中国电建集团河北省电力勘测设计研究院有限公司 一种基于AutoCAD的等高线自动着色方法
CN113674368B (zh) * 2021-08-25 2023-12-15 中国电建集团河北省电力勘测设计研究院有限公司 一种基于AutoCAD的等高线自动着色方法

Similar Documents

Publication Publication Date Title
CN106875454A (zh) 一种渐变色生成方法和装置
KR101990271B1 (ko) 신발 디자인 도구
CN101480106B (zh) 用于产生光的设备
US8248428B2 (en) Parallel computation of computationally expensive parameter changes
US8018470B2 (en) Vector based object property variations
Mittelstädt et al. Colorcat: Guided design of colormaps for combined analysis tasks
CA2721907A1 (en) System and method for automatically generating color scheme variations
US20130207988A1 (en) User interface (ui) color scheme generation and management according to visual consistency of visual attributes in the color scheme
CN110115841A (zh) 一种游戏场景中植被对象的渲染方法和装置
KR100533328B1 (ko) 2차원 이미지로부터 3차원 이미지를 생성하는 방법
CN108292319B (zh) 确定用于被显示在用户界面上的元素的外观
CN117611698A (zh) 雷达显控软件的色板生成方法、装置、电子设备和介质
CN104199994A (zh) 交互式和谐的配色方法
CN110178360B (zh) 用于色调调色板生成的方法、计算系统和存储设备
CN116485967A (zh) 一种虚拟模型的渲染方法及相关装置
CN114512094B (zh) 屏幕色彩调节方法、装置、终端及计算机可读存储介质
US20190080488A1 (en) Intelligent systems and methods for dynamic color hierarchy &amp; aesthetic design computation
Lambers Interactive Creation of Perceptually Uniform Color Maps.
US20090044149A1 (en) Method and Device for Generating a Procedural Map from an External Parameter such as an Image Characteristic
CN118142175A (zh) 特效生成方法、装置及电子设备
CN117173313A (zh) 基于Unreal引擎的模型动态颜色生成的方法和装置
CN116645434A (zh) 运动模糊的渲染方法、装置、电子设备及存储介质
CN115814415A (zh) 动态效果的模型渲染方法及装置、电子设备、存储介质
CN115953497A (zh) 一种多类别等高线图可视化构建方法及系统
CN118799502A (zh) 可视化空间色域模型建立方法及交互方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20170620