【HarmonyOS】【ArkUI 】鸿蒙 开发中如何对颜色进行换算等操作

【问题描述】

怎么将color字符（例如“#F44336”）和rgb相互转化？

1 1.1 rgb和color相互转化

//rgb转化color
  colorHex (color){
    // RGB颜色值的正则
    var reg = /^(rgb|RGB)/;

    if (reg.test(color)) {
      var strHex = "#";
      // 把RGB的3个数值变成数组
      var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
      // 转成16进制
      for (var i = 0; i < colorArr.length; i++) {
        var hex = Number(colorArr[i]).toString(16);
        if (hex === "0") {
          hex += hex;
        }
        strHex += hex;
      }
      return strHex;
    } else {
      return String(color);
    }
  };
  //color转化为rgb
colorRgb(mycolor){
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = mycolor.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
}

1.2获取系统的color的值

console.log("Color.Red===>>>"+Color.Red.valueOf()+"")

2.代码如下

import fileio from '@ohos.fileio';
@Entry
@Component
struct myColor {
//rgb转化color
  colorHex (color){
    // RGB颜色值的正则
    var reg = /^(rgb|RGB)/;

    if (reg.test(color)) {
      var strHex = "#";
      // 把RGB的3个数值变成数组
      var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
      // 转成16进制
      for (var i = 0; i < colorArr.length; i++) {
        var hex = Number(colorArr[i]).toString(16);
        if (hex === "0") {
          hex += hex;
        }
        strHex += hex;
      }
      return strHex;
    } else {
      return String(color);
    }
  };
  //color转化为rgb
colorRgb(mycolor){
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = mycolor.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
}
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('color和rgb相互转化')
        .fontSize(50)
        .onClick(() => {
        console.log("####===>>>"+this.colorHex("RGB(237,98,98)"))
        console.log("####===>>>"+this.colorRgb("#ed6262"))
        //系统color转化为color字符串
          console.log("Color.Red===>>>"+Color.Red.valueOf()+"")
        })
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#ed6262")
    }
    .width('100%')
    .height('100%')
  }
}

运行效果：