可可图片编辑 HarmonyOS（5）滤镜效果

前言

可可图片编辑也实现了滤镜效果，主要是利用 Image组件的 colorFilter 属性实现。

image-20250912193041758

image-20250912195641367

滤镜的关键属性 colorFilter

colorFilter 的主要作用是给图像设置颜色滤镜效果。

其核心原理是使用一个 4x5 的颜色矩阵 对图片的每个像素颜色（RGBA）进行数学变换，从而得到一个新的颜色值。

参数类型：

colorFilter(value: ColorFilter | DrawingColorFilter)

它接受两种类型的参数：

  1. ColorFilter: ArkUI 自带的颜色滤镜对象，主要通过传递一个 4x5 的矩阵数组来使用。

  2. DrawingColorFilter: 来自 @kit.ArkGraphics2D

    绘图模块的、功能更丰富的颜色滤镜对象，提供了多种静态创建方法（如混合模式、矩阵、光照等）。

使用方法 1 ：使用 ColorFilter 和 4x5 颜色矩阵

这是最基础和最灵活的方式。你需要构造一个包含 20 个数字的数组来表示一个 4x5 的矩阵。

image-20250912200608965

1. 矩阵计算规则

矩阵结构如下，它会对每个像素的原始颜色 [R, G, B, A] 进行运算：

输出颜色 [R', G', B', A'] 的计算公式为：

R' = r1*R + r2*G + r3*B + r4*A + r5 * 255
G' = g1*R + g2*G + g3*B + g4*A + g5 * 255
B' = b1*R + b2*G + b3*B + b4*A + b5 * 255
A' = a1*R + a2*G + a3*B + a4*A + a5 * 255

重要提示：计算时，原始颜色值（R,G,B,A）需要先归一化（Normalize）到 [0.0, 1.0] 的浮点数范围（1.0 对应 255）。

示例代码：

后续的效果都可以在当前示例代码上进行修改

@Entry
@Component
struct Index {private grayMatrix: number[] =// 冷色调 (增强蓝色和青色)[0.9, 0, 0, 0, 0, // 略微减弱红色0, 1.0, 0, 0, 0,0, 0, 1.2, 0, 0, // 增强蓝色0, 0, 0, 1, 0]private grayFilter: ColorFilter = new ColorFilter(this.grayMatrix);build() {Column({ space: 20 }) {// 原始图片Image($r('app.media.startIcon')).width(100).height(100)// 使用 ColorFilter 矩阵Image($r('app.media.app_icon')).width(100).height(100).colorFilter(this.grayFilter)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

2. 常用矩阵示例

a) 原图效果（单位矩阵） 保持图片原有色彩，不对其做任何改变。

image-20250912200657027

// 单位矩阵
[1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0]

b) 灰度效果 将图片转换为黑白灰度图。常见的权重公式是 0.299*R + 0.587*G + 0.114*B。

image-20250912200721306

[0.299, 0.587, 0.114, 0, 0,0.299, 0.587, 0.114, 0, 0,0.299, 0.587, 0.114, 0, 0,0,     0,     0,     1, 0]

c) 颜色反转（负片效果） 将每个颜色通道取反。

image-20250912200746913

[-1, 0, 0, 0, 1,0,-1, 0, 0, 1,0, 0,-1, 0, 1,0, 0, 0, 1, 0]

d) 纯色着色（文档中的核心方案） 忽略原图颜色，将其渲染为指定的目标颜色（例如 #4f0f48db）。

image-20250912200834837

  • 将 RGB 通道的前四列系数设为 0，完全丢弃原图颜色信息。
  • 将 RGB 通道的第五列设置为目标颜色归一化后的。
  • Alpha 通道通常保持不变。

假设目标色为 #4f0f48db，其归一化后的值为：

  • A = 0.31 (79/255)
  • R = 0.06 (15/255)
  • G = 0.28 (72/255)
  • B = 0.86 (219/255)

对应的矩阵为：

[0, 0, 0, 0, 0.06, // R' = 0 + 0.06*2550, 0, 0, 0, 0.28, // G' = 0 + 0.28*2550, 0, 0, 0, 0.86, // B' = 0 + 0.86*2550, 0, 0, 1, 0]    // A' = Original A

e) 棕褐色怀旧效果 (Sepia) ,这是一种经典的老照片效果，为图像添加温暖的棕褐色调。

image-20250912201219272

[0.393, 0.769, 0.189, 0, 0,0.349, 0.686, 0.168, 0, 0,0.272, 0.534, 0.131, 0, 0,0,     0,     0,     1, 0
]

f) 亮度调节,整体提升或降低图像的亮度。

image-20250912202852982

// 调整 brightness 值，范围通常在 -1.0 到 1.0 之间
// 正数变亮，负数变暗
const brightness = 0.3; // 增加30%的亮度[1, 0, 0, 0, brightness,0, 1, 0, 0, brightness,0, 0, 1, 0, brightness,0, 0, 0, 1, 0
]

g) 冷色调/暖色调 通过微调不同颜色通道的增益，营造冷暖感觉.

image-20250912202918160

// 暖色调 (增强红色和黄色)
[1.2, 0, 0, 0, 0,0, 1.1, 0, 0, 0,0, 0, 0.9, 0, 0, // 略微减弱蓝色0, 0, 0, 1, 0
]// 冷色调 (增强蓝色和青色)
[0.9, 0, 0, 0, 0, // 略微减弱红色0, 1.0, 0, 0, 0,0, 0, 1.2, 0, 0, // 增强蓝色0, 0, 0, 1, 0
]

使用方法 2 ：使用 DrawingColorFilter（推荐，更简单）

通过 '@kit.ArkGraphics2D' 模块提供的多种静态方法创建滤镜，这种方式通常更简洁易懂。

1. 导入模块

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

2. 使用预置方法创建滤镜

a) 创建混合模式滤镜 (createBlendModeColorFilter)

使用指定的颜色和混合模式（如 BlendMode.SRC_IN）进行混合，非常适合着色。

image-20250912203418225

import { drawing } from '@kit.ArkGraphics2D';// 创建一个红色的，采用 SRC_IN 混合模式的滤镜
// SRC_IN: 最终颜色由源颜色（这里指红色）和目标区域的Alpha共同决定，常用于着色
let colorFilter = drawing.ColorFilter.createBlendModeColorFilter({alpha: 255,red: 255,green: 0,blue: 0}, // 颜色对象，这里是红色drawing.BlendMode.SRC_IN
);@Entry
@Component
struct Index {build() {Column({ space: 20 }) {// 原始图片Image($r('app.media.startIcon')).width(100).height(100)Image($r('app.media.startIcon')).width(100).height(100).colorFilter(colorFilter)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

b) 直接通过矩阵创建 (createMatrixColorFilter)

与原生 ColorFilter 类似，但使用 drawing 模块的接口。

image-20250912203349690

import { drawing } from '@kit.ArkGraphics2D';let matrix = [0.299, 0.587, 0.114, 0, 0,0.299, 0.587, 0.114, 0, 0,0.299, 0.587, 0.114, 0, 0,0, 0, 0, 1, 0
];
let grayFilter = drawing.ColorFilter.createMatrixColorFilter(matrix);@Entry
@Component
struct Index {build() {Column({ space: 20 }) {// 原始图片Image($r('app.media.startIcon')).width(100).height(100)Image($r('app.media.startIcon')).width(100).height(100).colorFilter(grayFilter)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

注意事项

性能：颜色滤镜的运算发生在渲染时，对于大图或频繁操作，可能会有性能开销。建议对处理后的结果进行缓存。

Alpha 通道：在处理透明度时务必小心，错误的矩阵设置可能导致图片完全透明或出现非预期的半透明效果。

对于简单的颜色覆盖/着色，优先推荐使用 drawing.ColorFilter.createBlendModeColorFilter，它的代码更简洁，意图更

清晰。对于复杂的颜色变换（如复古、色调分离等），再考虑使用自定义矩阵。

以往文章

  • 我的iMaHarmonyOS 知识库接入 鸿蒙6 API20 新特性了

    https://mp.weixin.qq.com/s/YsbFQyi5PsndpRUaA9h_dA?token=830743671&lang=zh_CN

  • 鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总

    https://mp.weixin.qq.com/s/ERmgSAIT8B8njFqtyPx9IQ

  • 可可图片编辑 HarmonyOS（4）图片裁剪-canvas

    https://mp.weixin.qq.com/s/2M3f_LNnt0YRo0qEnCnqpA

  • 可可图片编辑 HarmonyOS（3）应用间分享图片

    https://mp.weixin.qq.com/s/n8kkdougB4lqDHjYC7co8g

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/98975.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/98975.shtml
英文地址，请注明出处：http://en.pswp.cn/diannao/98975.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

＜ JS事件循环系列【二】＞ 微任务深度解析：从本质到实战避坑

＜ JS事件循环系列【二】＞ 微任务深度解析：从本质到实战避坑

在上一篇关于 JS 事件循环的文章中，我们提到 “微任务优先级高于宏任务” 这一核心结论，但对于微任务本身的细节并未展开。作为事件循环中 “优先级最高的异步任务”，微任务的执行机制直接影响代码逻辑的正确性，比如Promise.then的…
阅读更多...
STM32 单片机开发 - SPI 总线

STM32 单片机开发 - SPI 总线

一、SPI 总线概念SPI 总线 --- Serial Peripheral Interface，即串行外设接口SPI 是摩托罗拉公司设计的一款 串行、同步、全双工总线；SPI 总线是三线 / 四线制总线，分别是：SPI_SCK（时钟线）、S…
阅读更多...
区域医院云HIS系统源码，云医院管理系统源码，云诊所源码

区域医院云HIS系统源码，云医院管理系统源码，云诊所源码

云HIS源码，云医院管理系统源码，云诊所源码，二级专科医院云HIS系统源代码，有演示云HIS，即云医院管理系统，是一种运用云计算、大数据、物联网等新兴信息技术的医疗信息化解决方案。它重新定义了传统的医院信息…
阅读更多...
Java基础 9.11

Java基础 9.11

1.第三代日期类前面两代日期类的不足分析JDK 1.0中包含了一个java.uti.Date类，但是它的大多数方法已经在JDK1.1引Calendar类之后被弃用了。而Calendar也存在问题是：可变性：像日期和时间这样的类应该是不可变的偏移性：Date中的年份…
阅读更多...
JavaScript 数组过滤方法

JavaScript 数组过滤方法

在 JavaScript 编程中，数组是最常用的数据结构之一，而数组过滤则是处理数据集合的关键操作。filter() 方法提供了一种高效的方式来从数组中筛选出符合特定条件的元素，返回一个新的数组，而不改变原始数组。这种方法在处理对象数组时…
阅读更多...
《sklearn机器学习——数据预处理》离散化

《sklearn机器学习——数据预处理》离散化

sklearn 数据预处理中的离散化（Discretization） 离散化是将连续型数值特征转换为离散区间（分箱/bins）的过程，常用于简化模型、增强鲁棒性、处理非线性关系或满足某些算法对离散输入的要求（如朴素贝叶斯、决…
阅读更多...
PTA算法简析

PTA算法简析

ArkAnalyzer源码初步分析I：https://blog.csdn.net/2302_80118884/article/details/151627341?spm1001.2014.3001.5501 首先，我们必须明确 PTA 的核心工作：它不再关心变量的“声明类型”，而是为程序中的每一个变量和每一个对象字段…
阅读更多...
Vue 3 中监听多个数据变化的几种方法

Vue 3 中监听多个数据变化的几种方法

1. 使用 watch监听多个 ref/reactive 数据import { ref, watch } from vueexport default {setup() {const count ref(0)const name ref()const user reactive({ age: 20 })// 监听多个数据源watch([count, name, () > user.age], // 数组形式传入多个数据源([newCount, …
阅读更多...
第 2 篇：Java 入门实战（JDK8 版）—— 编写第一个 Java 程序，理解基础运行逻辑

第 2 篇：Java 入门实战（JDK8 版）—— 编写第一个 Java 程序，理解基础运行逻辑

用 IntelliJ IDEA 写第一个 Java 8 程序：Hello World 实操指南 作为 Java 初学者，“Hello World” 是你接触这门语言的第一个里程碑。本文会聚焦 Java 8（经典 LTS 版本，企业级开发常用） 和 IntelliJ IDEA（当…
阅读更多...
【GPT入门】第67课 多模态模型实践： 本地部署文生视频模型和图片推理模型

【GPT入门】第67课 多模态模型实践： 本地部署文生视频模型和图片推理模型

【GPT入门】第67课 多模态模型实践： 本地部署文生视频模型和图片推理模型1. 文生视频模型CogVideoX-5b 本地部署1.1 模型介绍1.2 环境安装1.3 模型下载1.4 测试2.ollama部署图片推理模型 llama3.2-vision2.1 模型介绍2.2 安装ollama2.3 下载模型2.4 测试模型2.5 测试…
阅读更多...
C++初阶（6）类和对象（下）

C++初阶（6）类和对象（下）

1. 再谈构造函数（构造函数的2个深入使用技巧） 1.1 构造函数体赋值 在创建对象时，编译器通过调用构造函数，给对象中各个成员变量一个合适的初始值。 虽然上述构造函数调用之后，对象中已经有了一个初始值，…
阅读更多...
容器文件描述符热迁移在云服务器高可用架构的实施标准

容器文件描述符热迁移在云服务器高可用架构的实施标准

在云计算环境中，容器文件描述符热迁移技术正成为保障业务连续性的关键解决方案。本文将深入解析该技术在云服务器高可用架构中的实施标准，涵盖技术原理、实现路径、性能优化等核心维度，为构建稳定可靠的容器化基础设施提供系统化指导。 容器文…
阅读更多...
毫米波雷达液位计如何远程监控水位？

毫米波雷达液位计如何远程监控水位？

引言毫米波雷达液位计作为一种高精度、非接触式的水位监测设备，正逐渐成为智慧水务、环境监测等领域的关键工具。其通过先进的调频连续波（FMCW）技术，实现5mm的测量精度，并支持多种远程通信方式，使用户能够实…
阅读更多...
关于 C++ 编程语言常见问题及技术要点的说明

关于 C++ 编程语言常见问题及技术要点的说明

关于 C 编程语言常见问题及技术要点的说明C 作为一门兼具高效性与灵活性的静态编译型编程语言，自 1985 年正式发布以来，始终在系统开发、游戏引擎、嵌入式设备、高性能计算等领域占据核心地位。随着 C 标准（如 C11、C17、C20）的持…
阅读更多...
【Qt QSS样式设置】

【Qt QSS样式设置】

Qt中的QSS样式设置流程 Qt Style Sheets (QSS) 是Qt框架中用于自定义控件外观的样式表语言，其语法类似于CSS。以下是QSS的设置流程和示例。 QSS设置流程 1. 创建QSS样式表文件或字符串 首先，需要创建QSS样式表，可以是一个单独的.qss文件&…
阅读更多...
使用 Apollo TransformWrapper 生成相机到各坐标系的变换矩阵

使用 Apollo TransformWrapper 生成相机到各坐标系的变换矩阵

使用 Apollo TransformWrapper 生成相机到各坐标系的变换矩阵一、背景二、原理1、什么是变换矩阵？2、为什么需要变换矩阵？3、Apollo 中的坐标系4、Apollo TransformWrapper三、操作步骤1. 设置车辆参数2. 启动静态变换发布3. 查看变换信息4. 播放记录数据…
阅读更多...
硬件（十）IMX6ULL 中断与时钟配置

硬件（十）IMX6ULL 中断与时钟配置

一、OCP 原则（开闭原则）对代码扩展是开放的，允许通过新增代码来扩展功能；对代码的修改是关闭的，尽量避免直接修改已有稳定运行的代码，以此保障代码的稳定性与可维护性。二、中断处理（一&#xf…
阅读更多...
打工人日报#20250913

打工人日报#20250913

打工人日报#20250913 周六，回杭州了，这边居然下雨。 阅读 《小米创业思考》 第七章 技术为本 其中的技术介绍算是比较详细的，架构也很清晰，有一种对自己家产品如数家珍的感觉，对于架构也是经常思考的感觉感恩 和namwei…
阅读更多...
【面试题】RAG核心痛点

【面试题】RAG核心痛点

1. 文档切分粒度不好把控，既担心噪声太多又担心语义信息丢失 这是一个经典难题。切分粒度过大，单个chunk包含过多无关信息（噪声），会干扰LLM理解核心内容；切分过小，则可能割裂句子或段落的完整语…
阅读更多...
网络安全与iptables防火墙配置

网络安全与iptables防火墙配置

iptables基本概念iptables是Linux系统中强大的防火墙工具，它工作在用户空间，通过命令行界面与内核空间的netfilter框架交互，实现数据包过滤、网络地址转换(NAT)等功能。Web服务器防火墙配置实例以下是针对Web服务器的iptables配置步骤&#x…
阅读更多...
最新文章

Copyright @ 2022~2023