牙叔教程 简单易学
使用场景
rgb与hsl, 两种色彩模式互相转换
autojs版本
8.7.7-0
解决颜色转换问题的过程
1. 百度
有事百度, 这句话是正确的废话, 我百度了一个小时, 什么csdn, 博客园, 个人博客, 简书, 51cto 等等等等,没一个能用的, 基本都是复制黏贴,
我要把颜色ffff00转成hsl, 结果给我转成了红色
2. 安卓文档
百度是没可能了, 去android开发者官网搜了一下, 也没搜到有用的东西
3, npm
搜索关键词colors, 找到一个模块color-convert, 测试以后, 颜色是正确的, 决定就用它了
npm模块转autojs模块
先说结论, 太难了, 转不动.
1. 转es5
我用babel把js文件转成了es5, 但是报语法错误,
排查了半天, 发现是这两种语法报错
- ((x[2] - y[2]) ** 2)
- for (const keyword of Object.keys(cssKeywords))
2. 转es3
然后我又百度怎么转es3, 百度说babel不支持转es3, 但是可以用typescript转es3
好吧, 那就用ts, ts你们知道吧, 可以说有严格的语法,
毫无意外的, 出现了一堆报错
继续百度, typescript忽略报错, 找到一个命令: // @ts-nocheck
这下ts不报错了, 转换es3也非常顺利
想着, 终于可以开心的用npm模块了, 我就运行项目,
哐当, 又给我来一下, 报错: rgb上没有hsl属性,
我就打印了一下导出的模块, 结果rgb上, 确实没有hsl属性,
然后我就看着这es3代码开始头疼
这代码也太多, 看也看不懂, 就单独把 rgb hsl 转换的代码抽出来,
别的我也用不着
代码讲解
1. hslToRgb
function hslToRgb(hsl) {
const h = hsl[0] / 360;
const s = hsl[1] / 100;
const l = hsl[2] / 100;
let t2;
let t3;
let val;
if (s === 0) {
val = l * 255;
return [val, val, val];
}
if (l < 0.5) {
t2 = l * (1 + s);
} else {
t2 = l + s - l * s;
}
const t1 = 2 * l - t2;
const rgb = [0, 0, 0];
for (let i = 0; i < 3; i++) {
t3 = h + (1 / 3) * -(i - 1);
if (t3 < 0) {
t3++;
}
if (t3 > 1) {
t3--;
}
if (6 * t3 < 1) {
val = t1 + (t2 - t1) * 6 * t3;
} else if (2 * t3 < 1) {
val = t2;
} else if (3 * t3 < 2) {
val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
} else {
val = t1;
}
rgb[i] = val * 255;
}
return rgb;
}
2. rgbToHsl
function rgbToHsl(rgb) {
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
const min = Math.min(r, g, b);
const max = Math.max(r, g, b);
const delta = max - min;
let h;
let s;
if (max === min) {
h = 0;
} else if (r === max) {
h = (g - b) / delta;
} else if (g === max) {
h = 2 + (b - r) / delta;
} else if (b === max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) {
h += 360;
}
const l = (min + max) / 2;
if (max === min) {
s = 0;
} else if (l <= 0.5) {
s = delta / (max + min);
} else {
s = delta / (2 - max - min);
}
return [h, s * 100, l * 100];
}
3. 返回rgb颜色通道值
function 返回rgb颜色通道值(rgb) {
return {
red: colors.red(rgb),
green: colors.green(rgb),
blue: colors.blue(rgb),
alpha: colors.alpha(rgb),
};
}
4. 测试代码
let color = "#ffff00";
let 通道值 = 返回rgb颜色通道值(color);
log(通道值);
let hsl = rgbToHsl([通道值.red, 通道值.green, 通道值.blue]);
log(hsl);
r = hslToRgb([60, 100, 50]);
log(r);
参考文章
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

网友评论