HarmonyOS鸿蒙Next中image组件如何调节亮度

HarmonyOS鸿蒙Next中image组件如何调节亮度 请问image 图标怎么变成其他的颜色，类似android里的tint或colorfliter, image组件怎么调节亮度？

4 回复

1、image使用svg格式的话可以用fillColor格式改变颜色，fillColor设置的填充颜色会覆盖在图片上。fillColor属性仅对svg图源生效，设置后会替换svg图片的fill颜色。如果svg图的源码没有fill填充的话，该属性不会生效。

2、导入图像处理（@ohos.multimedia.image）和图像效果（@ohos.effectKit）模块，对图像进行处理并调节亮度。

import image from "@ohos.multimedia.image";
import effectKit from "@ohos.effectKit";
const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
image.createPixelMap(color, opts).then((pixelMap) => {
let bright = 1;
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
headFilter.blur(bright);
}
})

更多图片处理可以参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5

更多关于HarmonyOS鸿蒙Next中image组件如何调节亮度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


svg格式的图标可以通过.fillColor(Color.Red)修改颜色

在HarmonyOS鸿蒙Next中，调节image组件的亮度可以通过Image组件的filter属性实现。filter属性允许你应用各种图像效果，包括亮度调节。具体来说，可以使用brightness滤镜来调整图像的亮度。

以下是一个示例代码片段，展示如何使用brightness滤镜来调节image组件的亮度：

import { Image, BrightnessFilter } from '@ohos.agp.components';

// 创建Image组件
let image = new Image(this);

// 设置图像源
image.src = 'resources/base/media/image.png';

// 创建亮度滤镜
let brightnessFilter = new BrightnessFilter(1.5); // 1.5表示亮度增加50%

// 应用滤镜
image.filter = brightnessFilter;

在这个示例中，BrightnessFilter的构造函数接受一个参数，该参数表示亮度的倍数。值为1表示原始亮度，大于1表示增加亮度，小于1表示降低亮度。例如，1.5表示亮度增加50%，0.5表示亮度降低50%。

通过这种方式，你可以在HarmonyOS鸿蒙Next中轻松调节image组件的亮度。

在HarmonyOS鸿蒙Next中，image组件本身不直接提供亮度调节功能。但可以通过以下方式实现亮度调节：

  1. 使用Canvas组件：通过Canvas绘制图像，并利用globalAlpha属性调整透明度，间接实现亮度效果。
  2. 使用PixelMap：通过PixelMap获取图像像素数据，手动调整每个像素的亮度值，再重新绘制图像。
  3. CSS滤镜：在image组件上应用CSS滤镜，如filter: brightness(1.5);，直接调整亮度。

示例代码（CSS滤镜）：

image {
    filter: brightness(1.5); /* 亮度增加50% */
}

选择适合的方法根据具体需求实现亮度调节。

回到顶部