Initial commit of akmon project
This commit is contained in:
550
uni_modules/lime-color/readme.md
Normal file
550
uni_modules/lime-color/readme.md
Normal file
@@ -0,0 +1,550 @@
|
||||
# lime-color
|
||||
- 颜色转换
|
||||
|
||||
## 安装
|
||||
插件市场导入插件即可
|
||||
|
||||
## 使用
|
||||
```js
|
||||
import {tinyColor} from '@/uni_modules/lime-color'
|
||||
```
|
||||
|
||||
## 接受的字符串输入
|
||||
|
||||
字符串解析非常宽容。它的目的是使输入颜色尽可能简单。所有的逗号、百分比、括号都是可选的，大多数输入允许使用 0-1、0%-100% 或 0-n（其中 n 取决于值的 100、255 或 360）。
|
||||
HSL 和 HSV 都需要 0%-100% 或 0-1 作为 S/L/V 属性。H（色相）可以在 0%-100% 或 0-360 之间取值。
|
||||
RGB 输入需要 0-255 或 0%-100%。
|
||||
以下是一些字符串输入的示例：
|
||||
|
||||
|
||||
### Hex, 8-digit (RGBA) Hex
|
||||
|
||||
```ts
|
||||
tinyColor('#000');
|
||||
tinyColor('000');
|
||||
tinyColor('#369C');
|
||||
tinyColor('369C');
|
||||
tinyColor('#f0f0f6');
|
||||
tinyColor('f0f0f6');
|
||||
tinyColor('#f0f0f688');
|
||||
tinyColor('f0f0f688');
|
||||
```
|
||||
|
||||
### RGB, RGBA
|
||||
|
||||
```ts
|
||||
tinyColor('rgb (255, 0, 0)');
|
||||
tinyColor('rgb 255 0 0');
|
||||
tinyColor('rgba (255, 0, 0, .5)');
|
||||
tinyColor({ r: 255, g: 0, b: 0 });
|
||||
```
|
||||
|
||||
### HSL, HSLA
|
||||
|
||||
```ts
|
||||
tinyColor('hsl(0, 100%, 50%)');
|
||||
tinyColor('hsla(0, 100%, 50%, .5)');
|
||||
tinyColor('hsl(0, 100%, 50%)');
|
||||
tinyColor('hsl 0 1.0 0.5');
|
||||
tinyColor({ h: 0, s: 1, l: 0.5 });
|
||||
```
|
||||
|
||||
### HSV, HSVA
|
||||
|
||||
```ts
|
||||
tinyColor('hsv(0, 100%, 100%)');
|
||||
tinyColor('hsva(0, 100%, 100%, .5)');
|
||||
tinyColor('hsv (0 100% 100%)');
|
||||
tinyColor('hsv 0 1 1');
|
||||
tinyColor({ h: 0, s: 100, v: 100 });
|
||||
```
|
||||
|
||||
### Named
|
||||
|
||||
```ts
|
||||
tinyColor('RED');
|
||||
tinyColor('blanchedalmond');
|
||||
tinyColor('darkblue');
|
||||
```
|
||||
|
||||
### Number
|
||||
```ts
|
||||
tinyColor(0x0);
|
||||
tinyColor(0xaabbcc);
|
||||
```
|
||||
|
||||
|
||||
## 属性
|
||||
|
||||
### originalInput
|
||||
传递到构造函数中用于创建`tinyColor`实例的原始输入。
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.originalInput; // "red"
|
||||
const color2 = tinyColor({ r: 255, g: 255, b: 255 });
|
||||
color2.originalInput; // "{r: 255, g: 255, b: 255}"
|
||||
```
|
||||
|
||||
### format
|
||||
|
||||
返回用于创建`tinyColor`实例的格式
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.format; // "name"
|
||||
const color2 = tinyColor({ r: 255, g: 255, b: 255 });
|
||||
color2.format; // "rgb"
|
||||
```
|
||||
|
||||
### isValid
|
||||
|
||||
一个布尔值，指示颜色是否成功被解析。注意：如果颜色无效，则在与其他方法一起使用时将表现得像“黑色”。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('red');
|
||||
color1.isValid; // true
|
||||
color1.toHexString(); // "#ff0000"
|
||||
|
||||
const color2 = tinyColor('not a color');
|
||||
color2.isValid; // false
|
||||
color2.toString(); // "#000000"
|
||||
```
|
||||
|
||||
## Methods 方法
|
||||
|
||||
### getBrightness
|
||||
|
||||
返回颜色的感知亮度，范围从 0-255，这是根据 [Web内容无障碍指南（第1版）](http://www.w3.org/TR/AERT#color-contrast) 定义的。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('#fff');
|
||||
color1.getBrightness(); // 255
|
||||
|
||||
const color2 = tinyColor('#000');
|
||||
color2.getBrightness(); // 0
|
||||
```
|
||||
|
||||
### isLight
|
||||
|
||||
返回一个布尔值，指示颜色的感知亮度是否为浅色。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('#fff');
|
||||
color1.isLight(); // true
|
||||
|
||||
const color2 = tinyColor('#000');
|
||||
color2.isLight(); // false
|
||||
```
|
||||
|
||||
### isDark
|
||||
|
||||
返回一个布尔值，指示颜色的感知亮度是否为深色。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('#fff');
|
||||
color1.isDark(); // false
|
||||
|
||||
const color2 = tinyColor('#000');
|
||||
color2.isDark(); // true
|
||||
```
|
||||
|
||||
### getLuminance
|
||||
|
||||
返回颜色的感知亮度（luminance），范围从 0-1，这是根据 [Web内容无障碍指南（第2版）](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) 定义的。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('#fff');
|
||||
color1.getLuminance(); // 1
|
||||
|
||||
const color2 = tinyColor('#000');
|
||||
color2.getLuminance(); // 0
|
||||
```
|
||||
|
||||
### getAlpha
|
||||
|
||||
返回颜色的`alpha`（透明度）值，范围从 `0-1`。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('rgba(255, 0, 0, .5)');
|
||||
color1.getAlpha(); // 0.5
|
||||
|
||||
const color2 = tinyColor('rgb(255, 0, 0)');
|
||||
color2.getAlpha(); // 1
|
||||
|
||||
const color3 = tinyColor('transparent');
|
||||
color3.getAlpha(); // 0
|
||||
```
|
||||
|
||||
### setAlpha
|
||||
|
||||
在当前颜色上设置`alpha`（透明度）值。接受的范围是 `0-1` 之间。
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.getAlpha(); // 1
|
||||
color.setAlpha(0.5);
|
||||
color.getAlpha(); // .5
|
||||
color.toRgbString(); // "rgba(255, 0, 0, .5)"
|
||||
```
|
||||
|
||||
### onBackground
|
||||
|
||||
计算颜色在背景上的显示效果。当颜色完全透明（即 `getAlpha() == 0`）时，结果将是背景颜色。当颜色完全不透明（即 `getAlpha() == 1`）时，结果将是颜色本身。否则，你将得到一个计算结果。
|
||||
|
||||
```ts
|
||||
const color = tinyColor('rgba(255, 0, 0, .5)');
|
||||
const computedColor = color.onBackground('rgb(0, 0, 255)');
|
||||
computedColor.toRgbString(); // "rgb(128, 0, 128)"
|
||||
```
|
||||
|
||||
### toHsv
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }
|
||||
```
|
||||
|
||||
### toHsvString
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHsvString(); // "hsv(0, 100%, 100%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)"
|
||||
```
|
||||
|
||||
### toHsl
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
|
||||
```
|
||||
|
||||
### toHslString
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHslString(); // "hsl(0, 100%, 50%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toHslString(); // "hsla(0, 100%, 50%, 0.5)"
|
||||
```
|
||||
|
||||
### toNumber
|
||||
```ts
|
||||
tinyColor('#aabbcc').toNumber() === 0xaabbcc // true
|
||||
tinyColor('rgb(1, 1, 1)').toNumber() === (1 << 16) + (1 << 8) + 1 // true
|
||||
```
|
||||
|
||||
### toHex
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHex(); // "ff0000"
|
||||
```
|
||||
|
||||
### toHexString
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHexString(); // "#ff0000"
|
||||
```
|
||||
|
||||
### toHex8
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHex8(); // "ff0000ff"
|
||||
```
|
||||
|
||||
### toHex8String
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toHex8String(); // "#ff0000ff"
|
||||
```
|
||||
|
||||
### toHexShortString
|
||||
根据颜色的透明度（Alpha值）返回较短的十六进制值，并且值前面带有#符号
|
||||
```ts
|
||||
const color1 = tinyColor('#ff000000');
|
||||
color1.toHexShortString(); // "#ff000000"
|
||||
color1.toHexShortString(true); // "#f000"
|
||||
|
||||
const color2 = tinyColor('#ff0000ff');
|
||||
color2.toHexShortString(); // "#ff0000"
|
||||
color2.toHexShortString(true); // "#f00"
|
||||
```
|
||||
|
||||
### toRgb
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }
|
||||
```
|
||||
|
||||
### toRgbString
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toRgbString(); // "rgb(255, 0, 0)"
|
||||
color.setAlpha(0.5);
|
||||
color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
|
||||
```
|
||||
|
||||
### toPercentageRgb
|
||||
将当前颜色转换为百分比表示的 RGB
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toPercentageRgb(); // { r: "100%", g: "0%", b: "0%", a: 1 }
|
||||
```
|
||||
|
||||
### toPercentageRgbString
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)"
|
||||
```
|
||||
|
||||
### toName
|
||||
|
||||
```ts
|
||||
const color = tinyColor('red');
|
||||
color.toName(); // "red"
|
||||
```
|
||||
|
||||
|
||||
### toString
|
||||
|
||||
根据输入格式打印成字符串。你也可以通过向函数中传入以下之一来覆盖这个行为：`"rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv"`
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('red');
|
||||
color1.toString(); // "red"
|
||||
color1.toString('hsv'); // "hsv(0, 100%, 100%)"
|
||||
|
||||
const color2 = tinyColor('rgb(255, 0, 0)');
|
||||
color2.toString(); // "rgb(255, 0, 0)"
|
||||
color2.setAlpha(0.5);
|
||||
color2.toString(); // "rgba(255, 0, 0, 0.5)"
|
||||
```
|
||||
|
||||
### 颜色修改
|
||||
|
||||
这些方法操纵当前颜色，并返回它以进行链式调用。例如：
|
||||
|
||||
```ts
|
||||
tinyColor('red')
|
||||
.lighten()
|
||||
.desaturate()
|
||||
.toHexString(); // '#f53d3d'
|
||||
```
|
||||
|
||||
### lighten
|
||||
|
||||
`lighten: function(amount = 10) -> TinyColor`.根据给定的量（从0到100）调亮颜色。提供100将始终返回白色.
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').lighten().toString(); // '#ff3333'
|
||||
tinyColor('#f00').lighten(100).toString(); // '#ffffff'
|
||||
```
|
||||
|
||||
### brighten
|
||||
|
||||
`brighten: function(amount = 10) -> TinyColor`. 根据给定的量（从0到100）提高颜色的亮度。
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').brighten().toString(); // '#ff1919'
|
||||
```
|
||||
|
||||
### darken
|
||||
|
||||
`darken: function(amount = 10) -> TinyColor`. 根据给定的量（从0到100）调暗颜色。提供100将始终返回黑色.
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').darken().toString(); // '#cc0000'
|
||||
tinyColor('#f00').darken(100).toString(); // '#000000'
|
||||
```
|
||||
|
||||
### tint
|
||||
|
||||
将颜色与纯白色混合，范围从0到100。提供0将不进行任何操作，提供100将始终返回白色.
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').tint().toString(); // "#ff1a1a"
|
||||
tinyColor('#f00').tint(100).toString(); // "#ffffff"
|
||||
```
|
||||
|
||||
### shade
|
||||
|
||||
将颜色与纯黑色混合，范围从0到100。提供0将不进行任何操作，提供100将始终返回黑色。
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').shade().toString(); // "#e60000"
|
||||
tinyColor('#f00').shade(100).toString(); // "#000000"
|
||||
```
|
||||
|
||||
### desaturate
|
||||
|
||||
`desaturate: function(amount = 10) -> TinyColor`. 根据给定的量（从0到100）降低颜色的饱和度。提供100将与调用`greyscale`相同。
|
||||
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').desaturate().toString(); // "#f20d0d"
|
||||
tinyColor('#f00').desaturate(100).toString(); // "#808080"
|
||||
```
|
||||
|
||||
### saturate
|
||||
|
||||
`saturate: function(amount = 10) -> TinyColor`. 根据给定的量（从0到100）增加颜色的饱和度。
|
||||
|
||||
```ts
|
||||
tinyColor('hsl(0, 10%, 50%)').saturate().toString(); // "hsl(0, 20%, 50%)"
|
||||
```
|
||||
|
||||
### greyscale
|
||||
|
||||
`greyscale: function() -> TinyColor`. 完全降低颜色的饱和度，使其变为灰度。与调用`desaturate(100)`相同。
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').greyscale().toString(); // "#808080"
|
||||
```
|
||||
|
||||
### spin
|
||||
|
||||
`spin: function(amount = 0) -> TinyColor`. 根据给定的量（从-360到360）旋转色相。调用时使用0、360或-360将不进行任何操作（因为它将色相设置回原来的值）。
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').spin(180).toString(); // "#00ffff"
|
||||
tinyColor('#f00').spin(-90).toString(); // "#7f00ff"
|
||||
tinyColor('#f00').spin(90).toString(); // "#80ff00"
|
||||
|
||||
// spin(0) and spin(360) do nothing
|
||||
tinyColor('#f00').spin(0).toString(); // "#ff0000"
|
||||
tinyColor('#f00').spin(360).toString(); // "#ff0000"
|
||||
```
|
||||
|
||||
### mix
|
||||
|
||||
`mix: function(amount = 50) => TinyColor`. 将当前颜色与另一种颜色按给定量（从0到100）混合。0表示不混合（返回当前颜色）。
|
||||
|
||||
```ts
|
||||
let color1 = tinyColor('#f0f');
|
||||
let color2 = tinyColor('#0f0');
|
||||
|
||||
color1.mix(color2).toHexString(); // #808080
|
||||
```
|
||||
|
||||
### 颜色组合
|
||||
|
||||
组合函数除非特别说明，否则返回一个`TinyColor`对象的数组。
|
||||
|
||||
### analogous
|
||||
生成一组与当前颜色相似的颜色。
|
||||
`analogous: function(results = 6, slices = 30) -> array<TinyColor>`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').analogous();
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]
|
||||
```
|
||||
|
||||
### monochromatic
|
||||
生成一组与当前颜色具有相同色相和饱和度的颜色。
|
||||
`monochromatic: function(, results = 6) -> array<TinyColor>`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').monochromatic();
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]
|
||||
```
|
||||
|
||||
### splitcomplement
|
||||
生成当前颜色的分裂补色。
|
||||
`splitcomplement: function() -> array<TinyColor>`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').splitcomplement();
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#ccff00", "#0066ff" ]
|
||||
```
|
||||
|
||||
### triad
|
||||
生成当前颜色的三色调。
|
||||
`triad: function() -> array<TinyColor>`. Alias for `polyad(3)`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').triad();
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#00ff00", "#0000ff" ]
|
||||
```
|
||||
|
||||
### tetrad
|
||||
生成当前颜色的四色调。
|
||||
`tetrad: function() -> array<TinyColor>`. Alias for `polyad(4)`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').tetrad();
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
|
||||
```
|
||||
|
||||
### polyad
|
||||
生成当前颜色的 n 色调。
|
||||
`polyad: function(number) -> array<TinyColor>`.
|
||||
|
||||
```ts
|
||||
const colors = tinyColor('#f00').polyad(4);
|
||||
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
|
||||
```
|
||||
|
||||
### complement
|
||||
计算当前颜色的补色。
|
||||
`complement: function() -> TinyColor`.
|
||||
|
||||
```ts
|
||||
tinyColor('#f00').complement().toHexString(); // "#00ffff"
|
||||
```
|
||||
|
||||
## 颜色工具
|
||||
|
||||
### equals
|
||||
判断两色是否相同
|
||||
|
||||
```ts
|
||||
let color1 = tinyColor('red');
|
||||
let color2 = tinyColor('#f00');
|
||||
|
||||
color1.equals(color2); // true
|
||||
```
|
||||
|
||||
|
||||
## 常见操作
|
||||
|
||||
### clone
|
||||
|
||||
`clone: function() -> TinyColor`.
|
||||
使用相同的颜色实例化一个新的`TinyColor`对象。对新的对象的任何更改都不会影响旧的对象。
|
||||
|
||||
```ts
|
||||
const color1 = tinyColor('#F00');
|
||||
const color2 = color1.clone();
|
||||
color2.setAlpha(0.5);
|
||||
|
||||
color1.toString(); // "#ff0000"
|
||||
color2.toString(); // "rgba(255, 0, 0, 0.5)"
|
||||
```
|
||||
|
||||
### generate
|
||||
通过一个主色生成10个等级的颜色数组，使用 Ant Design 的颜色生成算法。
|
||||
|
||||
```ts
|
||||
import {generate, LGenerateOptions} from '@/uni_modules/lime-color'
|
||||
// 第二个参数为选填，如果不填则默认为 'default'
|
||||
generate('red',{ theme: 'default'|'dark'} as LGenerateOptions)
|
||||
// ['#2c1113', '#450f11', '#5b0e0e', '#7e0b0b', '#ad0707', '#dc0303', '#e82d27', '#f3594f', '#f88577', '#faaca0']
|
||||
```
|
||||
|
||||
|
||||
## 打赏
|
||||
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user