HarmonyOS 鸿蒙Next Image组件的fillColor、colorFilter、renderMode属性？

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

HarmonyOS 鸿蒙Next Image组件的fillColor、colorFilter、renderMode属性？

fillColor (仅对svg图源生效) 设置填充颜色，设置后填充颜色会覆盖在图片上。

renderMode 设置渲染模式，Template黑白渲染模式。svg类型图源不支持renderMode属性。

colorFilter 为图像设置颜色滤镜效果。创建具有4*5矩阵的颜色过滤器。

请问 colorFilter 这个属性创建的4*5的矩阵赋值的规则是什么？

   //Image($r('app.media.icon_arrow_down')) // png图片
   Image($r('app.media.icon_prompt'))       // svg图片
     .width(100)
     .aspectRatio(1)
     .fillColor(Color.Green) 
   //.colorFilter([1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0]) 
   //.renderMode(ImageRenderMode.Template)

更多关于HarmonyOS 鸿蒙Next Image组件的fillColor、colorFilter、renderMode属性？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

colorFilter要求参数为矩阵。如：

.colorFilter(
  [0,0,0,0,0,
  0,0,0,0,0,
  0,0,0,0,0,
  0.2,0.2,0.2,0.2,0.2,])

矩阵算法规则： 如果输入的滤镜矩阵为： [ r_1,r_2,r_3,r_4,r_5, ] [ g_1，g_2，g_3，g_4，g_5, ] [ b_1,b_2,b_3,b_4,b_5, ] [ a_1,a_2,a_3,a_4,a_5 ] 像素点为[R, G, B, A]
则过滤后的颜色为 [R’, G’, B’, A’]：
R’= r_1R+ r_2G+ r_3B+ r_4A+ r_5
G’ = g_1R + g_2G + g_3B+g_4A+g_5
B’= b_1R + b_2G + b_3B +b_4A + b_5
A’ = a_1R + a_2G+ a_3B +a_4A+a_5

我不知道你想要的颜色效果是什么样的，不过可以参考一下.colorFilter()使用@ohos.graphics.drawing的ColorFilter类型作为入参

从十六进制转换为可用的ColorFilter可以参考以下函数

function translateColor(colorStr: string) {
  let alpha0: number = parseInt(colorStr[1]+colorStr[2], 16);
  let red0: number = parseInt(colorStr[3]+colorStr[4], 16);
  let green0: number = parseInt(colorStr[5]+colorStr[6], 16);
  let blue0: number = parseInt(colorStr[7]+colorStr[8], 16);
  let color: common2D.Color = {
    alpha: alpha0,
    red: red0,
    green: green0,
    blue: blue0
  }
  return drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC_ATOP);
}

其中，可以根据你需要的效果选择createBlendModeColorFilter的BlendMode，构建合适的颜色滤波器

更多关于HarmonyOS 鸿蒙Next Image组件的fillColor、colorFilter、renderMode属性？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在评论区发现一个方法，

但是我想把原图片改为我想要的颜色，如果只加滤镜，展示的颜色可能就不对了～

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 = [r, 0, 0, 0, 0,
                                  0, g, 0, 0, 0,
                                  0, 0, b, 0, 0,
                                  0, 0, 0, a, 0,];
  return colorFilter;
}

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

HarmonyOS 鸿蒙 Next Image 组件的 fillColor、colorFilter、renderMode 属性各自具有不同的功能和用途：

  1. fillColor：

    • fillColor 属性用于设置 Image 组件在图片未加载或加载失败时的填充颜色。当 Image 组件的 src 属性指定的图片资源不可用或加载出错时，组件将显示此填充颜色。

  2. colorFilter：

    • colorFilter 属性允许你为 Image 组件应用颜色滤镜。颜色滤镜可以改变图片的色调、饱和度等，从而实现特定的视觉效果。例如，你可以使用颜色滤镜将图片转换为灰度图，或者应用某种颜色主题。

  3. renderMode：

    • renderMode 属性决定了 Image 组件的渲染模式。鸿蒙系统提供了多种渲染模式，如正常渲染、覆盖渲染等。不同的渲染模式会影响图片的显示效果，例如，覆盖渲染模式可能会使图片具有不同的混合效果或透明度处理。

这些属性在开发鸿蒙应用时，可以帮助你更灵活地控制 Image 组件的显示效果。通过设置这些属性，你可以实现更加丰富的用户界面和用户体验。

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

回到顶部