目录前言什么是 Sepia 棕褐色滤镜项目背景与环境鸿蒙 ArkGraphics2D 与 ColorFilter API 解析颜色矩阵数学原理5.1 单位矩阵恒等变换5.2 标准 Sepia 变换矩阵5.3 线性插值Lerp实现强度控制项目搭建与配置6.1 创建 HarmonyOS NEXT 工程6.2 理解 build-profile.json56.3 模块路由与页面注册Index.ets 完整代码逐段解析7.1 文件头部注释与 import 语句7.2 组件结构与状态变量声明7.3 颜色矩阵定义7.4 核心算法线性插值方法7.5 ColorFilter 工厂方法7.6 build() 方法UI 布局详解7.7 Image 组件与 colorFilter 属性绑定7.8 Slider 滑块实现强度调节7.9 Progress 进度条与 Button 交互编译与调试经验8.1 常见编译错误及解决方案8.2 API 版本兼容性检查效果展示与交互体验性能分析与优化建议扩展方向总结前言HarmonyOS NEXT 是华为全新自研的操作系统彻底去除了 AOSP 代码全面拥抱鸿蒙原生生态。ArkTSArk TypeScript作为鸿蒙原生应用的首选开发语言在 TypeScript 语法基础上扩展了声明式 UI 构建能力为开发者提供了一套从「状态 → 视图」的响应式编程范式。在图像处理领域棕褐色Sepia滤镜 是最经典的复古风格效果之一。它将彩色图像转换为暖棕色调唤起人们对老照片的记忆。本文将以一个完整的 ArkTS 项目为载体深入讲解如何利用鸿蒙原生 drawing.ColorFilter API通过 颜色矩阵变换 实现可交互的 Sepia 滤镜并融入 滑块强度控制 和 一键对比 等功能。无论你是刚接触鸿蒙开发的新手还是已经有一定经验、希望深入了解 2D 图形绘制 API 的开发者这篇文章都将为你提供从理论到实践的全面参考。什么是 Sepia 棕褐色滤镜Sepia棕褐色是一种源自 19 世纪摄影技术的色调。早期的照片冲洗过程中金银盐颗粒会被硫化钠处理形成棕褐色的化合物从而使照片呈现出温暖的棕色调并显著延长照片的保存寿命。在数字图像处理领域Sepia 效果通过 颜色矩阵变换 来模拟这种化学过程。其核心思路是对图像中每一个像素的 RGB 三个通道进行加权混合将原来的色彩空间映射到一个以棕色系为主的色彩空间同时保留图像的明暗层次。原始彩色图像 Sepia 处理后色彩丰富冷色调保留 整体偏暖棕色复古感强RGB 通道独立 RGB 通道按权重混合适合现代照片 模拟百年老照片在鸿蒙 ArkTS 中我们不需要手动逐像素处理——drawing.ColorFilter 提供了硬件加速的颜色矩阵变换能力在 GPU 层面完成所有像素运算效率极高。项目背景与环境本文示例项目基于以下开发环境项目 版本/值操作系统 Windows 11IDE DevEco Studio 对应 HarmonyOS SDK目标 SDK HarmonyOS NEXT API 126.1.1.24开发语言 ArkTSArk TypeScript构建工具 hvigor鸿蒙 Gradle 等价工具项目类型 Stage 模型 单模块 entry项目名称Demo06302页面路由pages/Index 单页面应用核心依赖kit.ArkGraphics2D提供 drawing 命名空间鸿蒙 ArkGraphics2D 与 ColorFilter API 解析在 HarmonyOS NEXT 中2D 图形绘制能力被整合到 kit.ArkGraphics2D 套件Kit中。这个 Kit 包含了多个底层图形模块kit.ArkGraphics2D├── drawing ← 来自 ohos.graphics.drawing核心 2D 绘制 API├── effectKit ← 来自 ohos.effectKit图像滤镜效果├── common2D ← 来自 ohos.graphics.common2D颜色、点、矩形等基础类型├── text ← 来自 ohos.graphics.text文本排版└── uiEffect ← 来自 ohos.graphics.uiEffectUI 特效本文使用的 ColorFilter 类位于 drawing 命名空间中其继承结构如下drawing.ColorFilter├── createMatrixColorFilter(matrix: number[]): ColorFilter ← 本文核心├── createBlendModeColorFilter(color, mode): ColorFilter├── createComposeColorFilter(outer, inner): ColorFilter├── createLinearToSRGBGamma(): ColorFilter├── createSRGBGammaToLinear(): ColorFilter└── createLumaColorFilter(): ColorFiltercreateMatrixColorFilter 方法详解static createMatrixColorFilter(matrix: Array): ColorFilter参数 matrix 是一个长度为 20 的 number 数组表示一个 4 行 × 5 列 的颜色变换矩阵。它的运算规则是| R’ | | a00 a01 a02 a03 a04 | | R || G’ | | a10 a11 a12 a13 a14 | × | G || B’ | | a20 a21 a22 a23 a24 | | B || A’ | | a30 a31 a32 a33 a34 | | A || 1 |其中 [R, G, B, A] 是输入像素的颜色分量范围 0~1[R’, G’, B’, A’] 是变换后的输出。最后一列的 [a04, a14, a24, a34] 是偏移量用于整体增加或减少某个通道的值。展开公式如下R’ a00×R a01×G a02×B a03×A a04G’ a10×R a11×G a12×B a13×A a14B’ a20×R a21×G a22×B a23×A a24A’ a30×R a31×G a32×B a33×A a34注意 矩阵元素在 drawing.ColorFilter 中没有值域限制可以大于 1 或小于 0这与 effectKit.Filter.setColorMatrix() 有所区别——后者要求每个元素在 [0, 1] 范围内。颜色矩阵数学原理5.1 单位矩阵恒等变换单位矩阵是所有颜色变换的「原点」。当我们不希望图像发生任何变化时使用单位矩阵| 1 0 0 0 0 || 0 1 0 0 0 || 0 0 1 0 0 || 0 0 0 1 0 |对应到代码中的 20 元素数组private readonly identityMatrix: number[] [1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0,];验证以红色通道为例R’ 1×R 0×G 0×B 0×A 0 R输出等于输入保持不变。5.2 标准 Sepia 变换矩阵Sepia 效果的核心是一个固定矩阵该矩阵源于摄影工业界经过大量视觉测试得到的标准权重| 0.393 0.769 0.189 0 0 | ← 新 R 39.3% 原R 76.9% 原G 18.9% 原B| 0.349 0.686 0.168 0 0 | ← 新 G 34.9% 原R 68.6% 原G 16.8% 原B| 0.272 0.534 0.131 0 0 | ← 新 B 27.2% 原R 53.4% 原G 13.1% 原B| 0 0 0 1 0 | ← 新 A 原 AAlpha 通道不变对应代码private readonly sepiaMatrix: number[] [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,];这个矩阵是如何工作的 我们以一个蓝色像素为例R0, G0, B1R’ 0.393×0 0.769×0 0.189×1 0.189得到少量红色分量G’ 0.349×0 0.686×0 0.168×1 0.168得到少量绿色分量B’ 0.272×0 0.534×0 0.131×1 0.131蓝色被大幅削弱结果原本的纯蓝色变成了深棕褐色。同样原图中的红色会被增强绿色也会被混合——最终所有色彩都被「拉」向棕色调色板。为什么这三个行向量行向量是这些特定数值这三行向量实际上是将 RGB 通道映射到三个不同的灰阶权重然后给每个输出通道分配不同的权重组合输出通道 红色权重 绿色权重 蓝色权重 效果R’ 0.393 0.769 0.189 偏暖增强红/绿G’ 0.349 0.686 0.168 偏中性B’ 0.272 0.534 0.131 偏暗削弱蓝色最终三个通道的数值关系为 R’ G’ B’这正是棕褐色的 RGB 特征较高的红色和绿色、较低的蓝色。5.3 线性插值Lerp实现强度控制为了让用户能够平滑地控制滤镜强度我们在「单位矩阵」强度 0%和「全 Sepia 矩阵」强度 100%之间进行 线性插值Linear Interpolation简称 Lerp。插值公式result[i] identity[i] t × (sepia[i] - identity[i])其中 t 的取值范围为 [0.0, 1.0]对应滑块从 0% 到 100%。插值过程示例以矩阵的第一个元素 a00 为例单位矩阵的 a00 1.0Sepia 矩阵的 a00 0.393当 t 0.5强度 50%时result[0] 1.0 0.5 × (0.393 - 1.0) 0.6965这意味着在 50% 强度下红色通道只有约 30% 的混合效果被应用图像呈现「微微泛棕」的观感。为什么使用线性插值而不是分段开关线性插值带来两个关键优势平滑过渡用户拖动滑块时滤镜效果连续变化不会出现突兀的跳变。精细控制用户可以找到「恰好合适」的强度值而不只是在「开/关」之间二选一。在实际测试中Sepia 强度在 40%~70% 之间最为自然——既能感受到复古氛围又不会过度失真。这也是代码中将默认值设为 60% 的原因。项目搭建与配置6.1 创建 HarmonyOS NEXT 工程在 DevEco Studio 中新建工程时的关键选择Application name Demo06302Bundle name com.example.demo0630Project type ApplicationDevice type Phone本文也适用于 TabletLanguage ArkTSAPI version 6.1.1(24) —— 即 API 12Model StageStage 模型是 HarmonyOS NEXT 推荐的应用模型6.2 理解 build-profile.json5项目根目录下的 build-profile.json5 是鸿蒙项目的构建配置文件类似于 Android 的 build.gradle{“app”: {“products”: [{“name”: “default”,“targetSdkVersion”: “6.1.1(24)”,“compatibleSdkVersion”: “6.1.1(24)”,“runtimeOS”: “HarmonyOS”,}],},}两个关键字段字段 含义targetSdkVersion 目标 SDK 版本决定应用可以使用的 API 范围compatibleSdkVersion 兼容的最低 SDK 版本项目中的 entry/build-profile.json5 还指定了 apiType: “stageMode”表示使用 Stage 模型。6.3 模块路由与页面注册entry/src/main/resources/base/profile/main_pages.json 定义了页面的路由表{“src”: [“pages/Index”]}这意味着应用启动后EntryAbility 会加载 pages/Index 页面。如果要添加更多页面比如一个帮助页只需在此数组中追加即可。EntryAbility.ets 中的关键代码windowStage.loadContent(‘pages/Index’, (err) {if (err.code) {hilog.error(DOMAIN, ‘testTag’, ‘Failed to load the content. Cause: %{public}s’, JSON.stringify(err));return;}});7. Index.ets 完整代码逐段解析7.1 文件头部注释与 import 语句/**复古怀旧棕褐色风格 —— Sepia 棕褐色滤镜布局演示【核心技术】sephia valuesephia棕褐色滤镜通过 drawing.ColorFilter.createMatrixColorFilter()构造 4×5 棕褐色颜色矩阵对图像每个像素的 RGBA 通道进行线性变换。value强度控制使用 Slider 滑块组件控制滤镜强度值0%~100%在「原始图像」与「全强度棕褐色」之间线性插值lerp。【布局要点】Scroll Column 弹性布局自上而下排列标题区、图像区和控制区。Image 组件绑定 colorFilter 属性实时响应 State 强度值变化。滑块Slider与进度条联动直观展示强度数值。对比按钮一键切换「原图/滤镜」便于观察效果差异。*/import { drawing } from ‘kit.ArkGraphics2D’;知识点kit.ArkGraphics2D 与 kit.ArkUI 的区别ArkUI 提供 UI 组件Text、Image、Column 等ArkGraphics2D 提供底层 2D 图形能力绘制、颜色滤镜、文本排版等。它们是互补关系而非替代关系。为什么不能 import { ColorFilter } from ‘kit.ArkGraphics2D’ 因为 ArkGraphics2D 以命名空间方式导出——ColorFilter 是 drawing 命名空间内部的类必须通过 drawing.ColorFilter 访问。7.2 组件结构与状态变量声明EntryComponentstruct Index {State sepiaIntensity: number 0.6;State filterEnabled: boolean true;…}Entry 装饰器标记该组件为页面的入口点相当于 Android 的 Entry Activity 或 Flutter 的 runApp()。每个页面有且只能有一个 Entry 组件。Component 装饰器声明这是一个自定义组件拥有独立的生命周期和状态管理。State 装饰器这是 ArkTS 响应式编程的核心。被 State 修饰的变量当其值发生变化时所有依赖于该变量的 UI 会自动重新渲染。变量只能在组件内部被修改外部不能直接赋值。每次修改都会触发 build() 方法的重新执行虚拟 DOM diff。在本例中sepiaIntensity 变化 → Slider、Progress、Image 全部自动更新filterEnabled 变化 → 按钮文本、Image 滤镜状态自动切换7.3 颜色矩阵定义private readonly identityMatrix: number[] [1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0,];private readonly sepiaMatrix: number[] [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,];设计决策为什么使用 private readonly 而不是 State这两个矩阵是 常量数据——它们在应用的整个生命周期中不会变化。使用 readonly 既向编译器表明这一点有利于优化也防止了程序中的意外修改。只有 sepiaIntensity 和 filterEnabled 是需要响应 UI 变化的 状态。7.4 核心算法线性插值方法private lerpColorMatrix(t: number): number[] {const result: number[] [];for (let i 0; i 20; i) {result[i] this.identityMatrix[i] t * (this.sepiaMatrix[i] - this.identityMatrix[i]);}return result;}时间复杂度 O(20) —— 每次调用只做 20 次浮点运算性能开销微乎其微。这 20 次运算在 JavaScript 引擎层面只需不到 1μs。为什么不直接预计算所有 101 个强度等级的矩阵内存 vs 计算 预计算 101 个矩阵 × 20 个数 ≈ 2,020 个浮点数约 16KB 内存。计算一次只需要 20 次运算。两者在手机上几乎没有差别。灵活性 如果将来把步长从 1% 改为 0.1%滑块范围 0~1000预计算方案就需要存储 1001 个矩阵。代码简洁 一个 5 行的循环远胜于 101 个硬编码数组。7.5 ColorFilter 工厂方法private getCurrentFilter(): drawing.ColorFilter | null {if (!this.filterEnabled) {return null;}const matrix this.lerpColorMatrix(this.sepiaIntensity);return drawing.ColorFilter.createMatrixColorFilter(matrix);}返回值设计ColorFilter | null当滤镜关闭时返回 nullImage 组件的 colorFilter() 属性接受 ColorFilter | nullnull 表示「不使用任何滤镜显示原始图像」这样设计的好处是不需要用两个 Image 组件分别显示原图和滤镜图然后通过条件渲染切换——一个 Image 一个 null/非 null 的 ColorFilter 就解决了问题。drawing.ColorFilter.createMatrixColorFilter(matrix) 的内部机制这个 API 在底层会校验传入数组长度是否为 20不是则抛出 BusinessError将矩阵送入 GPU 硬件通过 OpenGL ES 或 Vulkan 管线返回一个不透明的 ColorFilter 句柄当 Image 组件渲染时该句柄被应用到纹理采样阶段因此所有的像素运算是 GPU 硬件加速 的。即使分辨率为 4096×2160每秒更新 60 帧也毫无压力。7.6 build() 方法UI 布局详解本节的布局层次结构如下图所示伪代码Scroll (全屏纵向滚动)└── Column (flex 容器width100%, padding8)├── Column (标题区奶油色背景)│ ├── Text “ 复古棕褐色滤镜” (26fp, 加粗, 深棕)│ ├── Text “Sepia Tone Filter” (14fp, 浅棕)│ └── Text “说明描述…” (12fp, 灰棕, 居中)│├── Column (图像展示区)│ ├── Image (app.media.background, 90%宽, 圆角12)│ │ └── .colorFilter(getCurrentFilter()) ← 核心绑定│ └── Row (状态标签行)│ ├── Text “ 棕褐色滤镜” / “️ 原始图像”│ └── Text “强度: 60%”│├── Column (控制区白色背景圆角卡片)│ ├── Text “滤镜强度Sepia Intensity” (13fp, 棕色)│ ├── Row (滑块行)│ │ ├── Slider (min0, max100, step1, OutSet)│ │ │ └── onChange → sepiaIntensity val / 100│ │ └── Text “60%” (16fp, 加粗)│ ├── Progress (Linear, 0~100, 高度6)│ └── Row (按钮行)│ ├── Button “ 点击查看原图” (胶囊)│ │ └── onClick → filterEnabled !filterEnabled│ └── Button “↺ 重置” (胶囊, 边框)│ └── onClick → 重置到 60%│└── Text “布局方式鸿蒙原生 ArkTS 布局…” (11fp, 灰色)7.6.1 为什么使用 Scroll Column 而不是 ColumnScroll() {Column() { … }}.width(‘100%’).height(‘100%’)在手机屏幕尺寸有限的情况下如果内容高度超过了视口高度Column 默认会溢出裁剪。使用 Scroll 包裹后内容可纵向滚动底部的内容不会被截断在小屏设备上同样可用如果不使用 Scroll当用户在软键盘弹出时虽然本例没有输入框UI 也可能被挤压。7.6.2 布局中的颜色主题整个 UI 采用了 棕色系调色板与 Sepia 效果主题一致用途 色值 色名标题文字 #3E2723 深棕 900Material Design副标题/提示 #8D6E63 棕 400说明文字 #A1887F 棕 300背景标题区 #FFF3E0 橙 50奶油色背景整体 #F5F5F5 灰 100暖灰卡片背景 #FFFFFF 纯白底部文字 #BCAAA4 棕 200这种色彩搭配营造出温暖、怀旧的视觉氛围与棕褐色滤镜的主题相得益彰。7.7 Image 组件与 colorFilter 属性绑定Image($r(‘app.media.background’)).width(‘90%’).aspectRatio(1.6).borderRadius(12).objectFit(ImageFit.Cover).colorFilter(this.getCurrentFilter()) // ← 核心绑定.margin({ bottom: 12 });$r(‘app.media.background’) 是鸿蒙的资源引用语法相当于 Android 的 R.drawable.background。系统会自动根据设备密度ldpi/mdpi/hdpi/xhdpi 等加载对应资源。.aspectRatio(1.6) 设置宽高比为 16:10确保图片在不同屏幕宽度下保持统一的比例不会因为 width(‘90%’) 而变形。.objectFit(ImageFit.Cover) 指定图片缩放模式为覆盖——保持图片宽高比裁剪超出部分以填满容器。这与 CSS 的 object-fit: cover 语义相同。调用频率分析getCurrentFilter() 方法在以下情况下被调用State sepiaIntensity 变更 → 每次滑块拖动~30 次/秒State filterEnabled 变更 → 点击按钮时每次调用都会创建一个新的 ColorFilter 实例。这是否会有性能问题答案是否定的。ColorFilter 只是一个轻量级的句柄对象内部指向 GPU 端的着色器程序。创建成本极低毫秒级而且 ArkUI 的渲染管线会自动合并相邻帧的更新不会造成掉帧。7.8 Slider 滑块实现强度调节Slider({min: 0,max: 100,value: this.sepiaIntensity * 100,step: 1,style: SliderStyle.OutSet,}).width(‘80%’).trackColor(‘#D7CCC8’).selectedColor(‘#8D6E63’).blockColor(‘#5D4037’).onChange((val: number) {this.sepiaIntensity val / 100;});Slider 的参数设计参数 值 说明min 0 最小值0%max 100 最大值100%value sepiaIntensity * 100 当前值将 0.0~1.0 映射到 0~100step 1 步长 1%共 101 个档位style SliderStyle.OutSet 滑块凸出轨道另一种是 InSet为什么内部用 0.0~1.0Slider 用 0~100这是一个常见的「关注点分离」设计Slider 的 UI 层使用整数0100更符合人的自然认知百分比而内部计算层使用浮点数0.01.0更方便数学运算直接作为插值参数 t。两者之间通过 val / 100 转换边界清晰。onChange 回调的触发时机用户拖动滑块时连续触发手指每移动一个 step 触发一次用户点击轨道时触发一次用户松开手指时不会额外触发因此 sepiaIntensity 会在拖动过程中被持续更新Image 的滤镜效果也随之实时变化。7.9 Progress 进度条与 Button 交互进度条Progress({value: this.sepiaIntensity * 100,total: 100,type: ProgressType.Linear,}).width(‘90%’).height(6).color(‘#8D6E63’).backgroundColor(‘#EFEBE9’).borderRadius(3);Progress 在这里的角色是 双重可视化Slider 提供了「交互性」——用户用手拖动Progress 提供了「可读性」——用户用眼阅读两者的值绑定到同一个 State 变量确保始终同步。为什么 Slider 已经有了轨道还需要一个单独的 ProgressSlider 的轨道是交互控件通常比较窄默认约 4dp其视觉变化不够明显。额外放置一个 6dp 高的 Progress 条可以让用户在静止状态下也能一目了然地看到当前强度值尤其是在需要精确调参时进度条的填充长度比滑块位置更容易目视判断。对比按钮Button() {Text(this.filterEnabled ? ‘ 点击查看原图’ : ‘ 点击查看滤镜’).fontSize(15).fontColor(‘#FFFFFF’);}.type(ButtonType.Capsule).width(200).height(44).backgroundColor(this.filterEnabled ? ‘#8D6E63’ : ‘#A1887F’).onClick(() {this.filterEnabled !this.filterEnabled;});设计点按钮文本和颜色随状态同步变化当 filterEnabled true滤镜开启按钮显示 点击查看原图背景深棕当 filterEnabled false滤镜关闭按钮显示 点击查看滤镜背景浅棕这种 互斥文本 的设计比固定显示切换要直观得多——用户知道点击后会看到什么减少试错成本。重置按钮Button() {Text(‘↺ 重置’).fontSize(13).fontColor(‘#8D6E63’);}.type(ButtonType.Capsule).width(80).height(40).backgroundColor(‘#EFEBE9’).border({ width: 1, color: ‘#D7CCC8’ }).onClick(() {this.sepiaIntensity 0.6;this.filterEnabled true;});重置按钮同时修改两个状态变量将强度重置为 60%并确保滤镜处于开启状态。这是一个「一键回到初始状态」的快捷操作。编译与调试经验8.1 常见编译错误及解决方案在本文项目的实际开发过程中遇到了两个编译错误错误一Module ‘“kit.ArkUI”’ has no exported member ‘ColorFilter’ERROR: ArkTS Compiler ErrorError Message: Module ‘“kit.ArkUI”’ has no exported member ‘ColorFilter’.错误原因 ColorFilter 类不在 kit.ArkUI 中而是在 kit.ArkGraphics2D 的 drawing 子模块中。解决方案import { ColorFilter } from ‘kit.ArkUI’;import { drawing } from ‘kit.ArkGraphics2D’;后续使用时改为 drawing.ColorFilter.createMatrixColorFilter()。修复合集 在构建流程中hvigor 会依次检查 import 语句——如果导入的模块不存在或模块中没有该导出项立即报错并中断构建。错误二Property ‘scrollable’ does not exist on type ‘ColumnAttribute’ERROR: ArkTS Compiler ErrorError Message: Property ‘scrollable’ does not exist on type ‘ColumnAttribute’.错误原因 Column 组件没有 scrollable() 方法——在 HarmonyOS NEXT API 12 中Column 不支持直接设置可滚属性必须使用 Scroll 组件包装。解决方案Column() { … }.scrollable(ScrollDirection.Vertical);Scroll() { Column() { … } }原理 Scroll 是一个独立的容器组件专门负责滚动交互。它内部只能包含一个子组件通常用 Column 或 Row 作为其唯一的子节点。8.2 API 版本兼容性检查colorFilter 属性在 Image 组件上的支持情况SDK 版本 是否支持 备注API 9 (3.1) ❌ 不支持 Image 不支持颜色滤镜API 10 (4.0) ❌ 不支持 可通过 PixelMap effectKit 绕过API 11 (5.0) ⚠️ 部分支持 仅有有限滤镜API 12 (6.1) ✅ 完整支持 本文使用的版本API 14 ✅ 完整支持 增加更多扩展能力如果你在旧版本 SDK 上编译当遇到 colorFilter 报错时请检查 build-profile.json5 中的 targetSdkVersion。效果展示与交互体验本应用运行后的界面分为三个区域顶部标题区显示 复古棕褐色滤镜标题英文副标题 “Sepia Tone Filter”简短的交互提示文字奶油色背景#FFF3E0营造温暖氛围中部图像展示区显示项目自带图片background.png图片宽高比 1.6:1圆角 12dp根据 filterEnabled 状态显示 棕褐色滤镜或️ 原始图像右侧显示当前强度百分比底部控制区白色圆角卡片强度调节滑块0%~100%同步进度条“查看原图/滤镜对比按钮“重置按钮典型交互流程启动应用 → 图片以 60% Sepia 强度显示呈现温暖复古感向右拖动滑块 → 强度增加棕褐色调加深至 100% 时完全复古向左拖动滑块 → 强度降低色彩逐渐恢复至 0% 时显示原图点击查看原图” → 瞬间关闭滤镜可对比原图效果再次点击查看滤镜” → 滤镜恢复强度不变点击重置 → 回到默认 60% 强度并开启滤镜10. 性能分析与优化建议性能瓶颈分析本应用的性能瓶颈主要在于 Image 组件的重绘频率。当用户拖动滑块时sepiaIntensity 每秒更新约 30 次每次更新都导致build() 方法重新执行getCurrentFilter() 被调用创建新的 ColorFilterImage 组件检测到 colorFilter 属性变化触发重绘GPU 执行颜色矩阵运算其中步骤 4 是真正消耗性能的环节。对于一个 1080p 的图片约 200 万像素GPU 需要执行200 万 × 4 通道 × 20 矩阵元素 1.6 亿次浮点运算对于现代手机 GPU如 Mali-G78这个计算量大约需要 2~3ms。在 60fps 的目标下每帧 16.6ms这个开销完全在可接受范围内。优化建议尽管在当前场景下性能不是问题但如果需要处理超高分辨率图片或低端设备可以考虑以下优化优化策略 实施方式 效果降低图片分辨率 先用 image.createImageSource 解码到目标尺寸 像素数减少GPU 负载降低防抖处理 Slider 的 onChange 中添加定时去抖debounce 减少不必要的重绘使用 Canvas 代替 Image 用 Canvas drawing.Pen drawing.Brush 手动绘制 更精细的渲染控制预计算矩阵表 在 aboutToAppear() 中预计算所有 101 个强度矩阵 省去 lerp 计算收益很小11. 扩展方向本文实现的基础 Sepia 滤镜只是一个起点。基于相同的 ColorFilter 技术栈可以轻松扩展出更多图像效果扩展一多种滤镜切换enum FilterType {NORMAL,SEPIA,GRAYSCALE, // 灰度效果INVERT, // 反色BLUE_TINT, // 蓝色冷调VINTAGE, // 复古暖黄}// 每种滤镜对应一个颜色矩阵private getFilterMatrix(type: FilterType): number[] {switch (type) {case FilterType.GRAYSCALE:return [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];case FilterType.INVERT:return [-1, 0, 0, 0, 1,0,-1, 0, 0, 1,0, 0,-1, 0, 1,0, 0, 0, 1, 0];// … 更多滤镜}}扩展二亮度/对比度/饱和度独立调节将颜色矩阵分解为多个独立参数的组合function buildTuningMatrix(brightness: number, // -1.0 ~ 1.0contrast: number, // 0.0 ~ 2.0saturation: number // 0.0 ~ 2.0): number[] {// 需要组合三个独立的矩阵变换// 先应用饱和度再对比度最后亮度}扩展三分享与保存添加「保存到相册」功能将滤镜后的图片导出为文件async saveFilteredImage(): Promise {// 1. 获取 Image 组件的 PixelMap通过 componentSnapshot// 2. 使用 image.Packer 编码为 JPEG/PNG// 3. 使用 photoAccessHelper 保存到相册}扩展四相册选择图片async pickImageFromGallery(): Promise {// 使用 PhotoViewPicker 让用户选择本地图片// 加载到 Image 组件上应用相同的滤镜}12. 总结本文通过一个完整的鸿蒙 ArkTS 项目从 数学原理、API 使用、UI 布局 到 编译调试 全方位地讲解了 Sepia 棕褐色滤镜的实现。核心要点回顾知识点 关键技术颜色矩阵变换 drawing.ColorFilter.createMatrixColorFilter()线性插值强度控制 Identity ↔ Sepia 矩阵的 lerp响应式状态管理 State 驱动 UI 自动刷新声明式布局 Scroll Column Image Slider资源引用 $r(‘app.media.xxx’)模块导入 kit.ArkGraphics2D 命名空间技术的迷人之处在于一行代码往往承载着一个深厚的数学原理。 Sepia 滤镜的实现恰好印证了这一点——几个浮点数的矩阵背后是近百年的摄影工业经验和现代 GPU 硬件加速的结合。希望本文能帮助你在鸿蒙原生应用开发的道路上走得更远。如果你对文中的任何部分有疑问或发现了优化的可能性欢迎深入探索和实践。参考资料HarmonyOS NEXT 开发者文档 — ArkUI 组件参考HarmonyOS NEXT 开发者文档 — ohos.graphics.drawing.ColorFilter数字图像处理第三版— Rafael C. Gonzalez第 3 章灰度变换与空间滤波Wikipedia — Sepia摄影— https://en.wikipedia.org/wiki/Sepia_(color)标准 Sepia 矩阵的工业定义 — https://www.mathworks.com/help/images/ref/makecform.html