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

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

javascript

Aya Abdessalem · 技术社区 · 2 年前

我正在使用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 回复 | 直到 2 年前

Marco 2 年前

这是因为 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(),
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前