以编程方式为 Typescript 中的颜色添加不透明度

Posted 2023-03-06

【中文标题】以编程方式为 Typescript 中的颜色添加不透明度

【英文标题】：Programmatically add opacity to a color in Typescript

【发布时间】：2018-11-26 03:57:17

【问题描述】：

我一直在尝试找到一种方法来为颜色添加不透明度并在 Typescript 中检索结果颜色的 HEX 代码。

是否可以在 Typescript 中执行以下操作：Color('#A25297').alpha(0.65)？

【参考方案1】：

您可以将color 库用于您寻求的操作。它具有类型定义，可以在 typescript 中舒适地使用它。

安装：

npm i color
npm i @types/color

用法：

let Color = require('color');
let cmyColor = Color('#A25297').alpha(0.65);
let colorAsHex = cmyColor.hex();

...巧合的是，这正是您提出的语法。

编辑：

在实际尝试了我提出的解决方案后，很明显结果不会按预期工作。返回的十六进制值不考虑 alpha 的变化。但是，在 lib 解析 this issue 以包含 8 个字母的十六进制表示法之后，它会。

【讨论】：

感谢您的解决方案。从长远来看，它看起来是一个更好的解决方案，但我无法让它发挥作用。我肯定错过了什么。当我尝试这段代码时，抛出了一个错误：“找不到名称‘颜色’”。为了解决这个问题，我添加了一个“import Color from 'color'”，这导致了另一个错误：“Module '"node_modules/@types/color/index"' has no export member 'Color'”。

您的问题是缺少 ES6 导入的结果（颜色库仍然是一种较旧的导入方法）。

【参考方案2】：

好吧，如果你对它进行编程，它就是……

function addAlpha(color: string, opacity: number): string 
    // coerce values so ti is between 0 and 1.
    const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
    return color + _opacity.toString(16).toUpperCase();

addAlpha('FF0000', 1); // returns 'FF0000FF'
addAlpha('FF0000', 0.5); // returns 'FF000080'

当然，您可以通过使用正则表达式检查color 的格式是否正确来改进此功能。

【讨论】：

解决了目的。谢谢！

不透明度未正确填充低值导致意外颜色，我不得不更改不透明度计算以填充零：('0' + _opacity.toString(16)).slice(-2).toUpperCase()