HarmonyOS 鸿蒙Next下实现RGB与HSB颜色值转换以满足UI需求

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next下实现RGB与HSB颜色值转换以满足UI需求 现在UI那边要求从有张图的某个像素点取颜色值，这个我们取完了，取完了之后，UI要求要HSB的S去+10，B去减10。S表示的是饱和度。由于我们api取值取出来的是rgb的值，所以我们这里需要有一个rgb和hsb的一个转化。 所以这块我们需要如何去转化？

Harmonyos Next教程
2 回复

上拿到rgb之后，转化为"#32f232"

参考以下demo：

async function readPixels(pixelMap: PixelMap) {
  const area: image.PositionArea = {
    pixels: new ArrayBuffer(8),
    offset: 0,
    stride: 8,
    region: { size: { height: 1, width: 2 }, x: 100, y: 100 }
  };
  if (pixelMap != undefined) {
    pixelMap.readPixelsSync(area);
  }
  const buffer2 = buffer.from(area.pixels)
  const b = buffer2.readUInt8(0)
  const g = buffer2.readUInt8(1)
  const r = buffer2.readUInt8(2)
  const a = buffer2.readUInt8(3)
  console.log(TAG, r, g, b, a);
  let rightColor =
    `#${a.toString(16)}${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
  console.info('---', rightColor)
}

相关方法demo：

public static rgb2hsv(color: ColorRgb): ColorHsv {
  let r: number = color.r / 255.0, g: number = color.g / 255.0, b: number = color.b / 255.0;
  let max: number = Math.max(r, g, b);
  let min: number = Math.min(r, g, b);
  let delta: number = max - min;
  let h, s, v;
  if (max == min) {
    h = 0;
  } else if (max == r) {
    h = (g >= b ? ((g - b) / delta) * 60 : ((g - b) / delta) * 60 + 360);
  } else if (max == g) {
    h = ((b - r) / delta) * 60 + 120;
  } else if (max == b) {
    h = ((r - g) / delta) * 60 + 240;
  }
  s = (max == 0 ? 0 : delta / max);
  v = max;
  return {
    h: h,
    s: s,
    v: v
  };
}

暂时没有相关api，只有手动转换

HSV就是HSB

更多关于HarmonyOS 鸿蒙Next下实现RGB与HSB颜色值转换以满足UI需求的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）Next系统中，实现RGB与HSB（HSV）颜色值转换以满足UI需求，可以通过以下方式进行：

RGB转HSB：

  1. 计算色调H：

    • 当R=G=B时，H=0（无色差）。
    • 根据最大值与最小值差异及位置，通过反正切函数或分段计算得到H值，范围为0-360度。

  2. 计算饱和度S：

    • 当最大值为0时，S=0（无色）。
    • 否则，S = (最大值 - 最小值) / 最大值，范围为0-1。

  3. 计算亮度B（或V，值相同）：

    • B = 最大值 / 255，范围为0-1。

HSB转RGB：

  1. 根据H值确定色相区间。
  2. 根据S和V值及色相区间，通过插值计算得到R、G、B值。
  3. 注意处理H=360度或0度的特殊情况，以及S=0时的无色情况。

在鸿蒙开发中，你可以将这些算法封装成函数，并在UI组件需要颜色转换时调用。确保你的转换函数能够处理所有边界条件，如RGB或HSB中的值为0或最大值的情况。

这些转换不涉及特定的编程语言特性，而是基于数学计算，因此可以直接在鸿蒙的开发环境中实现。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部