tinygradient 學習筆記

原創

苦糖zym

2020-02-21 20:46

tinygradient —— 方便設置漸變顏色的庫 （https://www.npmjs.com/package/tinygradient）

Easily generate color gradients with an unlimited number of color stops and steps.

它依賴 TinyColor 這個庫！

那就先從學習 tinycolor 開始吧

tintcolor —— JavaScript color tooling（https://github.com/bgrins/TinyColor）

它支持 hsl hsv rgb 和 ColorName 寫法

直接寫核心用法吧！

var color = tinycolor("red");
color.getFormat(); // "name"
color = tinycolor({r:255, g:255, b:255});
color.getFormat(); // "rgb"

var color = tinycolor("red");
color.getOriginalInput(); // "red"
color = tinycolor({r:255, g:255, b:255});
color.getOriginalInput(); // "{r: 255, g: 255, b: 255}"

變換顏色  ColorName <=> hex
var color1 = tinycolor("red");
color1.isValid(); // true
color1.toHexString(); // "#ff0000"

var color2 = tinycolor("not a color");
color2.isValid(); // false
color2.toString(); // "#000000"

var color = tinycolor("red");
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }

獲取顏色的透明度

var color1 = tinycolor("rgba(255, 0, 0, .5)");
color1.getAlpha(); // 0.5

var color2 = tinycolor("rgb(255, 0, 0)");
color2.getAlpha(); // 1

var color3 = tinycolor("transparent");
color3.getAlpha(); // 0

設置顏色的透明度

var color = tinycolor("red");

color.getAlpha(); // 1

color.setAlpha(0.5);

color.getAlpha(); // 0.5

color.toRgbString(); // "rgba(255, 0, 0, 0.5)"

大概就是把一個顏色變成一個實例。

這個實例的屬性有幾個實用的方法

isValid()

toHex()

toHexString()

toRgbString()

toRgb()

getAlpha()

setAlpha(<number>)

=======================================

tinygradient 就是以來 TinyColor 進行一次封裝變成一個讓你可以設置漸變顏色的庫

var gradient = tinygradient('red', 'green', 'blue');

var gradient = tinygradient([

  '#ff0000',

  '#00ff00',

  '#0000ff'

]);

var gradient = tinygradient([

  tinycolor('#ff0000'),       // tinycolor object

  {r: 0, g: 255, b: 0},       // RGB object

  {h: 240, s: 1, v: 1, a: 1}, // HSVa object

  'rgb(120, 120, 0)',         // RGB CSS string

  'gold'                      // ColorName

]);

var gradient = tinygradient([ // pos 指的是顏色的位置

  {color: '#d8e0de', pos: 0},

  {color: '#255B53', pos: 0.8},

  {color: '#000000', pos: 1}

]);

gradient.rgbAt(0.55) // 可以獲取到 0.55 位置上的顏色
 
// 返回一個線性的從左到右的漸變

var gradientStr = gradient.css();

// 返回一個從左上角開始的徑向的漸變

var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');