HarmonyOS 鸿蒙Next image组件colorfilter问题

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

HarmonyOS 鸿蒙Next image组件colorfilter问题 ui只给了一种颜色的图标，所以我想通过属性去修改图标颜色，发现image的colorfilter可以实现此需求，但是参数是矩阵，又没有提供转换方式，所以不知道如何把rgb颜色或者hex（这种格式的#D8D8D8）格式的颜色转成矩阵的形式。

Harmonyos Next教程
2 回复

参考如下写法：

function hexColorToColorFilter(hexColor: string): ColorFilter {
  let r = 0;
  let g = 0;
  let b = 0;
  let a = 1;
  let hexArr: number[] = [];
  let length = hexColor.length;

  if (length % 2 === 1) {
    hexColor = hexColor.slice(1);
  }

  for (let i = 0; i < hexColor.length / 2; i++) {
    let charCode1 = Number.parseInt(hexColor[i * 2], 16);
    let charCode2 = Number.parseInt(hexColor[i * 2 + 1], 16);
    let hexNumber = charCode1 * 16 + charCode2;
    hexArr.push((hexNumber / 255.0));
    console.debug(hexNumber.toString(16));
  }

  // 大于3表示有透明度
  if (hexArr.length > 3) {
    a = hexArr[0];
    r = hexArr[1];
    g = hexArr[2];
    b = hexArr[3];
  } else {
    r = hexArr[0];
    g = hexArr[1];
    b = hexArr[2];
  }

  let colorFilter: ColorFilter = [0, 0, 0, 0, r,
    0, 0, 0, 0, g,
    0, 0, 0, 0, b,
    0, 0, 0, a, 0];

  return colorFilter;
}

Image组件使用

Image($r('app.media.live_eye'))
  .backgroundColor('#116f8091')
  .objectFit(ImageFit.Fill)
  .width(60)
  .saturate(0.9)
  .height(60)
  .colorFilter(hexColorToColorFilter("#e90f48db"))

更多关于HarmonyOS 鸿蒙Next image组件colorfilter问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS（鸿蒙）Next image组件的colorfilter问题，以下提供直接相关的解答：

在鸿蒙系统中，Next image组件的colorfilter属性用于改变图像的颜色效果。如果遇到colorfilter不生效或应用效果不符合预期的问题，可能的原因及解决方向包括：

  1. 属性设置错误：检查colorfilter属性值的设置是否正确，确保使用的是系统支持的颜色过滤器类型，如ColorFilter.Mode中的Color、LuminanceToAlpha等，并正确设置其参数。

  2. 组件状态影响：某些情况下，image组件的状态（如可见性、启用状态等）可能影响colorfilter的应用。确保组件处于可应用colorfilter的状态。

  3. 版本兼容性问题：不同版本的鸿蒙系统可能对colorfilter的支持存在差异。确认开发环境、测试设备以及目标用户设备的系统版本，确保兼容性。

  4. 代码逻辑错误：检查设置colorfilter的代码逻辑，确保在正确的时机和条件下应用colorfilter。

  5. 资源文件问题：如果colorfilter使用了自定义的颜色资源，检查这些资源文件是否正确加载和引用。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html 。

回到顶部