HarmonyOS 鸿蒙Next Image中的colorFilter使用

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Image中的colorFilter使用

有一个png的图片，需要改变它的颜色，在api中看到colorFilter这个方式，请教一下，如果是16进制的颜色应该怎么转换成colorFilter中的参数。

Harmonyos Next教程
3 回复

可以使用如下方法：

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组件使用

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


 0 0   16进制？

16进制转化成10进制的->创建common2D.Color   { a, r, g, b }->drawing.ColorFilter.createBlendModeColorFilter

深色代码主题
复制
private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
深色代码主题
复制
drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);

在HarmonyOS 鸿蒙Next Image中，colorFilter 的使用主要用于改变绘制对象（如图片、形状等）的颜色效果。它允许开发者应用颜色矩阵（Color Matrix）或颜色滤镜（Color Filter）来修改图像的颜色属性。

具体实现时，可以通过GraphicComponent（或相关绘制组件）的setColorFilter方法设置颜色滤镜。colorFilter的类型可以是多种，比如ColorMatrixColorFilter（颜色矩阵滤镜），LightingColorFilter（光照颜色滤镜）等。

例如，若要使用ColorMatrixColorFilter，可以构建一个颜色矩阵，并通过该矩阵调整图像的RGB值。代码示例（伪代码）：

// 创建一个颜色矩阵
float matrix[20] = {
    // 定义颜色矩阵的变换规则
    ...
};

// 使用颜色矩阵创建颜色滤镜
ColorMatrixColorFilter* colorFilter = ColorMatrixColorFilter::Create(matrix);

// 将颜色滤镜应用到绘制对象
myImageComponent->SetColorFilter(colorFilter);

// 注意：在实际使用中，需要释放colorFilter资源，避免内存泄漏。

以上示例展示了如何通过颜色矩阵调整图像颜色。具体矩阵值的设定取决于所需的颜色效果。

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

回到顶部