HarmonyOS 鸿蒙Next无法修改图片的色调(tint color)

HarmonyOS 鸿蒙Next无法修改图片的色调(tint color)

一张png图片,背景是透明的,我们希望在维持透明背景的情况下,改变图片中内容的颜色。 尝试过以下方法: .colorBlend(’#FF3333’)  内容颜色变了,但是透明背景变成了白色。  

2 回复

目前可以使用colorFilter来设置滤镜颜色,可参考以下文档进行实现。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-service-widget-basic-image-V5#%E5%B1%9E%E6%80%A7

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

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

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

计算规则:

如果输入的滤镜矩阵为:像素点为[R, G, B, A]则过滤后的颜色为 [R’, G’, B’, A’]

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:svg类型图源不支持该属性。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5

计算规则参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#colorfilter9

这个demo,可以做到你的效果:

@Entry
@Component
struct ImageEffectsExample {
  build() {
    Column({ space: 5 }) {
      Image($r('app.media.font')).width(100).height(100)
        .colorFilter(
          [0, 0, 0, 0, 96/255,
            0, 0 , 0, 0, 193/255,
            0, 0, 0, 0, 91/255,
            0, 0, 0, 1, 0])
        .backgroundColor(Color.Gray)
    }.width('100%').margin({ top: 5 })
  }
}

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


对于HarmonyOS鸿蒙Next系统无法直接修改图片色调的问题,这里提供一个解决方案:

在HarmonyOS鸿蒙Next中,虽然系统没有直接提供修改图片色调的API,但可以通过设置colorFilter属性来实现类似的效果。colorFilter属性允许你使用一个RGBA转换矩阵来定义滤镜效果,从而改变图片的色调。

具体实现时,需要构建一个4x5的RGBA转换矩阵,其中矩阵的第一行代表红色通道,第二行代表绿色通道,第三行代表蓝色通道,第四行代表透明度通道。通过调整这些通道的值,你可以实现色调的修改。

例如,如果你想要增加图片的红色色调,可以增大矩阵第一行的值,并相应地减小绿色和蓝色通道的值。

请注意,colorFilter的设置可能相对复杂,需要一定的图形编程基础。同时,svg类型的图源不支持该属性。

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

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!