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

Question

我一直在尝试找到一种方法来为颜色添加不透明度并在打字稿中检索结果颜色的十六进制代码。

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

Answer 1

好吧，如果你编程，它是...

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格式是否正确来改进此功能。

Answer 2

您可以将颜色库用于所需的操作。它具有类型定义，可以在打字稿中舒适地使用它。

安装：

npm i color
npm i @types/color

用法：

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

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

编辑：

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