可可图片编辑 HarmonyOS(5)滤镜效果

可可图片编辑 HarmonyOS(5)滤镜效果

前言

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

滤镜的关键属性 colorFilter

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

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

参数类型:

它接受两种类型的参数:

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

  2. DrawingColorFilter: 来自 @kit.ArkGraphics2D

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

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

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

1. 矩阵计算规则

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

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

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

示例代码:

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

2. 常用矩阵示例

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区
  • 将 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)

对应的矩阵为:


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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

使用方法 2 :使用 DrawingColorFilter(推荐,更简单)

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

1. 导入模块

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

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

使用指定的颜色和混合模式(如 BlendMode.SRC_IN)进行混合,非常适合着色。

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

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

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

可可图片编辑 HarmonyOS(5)滤镜效果-鸿蒙开发者社区

注意事项

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

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

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

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

以往文章

相关推荐
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗4 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1006 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔666 小时前
flutter实现web端实现效果
前端·flutter