autojs颜色转换rgb与hsl互转

牙叔教程 简单易学

使用场景

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);

参考文章

• color-convert

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

bilibili

牙叔教程

微信公众号 牙叔教程

QQ群

747748653