HarmonyOS 鸿蒙Next image图标颜色更改及亮度调节方法：请问image图标如何变成其他颜色，类似Android里的tint或colorFilter功能，同时image组件应如何调节亮度？

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

HarmonyOS 鸿蒙Next image图标颜色更改及亮度调节方法：请问image图标如何变成其他颜色，类似Android里的tint或colorFilter功能，同时image组件应如何调节亮度？

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

Harmonyos Next教程
3 回复
1、image使用svg格式的话可以用fillColor格式改变颜色，fillColor设置的填充颜色会覆盖在图片上。fillColor属性仅对svg图源生效，设置后会替换svg图片的fill颜色。如果svg图的源码没有fill填充的话，该属性不会生效。
2、导入图像处理（[@ohos](/user/ohos).multimedia.image）和图像效果（[@ohos](/user/ohos).effectKit）模块，对图像进行处理并调节亮度。
import image from "[@ohos](/user/ohos).multimedia.image";
import effectKit from "[@ohos](/user/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
svg格式的图标可以通过.fillColor(Color.Red)修改颜色

在HarmonyOS鸿蒙Next中，更改image图标颜色及调节亮度的方法如下：

更改Image图标颜色

  • 类似于Android的tint或colorFilter功能，在HarmonyOS中，你可以使用fillColor属性配合系统资源或自定义颜色值来改变SVG格式图标的绘制颜色。
  • 对于非SVG图片，可以通过设置不同颜色主题的资源文件（如color.json）并应用相应的主题来实现颜色的更改。

调节Image组件亮度

  • 可以使用EffectKit来实现对图片亮度的调节。EffectKit提供了丰富的图像处理能力，包括亮度、灰度、动态模糊等效果。
  • 具体实现步骤包括将图片转换成PixelMap，然后使用EffectKit创建效果并应用亮度调节，最后获取处理后的PixelMap并显示。

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

回到顶部