HarmonyOS 鸿蒙Next中如何给Image组件加蒙层？

HarmonyOS 鸿蒙Next中如何给Image组件加蒙层？ 类似安卓Image组件的tint属性，在鸿蒙中如何实现，比如我想给Image组件加个’#94b0fc’的蒙层？

请问有对应的实现办法嘛

5 回复

把RGB十六进制格式的颜色数值转为ARGB 四通道格式

然后为图像设置颜色滤镜效果

private color: common2D.Color = {
  alpha: 255,
  red: 148,
  green: 176,
  blue: 252
};

Image($r('app.media.trade_feedback_ft_close'))
  .width(40)
  .height(40)
  .colorFilter(drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN))

更多关于HarmonyOS 鸿蒙Next中如何给Image组件加蒙层？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-graphics-drawing-colorfilter#createblendmodecolorfilter

你要不然使用stack浮动布局，给图片加一层组件，然后设置背景色和透明的看看能不能实现你要的效果

在HarmonyOS鸿蒙Next中，可通过在Image组件上叠加半透明遮罩实现蒙层效果。使用Stack布局，将Image与一个设置了背景色和透明度的Box组件叠加。示例代码：

Stack() {
  Image($r('app.media.image'))
    .width(100)
    .height(100)
  
  Box()
    .width(100)
    .height(100)
    .backgroundColor('#000000')
    .opacity(0.5)
}

通过调整Box的backgroundColor和opacity属性控制蒙层颜色和透明度。

在HarmonyOS Next中，可以通过Image组件的colorFilter属性实现蒙层效果。使用ColorMatrix.createColorMatrixFilter并设置目标颜色（如#94b0fc）的RGBA矩阵即可。示例代码如下：

import { ColorMatrix } from '@kit.ArkGraphics2D';

Image($r('app.media.example'))
  .colorFilter(
    ColorMatrix.createColorMatrixFilter([
      0, 0, 0, 0, 0.58, // R
      0, 0, 0, 0, 0.69, // G
      0, 0, 0, 0, 0.99, // B
      0, 0, 0, 1, 0     // A
    ])
  )

其中矩阵值需将#94b0fc转换为RGB分量（R:0.58, G:0.69, B:0.99）并填入每行的第五位，Alpha保持为1。此方法会覆盖原图颜色，实现均匀着色效果。

回到顶部