HarmonyOS 鸿蒙Next 修改图片的颜色colorFilter

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

HarmonyOS 鸿蒙Next 修改图片的颜色colorFilter
修改图片的颜色colorFilter

Harmonyos Next教程
2 回复

该示例通过colorFilter实现了给图像设置颜色滤镜效果。

import { drawing, common2D } from '@kit.ArkGraphics2D';

@Entry
@Component
struct ImageExample3 {
  private imageOne: Resource = $r('app.media.1');
  private imageTwo: Resource = $r('app.media.2');
  @State src: Resource = this.imageOne
  @State src2: Resource = this.imageTwo
  private ColorFilterMatrix: number[] = [1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0]
  private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
  @State DrawingColorFilterFirst: ColorFilter | undefined = undefined
  @State DrawingColorFilterSecond: ColorFilter | undefined = undefined
  @State DrawingColorFilterThird: ColorFilter | undefined = undefined

  build() {
    Column() {
      Image(this.src)
        .width(100)
        .height(100)
        .colorFilter(this.DrawingColorFilterFirst)
        .onClick(() =>{
          this.DrawingColorFilterFirst = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
        })

      Image(this.src2)
        .width(100)
        .height(100)
        .colorFilter(this.DrawingColorFilterSecond)
        .onClick(() =>{
          this.DrawingColorFilterSecond = new ColorFilter(this.ColorFilterMatrix);
        })

      //当加载图片为SVG格式时
      Image($r('app.media.test_self'))
        .width(110).height(110).margin(15)
        .colorFilter(this.DrawingColorFilterThird)
        .onClick(() =>{
          this.DrawingColorFilterThird = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 修改图片的颜色colorFilter的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，如果你想要修改图片的颜色，可以使用Image组件的colorFilter属性。colorFilter属性允许你应用一个颜色过滤器来改变图片的颜色。

具体实现方式如下：

  1. 定义颜色过滤器：首先，你需要定义一个ColorFilter对象。鸿蒙系统提供了多种颜色过滤器，如ColorMatrixColorFilter，它允许你通过颜色矩阵来变换颜色。

  2. 应用颜色过滤器：然后，将这个颜色过滤器应用到Image组件的colorFilter属性上。

示例代码：

// 假设你已经在某个.hml文件中定义了一个Image组件，id为"myImage"
@Entry
@Component
struct MyComponent {
  @State colorFilter: ColorFilter = new ColorMatrixColorFilter(new Float32Array([
    // 这里定义你的颜色矩阵，例如将图片变为灰度
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0, 0, 0, 1, 0
  ]));

  build() {
    Column() {
      Image($r('app.media.myImage'))
        .colorFilter(this.colorFilter)
    }
  }
}

注意：上述代码中的颜色矩阵示例是将图片转换为灰度图。你可以根据需要调整颜色矩阵的值来实现不同的颜色效果。

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

回到顶部