牙叔教程 简单易学
使用场景
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);
参考文章
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
