Question

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

在Typescript中是否可以执行以下操作：颜色（'＃A25297'）。alpha（0.65）？

Answer 1

您可以使用color库进行搜索。它具有类型定义，可以在打字稿中轻松使用它。

安装：

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个字母的十六进制表示法。

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

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

2 个答案:

编辑：