Color Conversion(颜色转换方法)通过在 RGBA、HSLA 和十六进制颜色空间之间转换颜色值,支持动态颜色调整和数据驱动的颜色动画效果。

rgbToHsl(rgbaArray)

将 RGBA 颜色空间中的颜色转换为 HSLA 颜色空间。

参数

rgbaArray :一个包含红色(R)、绿色(G)、蓝色(B)和透明度(A)分量的数组(Array[4]),每个分量的值范围在 0.0 到 1.0 之间。

返回值:转换后的数组(Array[4]),包括色相(H)、饱和度(S)、亮度(L)和透明度(A)分量,各分量的值均在 0.0 到 1.0 范围内。

应用:

// 示例 1:定义一个 RGB 颜色(纯红色)
rgbaColor = [1, 0, 0, 1];
// 将 RGB 颜色转换为 HSL
hslColor = rgbToHsl(rgbaColor);// hslColor 的结果为 [0, 1, 0.5, 1]

//示例 2:获取当前图层的填充颜色
rgbaColor = effect("填充")("颜色");
// 转换为 HSL
hslColor = rgbToHsl(rgbaColor);
// 增加色相值(例如,旋转色相 20%)
hslColor[0] += Math.sin(time)*0.2;
// 将调整后的 HSL 转换回 RGB
newColor = hslToRgb(hslColor);
// 应用新的颜色
newColor;

hslToRgb( hslaArray )

将 HSLA 颜色空间中的颜色转换为 RGBA 颜色空间。这是 rgbToHsl 方法的逆过程。

参数

hslaArray :一个包含色相(H)、饱和度(S)、亮度(L)和透明度(A)分量的数组(Array[4]),每个分量的值范围在 0.0 到 1.0 之间。

返回值:转换后的数组(Array[4]),包括红色(R)、绿色(G)、蓝色(B)和透明度(A)分量,各分量的值均在 0.0 到 1.0 范围内。

应用:

// 示例:定义一个 HSL 颜色(纯红色)
hslaColor = [0, 1, 0.5, 1];
// 将 HSL 颜色转换为 RGB
rgbaColor = hslToRgb(hslaColor);// rgbaColor 的结果为 [1, 0, 0, 1]

hexToRgb( hexString )

十六进制颜色值转换为 RGBA 颜色数组。支持 3 位、6 位(三原色)或 8 位(包含透明度)的十六进制字符串。

参数

hexString :表示十六进制颜色的字符串

例如,"#FF00FF"、"#0F08"、"FFAABB"、"FF5733CC" 等。可选的前缀 0x、0X 或 # 会被忽略,超过 8 位的字符将被忽略。

返回值:转换后的数组(Array[4]),包括红色(R)、绿色(G)、蓝色(B)和透明度(A)分量,各分量的值均在 0.0 到 1.0 范围内。

对于 8 位十六进制颜色,透明度分量会被正确解析。对于 6 位十六进制,透明度默认值为 1.0。

应用:

//示例 1:将 6 位十六进制颜色转换为 RGB
// 定义一个 6 位十六进制颜色
hexValue = "#FF5733";
// 将十六进制颜色转换为 RGBA
rgbaColor = hexToRgb(hexValue);// rgbaColor 的结果为 [1.0, 0.341, 0.2, 1.0]

//示例 2:将 8 位十六进制颜色转换为 RGBA
// 定义一个 8 位十六进制颜色(包含透明度)
hexValueWithAlpha = "#FF5733CC";
// 将十六进制颜色转换为 RGBA
rgbaColor = hexToRgb(hexValueWithAlpha);// rgbaColor 的结果为 [1.0, 0.341, 0.2, 0.8]

//示例 3:从 JSON 数据源获取颜色值
// 假设从 JSON 数据源获取的颜色值
hexFromJSON = data.colorHex; // 例如 "0x00FF00AA"
// 将十六进制颜色转换为 RGBA
rgbaColor = hexToRgb(hexFromJSON);// rgbaColor 的结果为 [0.0, 1.0, 0.0, 0.666]

“点赞行美意,赞赏是鼓励”