代码之家 › 专栏 › 技术社区 › Aya Abdessalem

为什么tinycolor().blightning()不能正常工作?

javascript

Aya Abdessalem · 技术社区 · 1 年前

我正在使用tinycolor2,我想从brandColor_Base获得更亮的颜色这是我的代码的样子

import tinycolor from "tinycolor2"

const brandColor_Base="#338EF5";

export var  colors={
    
    brandColor_1:tinycolor(brandColor_Base).brighten(70).toString(),
    brandColor_2:tinycolor(brandColor_Base).brighten(55).toString(),
    brandColor_3:tinycolor(brandColor_Base).brighten(40).toString(),
    brandColor_4:tinycolor(brandColor_Base).brighten(25).toString(),
    brandColor_5:tinycolor(brandColor_Base).brighten(10).toString(),
    brandColor_6:tinycolor(brandColor_Base),
}

但因为我不会在每次tinycolor(brandColor_Base)时重写,所以我更新了如下代码

import tinycolor from "tinycolor2"

const brandColor_Base=tinycolor("#338EF5");

export var  colors={
    
   brandColor_1:brandColor_Base.brighten(70).toString(),
   brandColor_2:brandColor_Base.brighten(55).toString(),
   brandColor_3:brandColor_Base.brighten(40).toString(),
   brandColor_4:brandColor_Base.brighten(25).toString(),
   brandColor_5:brandColor_Base.brighten(10).toString(),
   
}

这段代码运行得不好,它的工作方式就像brandColor_5比brandColol_4更亮,brandColor_4比brandClor_3等更亮,但不比brandCcolor_base更亮(每次我删除前一行代码时,brandClor_5都会变暗) 我该怎么办?

1 回复 | 直到 1 年前

Marco 1 年前

这是因为 brandColor_Base.brighten(70) 不返回新的tinycolor实例,而是对现有实例进行变异。

在我看来,这是一个糟糕的API设计 tinycolor 包裹

brandColor_Base.brighten(70)
brandColor_Base.brighten(70)

基本上使基础颜色变亮,然后再次使该颜色的结果变亮。

您可以通过更改 brandColor_Base 作为函数:

import tinycolor from "tinycolor2"

const brandColor_Base = () => tinycolor("#338EF5");

export var colors = {
   brandColor_1: brandColor_Base().brighten(70).toString(),
   brandColor_2: brandColor_Base().brighten(55).toString(),
   brandColor_3: brandColor_Base().brighten(40).toString(),
   brandColor_4: brandColor_Base().brighten(25).toString(),
   brandColor_5: brandColor_Base().brighten(10).toString(),
}

brandColor_Base() 将返回一个新的 锡的颜色 实例。

你可以改变 品牌颜色_基础() 接受亮度作为参数,并按如下方式使用:

import tinycolor from "tinycolor2"

const brandColor_Base = (brightness) => {
   return tinycolor("#338EF5").brighten(brightness)
}

export var colors = {
   brandColor_1: brandColor_Base(70).toString(),
   brandColor_2: brandColor_Base(55).toString(),
   brandColor_3: brandColor_Base(40).toString(),
   brandColor_4: brandColor_Base(25).toString(),
   brandColor_5: brandColor_Base(10).toString(),
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前