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]“点赞行美意,赞赏是鼓励”
热门跟贴