一種漸變色生成方法和裝置制造方法及圖紙

本申請(qǐng)?zhí)峁┮环N漸變色生成方法和裝置。所述方法包括：根據(jù)用戶的操作確定用戶選擇的基礎(chǔ)顏色；根據(jù)預(yù)定規(guī)則基于所述基礎(chǔ)顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；根據(jù)指定的曲線參數(shù)以及若干選點(diǎn)變量使用預(yù)定的曲線算法從所述變色面上選擇出多個(gè)對(duì)應(yīng)顏色的集合作為漸變色提供給用戶。本申請(qǐng)基于貝塞爾曲線或其他類似曲線的漸變色的產(chǎn)生過(guò)程，可以允許用戶(比如設(shè)計(jì)師)將漸變色的選擇范圍擴(kuò)大，相對(duì)于線性插值得到的漸變色，設(shè)計(jì)師更加容易得到表達(dá)更為豐富漸變色，為UI設(shè)計(jì)能力的提升提供了更為堅(jiān)實(shí)的技術(shù)基礎(chǔ)。

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.

【技術(shù)實(shí)現(xiàn)步驟摘要】
一種漸變色生成方法和裝置
本申請(qǐng)涉及用戶圖形界面領(lǐng)域，尤其涉及一種漸變色生成方法和裝置。
技術(shù)介紹
圖形用戶界面(GraPhicalUserInterface，簡(jiǎn)稱GUI)在計(jì)算機(jī)軟件領(lǐng)域通常又會(huì)被從業(yè)者簡(jiǎn)稱為用戶界面(UserInterface，UI)，以下若無(wú)特殊說(shuō)明，本申請(qǐng)所說(shuō)的UI是指GUI。UI是技術(shù)與工業(yè)設(shè)計(jì)融合的產(chǎn)物，比如說(shuō)設(shè)計(jì)新穎獨(dú)特的UI可以申請(qǐng)GUI外觀專利加以保護(hù)。然而設(shè)計(jì)師在進(jìn)行UI設(shè)計(jì)時(shí)，其也需要技術(shù)上的支持和輔助，比如特定形狀的繪制工具，又或者特定顏色的選取工具。在UI設(shè)計(jì)過(guò)程中，設(shè)計(jì)師經(jīng)常會(huì)使用到漸變色，比如將某一按鈕的顏色設(shè)置為漸變色，這關(guān)系到整個(gè)界面的美觀，也關(guān)系到用戶使用體驗(yàn)。比如：漸變色可以幫助用戶清晰地了解按鈕的狀態(tài)，還可以清晰直觀地幫助用戶了解數(shù)據(jù)大小和分布，諸如居民出行的熱力分布圖等。然而，目前在漸變色的選取上，設(shè)計(jì)師受限于工具能力的限制，很多時(shí)候難以取得自己心目中理想的漸變色，這大大制約了設(shè)計(jì)師在UI設(shè)計(jì)過(guò)程中的利用顏色漸變進(jìn)行表達(dá)的能力。
技術(shù)實(shí)現(xiàn)思路
有鑒于此，本申請(qǐng)?zhí)峁┮环N漸變色生成方法和裝置。具體地，本申請(qǐng)是通過(guò)如下技術(shù)方案實(shí)現(xiàn)的：一種漸變色生成方法，包括：根據(jù)用戶的操作確定用戶選擇的基礎(chǔ)顏色；根據(jù)預(yù)定規(guī)則基于所述基礎(chǔ)顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；根據(jù)指定的曲線參數(shù)以及若干選點(diǎn)變量使用預(yù)定的曲線算法從所述變色面上選擇出多個(gè)對(duì)應(yīng)顏色的集合作為漸變色提供給用戶。可選的，其中所述用戶的操作是針對(duì)預(yù)設(shè)的基色帶的選擇操作，所述基色帶是通過(guò)HSL模型建立的，該基色帶的各個(gè)顏色點(diǎn)均具有相同的色相H，不同顏色點(diǎn)之間的飽和度S以及亮度L的組合不同。可選的，所述預(yù)定規(guī)則包括：保持基礎(chǔ)顏色的色相H、飽和度S以及亮度L中任意一個(gè)參數(shù)不變，變化其他兩個(gè)參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎(chǔ)顏色和候選顏色。可選的，所述曲線算法為貝塞爾曲線算法。可選的，所述曲線參數(shù)是若干控制點(diǎn)坐標(biāo)，該方法還包括：根據(jù)用戶通過(guò)鼠標(biāo)或者預(yù)設(shè)文本框輸入的控制點(diǎn)坐標(biāo)，在所述變色面上生成對(duì)應(yīng)的貝塞爾曲線展示給用戶。可選的，所述若干選點(diǎn)變量是基于用戶指定的選點(diǎn)變量計(jì)算參數(shù)以及選點(diǎn)變量產(chǎn)生算法生成的。一種漸變色生成裝置，包括：基礎(chǔ)確定單元，根據(jù)用戶的操作確定用戶選擇的基礎(chǔ)顏色；變色展示單元，根據(jù)預(yù)定規(guī)則基于所述基礎(chǔ)顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；漸變色選擇單元，根據(jù)指定的曲線參數(shù)以及若干選點(diǎn)變量使用預(yù)定的曲線算法從所述變色面上選擇出多個(gè)對(duì)應(yīng)顏色的集合作為漸變色提供給用戶。可選的，其中所述用戶的操作是針對(duì)預(yù)設(shè)的基色帶的選擇操作，所述基色帶是通過(guò)HSL模型建立的，該基色帶的各個(gè)顏色點(diǎn)均具有相同的色相H，不同顏色點(diǎn)之間的飽和度S以及亮度L的組合不同。可選的，所述預(yù)定規(guī)則包括：保持基礎(chǔ)顏色的色相H、飽和度S以及亮度L中任意一個(gè)參數(shù)不變，變化其他兩個(gè)參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎(chǔ)顏色和候選顏色。可選的，所述曲線算法為貝塞爾曲線算法。可選的，所述曲線參數(shù)是若干控制點(diǎn)坐標(biāo)，該裝置還包括：曲線生成單元，根據(jù)用戶通過(guò)鼠標(biāo)或者預(yù)設(shè)文本框輸入的控制點(diǎn)坐標(biāo)，在所述變色面上生成對(duì)應(yīng)的貝塞爾曲線展示給用戶。可選的，所述若干選點(diǎn)變量是基于用戶指定的選點(diǎn)變量計(jì)算參數(shù)以及選點(diǎn)變量產(chǎn)生算法生成的。由以上描述可以看出，本申請(qǐng)基于貝塞爾曲線或其他類似曲線的漸變色的產(chǎn)生過(guò)程，可以允許用戶(比如設(shè)計(jì)師)將漸變色的選擇范圍擴(kuò)大，相對(duì)于線性插值得到的漸變色，設(shè)計(jì)師更加容易得到表達(dá)更為豐富漸變色，為UI設(shè)計(jì)能力的提升提供了更為堅(jiān)實(shí)的技術(shù)基礎(chǔ)。附圖說(shuō)明圖1是一種HSL模型描繪的色彩空間的示意圖。圖2是相關(guān)技術(shù)中一種典型的線性漸變色的填充效果示意圖。圖3是本申請(qǐng)一示例性實(shí)施例示出的一種漸變色生成方法的流程示意圖。圖4是本申請(qǐng)一示例性實(shí)施例示出的一種用戶界面示意圖。圖5是本申請(qǐng)一示例性實(shí)施例示出的一種貝塞爾曲線算法示意圖。圖6A是本申請(qǐng)一示例性實(shí)施例示出的一種曲線變化示意圖。圖6B是本申請(qǐng)一示例性實(shí)施例示出的一種曲線變化示意圖。圖7是本申請(qǐng)一示例性實(shí)施例示出的一種用于漸變色生成裝置的一結(jié)構(gòu)示意圖。圖8是本申請(qǐng)一示例性實(shí)施例示出的一種漸變色生成裝置的結(jié)構(gòu)框圖。具體實(shí)施方式這里將詳細(xì)地對(duì)示例性實(shí)施例進(jìn)行說(shuō)明，其示例表示在附圖中。下面的描述涉及附圖時(shí)，除非另有表示，不同附圖中的相同數(shù)字表示相同或相似的要素。以下示例性實(shí)施例中所描述的實(shí)施方式并不代表與本申請(qǐng)相一致的所有實(shí)施方式。相反，它們僅是與如所附權(quán)利要求書中所詳述的、本申請(qǐng)的一些方面相一致的裝置和方法的例子。在本申請(qǐng)使用的術(shù)語(yǔ)是僅僅出于描述特定實(shí)施例的目的，而非旨在限制本申請(qǐng)。在本申請(qǐng)和所附權(quán)利要求書中所使用的單數(shù)形式的“一種”、“所述”和“該”也旨在包括多數(shù)形式，除非上下文清楚地表示其他含義。還應(yīng)當(dāng)理解，本文中使用的術(shù)語(yǔ)“和/或”是指并包含一個(gè)或多個(gè)相關(guān)聯(lián)的列出項(xiàng)目的任何或所有可能組合。應(yīng)當(dāng)理解，盡管在本申請(qǐng)可能采用術(shù)語(yǔ)第一、第二、第三等來(lái)描述各種信息，但這些信息不應(yīng)限于這些術(shù)語(yǔ)。這些術(shù)語(yǔ)僅用來(lái)將同一類型的信息彼此區(qū)分開。例如，在不脫離本申請(qǐng)范圍的情況下，第一信息也可以被稱為第二信息，類似地，第二信息也可以被稱為第一信息。取決于語(yǔ)境，如在此所使用的詞語(yǔ)“如果”可以被解釋成為“在……時(shí)”或“當(dāng)……時(shí)”或“響應(yīng)于確定”。在具體介紹本申請(qǐng)各種具體實(shí)現(xiàn)之前，首先介紹一下本申請(qǐng)涉及到的基礎(chǔ)概念及本申請(qǐng)使用到的一些自定義。在計(jì)算機(jī)軟件開發(fā)領(lǐng)域，獲取單個(gè)或者多個(gè)顏色可以理解為從一個(gè)色彩空間(也稱為“顏色空間”)中獲得一組或者多組數(shù)值(比如坐標(biāo)值)，一組數(shù)值就代表著一個(gè)顏色。從某種形象的角度來(lái)看，一個(gè)顏色可以理解為色彩空間中的一個(gè)特定的坐標(biāo)，選擇一個(gè)顏色通常也被理解為選擇一個(gè)顏色點(diǎn)。色彩空間事實(shí)上是把一個(gè)色彩模型所有能表示的顏色都放在一起組成的一個(gè)集合。常用的色彩模型包括RGB模型以及HSL模型。對(duì)于RGB模型來(lái)說(shuō)，RGB分別代表紅色、綠色、藍(lán)色三個(gè)分量，每個(gè)分量的取值范圍是0到1。標(biāo)準(zhǔn)的紅色在RGB模型中表示為：RGB(1,0,0)，也就是說(shuō)綠色和藍(lán)色的分量為0。HSL模型是目前計(jì)算機(jī)軟件開發(fā)領(lǐng)域最流行的模型，其使用色相H(0--360)、飽和度S(0％--100％)以及亮度L(0％--100％)來(lái)表示一個(gè)顏色。標(biāo)準(zhǔn)紅色在HSL模型中表示為HSL(0,100％,50％)。請(qǐng)參考圖1，圖1是HSL模型描繪的色彩空間的示例。以下描述中將以HSL模型為例進(jìn)行說(shuō)明，RGB模型或其他模型與HSL模型原理類似不再一一贅述。在相關(guān)技術(shù)中，產(chǎn)生漸變色或者說(shuō)選擇漸變色的實(shí)現(xiàn)方式是取得兩個(gè)顏色點(diǎn)，然后由特定工具在兩個(gè)顏色點(diǎn)之間通過(guò)線性插值的方式來(lái)實(shí)現(xiàn)顏色漸變。漸變色事實(shí)上是一個(gè)顏色集合，在漸變色的應(yīng)用上，可以利用漸變色對(duì)一個(gè)圖形進(jìn)行填充得到漸變顯示效果。與單色填充一樣，漸變色填充只不過(guò)是把使用對(duì)象從單色變?yōu)闈u變色(若干單色的集合)，填充的時(shí)候可以選擇各種填充方式，比如線性填充，矩形填充，射線填充等等。無(wú)論是那種填充一般都是定義填充的起點(diǎn)和重點(diǎn)以及填充方向。值得注意的是，這種填充方式本質(zhì)上是對(duì)漸變色的利用，而不是本申請(qǐng)后續(xù)討論的如何取得一個(gè)不單調(diào)本文檔來(lái)自技高網(wǎng)...

【技術(shù)保護(hù)點(diǎn)】
一種漸變色生成方法，其特征在于，包括：根據(jù)用戶的操作確定用戶選擇的基礎(chǔ)顏色；根據(jù)預(yù)定規(guī)則基于所述基礎(chǔ)顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；根據(jù)指定的曲線參數(shù)以及若干選點(diǎn)變量使用預(yù)定的曲線算法從所述變色面上選擇出多個(gè)對(duì)應(yīng)顏色的集合作為漸變色提供給用戶。

【技術(shù)特征摘要】
1.一種漸變色生成方法，其特征在于，包括：根據(jù)用戶的操作確定用戶選擇的基礎(chǔ)顏色；根據(jù)預(yù)定規(guī)則基于所述基礎(chǔ)顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；根據(jù)指定的曲線參數(shù)以及若干選點(diǎn)變量使用預(yù)定的曲線算法從所述變色面上選擇出多個(gè)對(duì)應(yīng)顏色的集合作為漸變色提供給用戶。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，其中所述用戶的操作是針對(duì)預(yù)設(shè)的基色帶的選擇操作，所述基色帶是通過(guò)HSL模型建立的，該基色帶的各個(gè)顏色點(diǎn)均具有相同的色相H，不同顏色點(diǎn)之間的飽和度S以及亮度L的組合不同。3.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述預(yù)定規(guī)則包括：保持基礎(chǔ)顏色的色相H、飽和度S以及亮度L中任意一個(gè)參數(shù)不變，變化其他兩個(gè)參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎(chǔ)顏色和候選顏色。4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述曲線算法為貝塞爾曲線算法。5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述曲線參數(shù)是若干控制點(diǎn)坐標(biāo)，該方法還包括：根據(jù)用戶通過(guò)鼠標(biāo)或者預(yù)設(shè)文本框輸入的控制點(diǎn)坐標(biāo)，在所述變色面上生成對(duì)應(yīng)的貝塞爾曲線展示給用戶。6.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述若干選點(diǎn)變量是基于用戶指定的選點(diǎn)變量計(jì)算參數(shù)以及選點(diǎn)變量產(chǎn)生算法生成的。7.一種漸變色生成裝置，其特征在于...

【專利技術(shù)屬性】
技術(shù)研發(fā)人員：韓凱，黃通，
申請(qǐng)(專利權(quán))人：阿里巴巴集團(tuán)控股有限公司，
類型：發(fā)明
國(guó)別省市：開曼群島,KY