npm 包 @pyros2097/rad 使用教程

在前端开发中，我们常常需要对颜色进行操作和计算。@pyros2097/rad 是一个基于色轮的 npm 包，可以用来实现颜色相关的计算和操作。下面将对该包进行详细介绍，并给出使用样例。

安装

使用命令行安装：

npm install @pyros2097/rad

使用方法

导入包：

import Rad from "@pyros2097/rad";

API

基础方法

Rad.color(colorString: string)：将颜色字符串转换为颜色对象

例：

const colorObj = Rad.color("#ffaacc");
console.log(colorObj); // RGBA { r: 255, g: 170, b: 204, a: 1 }

Rad.rgb(r: number, g: number, b: number, a?: number)：将 RGB 值转换为颜色对象

例：

const colorObj = Rad.rgb(255, 170, 204, 0.5);
console.log(colorObj); // RGBA { r: 255, g: 170, b: 204, a: 0.5 }

Rad.hue(color: RGBA)：获取颜色的色相值

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.hue(colorObj)); // 340

Rad.saturation(color: RGBA)：获取颜色的饱和度值

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.saturation(colorObj)); // 33.33

调色方法

Rad.lighten(color: RGBA, amount?: number)：调亮颜色

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.lighten(colorObj, 30)); // RGBA { r: 255, g: 204, b: 229, a: 1 }

Rad.darken(color: RGBA, amount?: number)：调暗颜色

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.darken(colorObj, 30)); // RGBA { r: 255, g: 102, b: 153, a: 1 }

Rad.saturate(color: RGBA, amount?: number)：增加颜色的饱和度

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.saturate(colorObj, 30)); // RGBA { r: 255, g: 202, b: 178, a: 1 }

Rad.desaturate(color: RGBA, amount?: number)：降低颜色的饱和度

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.desaturate(colorObj, 30)); // RGBA { r: 255, g: 95, b: 163, a: 1 }

Rad.grayscale(color: RGBA)：将颜色转换为灰色

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.grayscale(colorObj)); // RGBA { r: 200, g: 200, b: 200, a: 1 }

调整方法

Rad.complement(color: RGBA)：获取颜色的补色

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.complement(colorObj)); // RGBA { r: 204, g: 170, b: 255, a: 1 }

Rad.invert(color: RGBA)：获取颜色的反色

例：

const colorObj = Rad.color("#ffaacc");
console.log(Rad.invert(colorObj)); // RGBA { r: 0, g: 85, b: 51, a: 1 }

混合方法

Rad.mix(color1: RGBA, color2: RGBA, amount?: number)：混合两个颜色

例：

const colorObj1 = Rad.color("#ffaacc");
const colorObj2 = Rad.color("#00ff00");
console.log(Rad.mix(colorObj1, colorObj2, 50)); // RGBA { r: 128, g: 193, b: 128, a: 1 }

示例

import Rad from "@pyros2097/rad";

const colorObj = Rad.color("#ffaacc");
console.log(Rad.lighten(colorObj, 30)); // RGBA { r: 255, g: 204, b: 229, a: 1 }

const colorObj2 = Rad.color("#11aa33");
console.log(Rad.mix(colorObj, colorObj2, 50)); // RGBA { r: 147, g: 144, b: 180, a: 1 }

结论

@pyros2097/rad 是一个功能强大的 npm 包，可以用来实现颜色相关的计算和操作，大大提高了前端开发的效率。不同的方法适用于不同的场景，可以根据具体需求来选择使用。在实际开发中，可以借助这个包轻松实现颜色相关的需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b6981e8991b448d8ef3