HarmonyOS 鸿蒙Next Image组件着色属性

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

HarmonyOS 鸿蒙Next Image组件着色属性 Android 原生ImageView 有个tint属性，可以对其设置任意颜色（颜色格式：#FFC107）的图片。
鸿蒙Image组件colorFilter设置颜色的方式太过复杂，且不知道效果能否满足。
期望鸿蒙也能有相同功能的属性。

android ImageView tint 介绍：https://blog.csdn.net/ezsxrtghjmk/article/details/130344261


更多关于HarmonyOS 鸿蒙Next Image组件着色属性的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

ColorFilter使用不复杂，不考虑其他效果，只改变到指定颜色的话，可以这样设置：

private ColorFilterMatrix: number[] = [
    0, 0, 0, 0, 取值[0,1]，想要的R值/255,
    0, 0, 0, 0, 取值[0,1]，想要的G值/255,
    0, 0, 0, 0, 取值[0,1]，想要的B值/255,
    0, 0, 0, 取值[0,1]，透明度设置, 0
];

给图像设置颜色滤镜效果，入参为一个的4x5的RGBA转换矩阵。

矩阵第一行表示R（红色）的向量值，第二行表示G（绿色）的向量值，第三行表示B（蓝色）的向量值，第四行表示A（透明度）的向量值，4行分别代表不同的RGBA的向量值。

当矩阵对角线值为1，其余值为0时，保持图片原有色彩。

更多关于HarmonyOS 鸿蒙Next Image组件着色属性的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙中改变图片颜色 如果是svg图片使用fillColor，

如果不是svg图片使用ColorFilter

参考：Image-图片与视频-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

属性 ColorFilter的使用demo：显示图片 (Image)-添加常用组件-添加组件-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

HarmonyOS 鸿蒙 Next
Image 组件着色属性主要通过设置 colorFilter 属性来实现。colorFilter 属性允许你为图片应用颜色滤镜，从而改变图片的着色效果。

在鸿蒙系统中，Image 组件的 colorFilter 属性可以接受不同类型的值，包括 ColorFilter 对象或者特定的颜色值。当你为 Image 组件设置一个 colorFilter 时，该滤镜会应用到图片上，使图片呈现出指定的颜色效果。

例如，如果你想要将图片着色为红色，你可以使用 ColorFilter.argb(alpha, red, green, blue) 方法来创建一个红色滤镜，并将其设置为 Image 组件的 colorFilter 属性。在这个方法中，你需要指定 alpha（透明度）、red（红色分量）、green（绿色分量）和 blue（蓝色分量）的值。为了得到纯红色，你可以将 red 设置为最大值 255，而将 green 和 blue 设置为 0。

请注意，colorFilter 属性的应用效果取决于图片本身的颜色和内容。对于某些图片，应用颜色滤镜可能会得到意想不到的结果。因此，在实际应用中，你可能需要尝试不同的颜色滤镜来找到最适合你图片的效果。

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

回到顶部