OpenHarmony开发者论坛

标题: 拆·应用 第七期（下）：基于开源鸿蒙的图片编辑开发样例 [打印本页]

---

作者: 开源鸿蒙知行录    时间: 2026-1-22 15:41
标题: 拆·应用 第七期（下）：基于开源鸿蒙的图片编辑开发样例
[md]> 【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！
> **引言**
> 本期内容介绍基于开源鸿蒙在RK3568上开发图片编辑样例的全流程，分为上篇和下篇，本篇为下篇，主要介绍标记、保存图片功能。

# 样例简介

在开源鸿蒙生态建设中，多媒体能力是构建丰富用户体验的核心要素。本样例首先使用 `@ohos.file.photoAccessHelper`拉起图库选择图片，然后使用 `image.createImageSource`创建图片源实例，接下来使用 `createPixelMap`创建 `PixelMap`对象，便于实现图片的编辑功能，使用 `effectKit.getHighestSaturationColor() `接口实现对图片的高亮调节，利用 `Image`、`Text`组件的组合给图片添加文字、贴纸，再使用 `OffscreenCanvasRenderingContext2D`进行离屏绘制保存新的 `pixelMap`。

# 使用说明

**添加文字**：点击标记，再点击文字，弹出输入框，输入文字后，文字会添加到图片上，可拖动粘贴框改变粘贴的位置，选择颜色修改文字颜色。

**添加贴纸**：点击贴纸，可以滑动选择不同的贴纸添加到图片上，可拖动粘贴框改变粘贴的位置，点击√将贴纸添加到图片上，并返回主编辑页面。

**保存图片**：点击右上角的保存图标，保存编译后的图片到应用沙箱路径。

## 样例代码拆解

下面是各个功能模块代码逻辑详细分解。可以在这里[查看样例源码](https://gitcode.com/openharmony/ ... Feature/Media/Image)。
标记图片：

1. **标记图片主页面**

- 点击底部菜单栏标记按钮，设置 `this.currentTask`为 `Tasks.MARK`，显示标记图片主操作页面。
  
- `this.currentTask`为 `Tasks.MARK`时，调用 `this.getMarkTool()`刷新底部菜单栏。
  
- 在 `getMarkTool`中显示文字和贴纸标记选项，点击调用 `this.onSelectItem()`添加文字和贴纸。
  


2. **添加文字**

- 在 `onSelectItem`中判断 `item.task`为 `Tasks.TEXT`，拉起自定义输入弹框。
  
  
  
- `dialogController`中在 `InputTextDialog`中通过 `TextInput`组件输入文字，点击确定按钮后关闭弹框，调用 `this.confirm`，即对应的的 `onAccept`。
  
- 在 `onAccept()`调用 `onSelectItem`，传入参数 `maskDatas[0]`就是 `Tasks.TEXT`，以及 `hasInputText`为 `true`。
  
- 判断 `hasInputText`为 `true`，设置 `this.currentTask`为 `Tasks.TEXT`,和 `this.cancelOkText`，刷新底部菜单栏。
  
- 根据 `this.currentTask`为 `Tasks.TEXT`，调用 `this.getMaterialTool()`组件，并传入 `fontColors`展示不同的颜色块。
  
- 在 `getMaterialTool`中调用 `this.TextOrStickerScroll()`，通过 `List`组件展示不同的颜色色块，根据传入的 `materials`判断是添加文字，点击色块改变文字颜色。
  
  
  

3. **添加贴纸**

- 在 `onSelectItem`中判断 `item.task`不是 `Tasks.TEXT`，设置 `this.currentTask`和 `this.cancelOkText`，刷新底部菜单栏。
  
- 添加贴纸和添加文字一样调用 `this.getMaterialTool()`，但是传入 `stickers`。
  
- 在 `getMaterialTool`中调用 `this.TextOrStickerScroll()`，通过 `List`组件展示不同的贴纸，根据传入的 `materials`判断是添加贴纸，通过 `Image`组件显示选择的贴纸。
  

4. **标记图片**

- 当 `this.currentTask`为 `Tasks.TEXT`或 `Tasks.STICKER`时，通过 `MaterialEdit`自定义组件将文字和贴纸添加到图片上。
  
- `MaterialEdit`页面通过 `Image`组件展示图片，通过 `RelativeContainer`展示文字或贴纸，并根据拖动的坐标设置 `postion`属性，从而改变文字或贴纸添加的位置。
  
- 在 `RelativeContainer`中通过 `getMaterialBuilder`展示文字或贴纸。
  
- 通过 `getMaterialStyle`接口设置组件的对齐方式，获取手势拖动坐标。
  
- 将获取的 `this.centerX`和 `this.centerY`设置到 `.position`属性，文字或贴纸位置。
  
- 在 `MaterialEdit`组件 `aboutToDisappear`时，保存添加文字或贴纸的图片。
  

5. **保存图片**

- 编译完成后，点击保存按钮，调用 `this.onSave()`保存编辑后的图片。
  
- 调用 `savePixelMap`保存编辑后的图片并返回保存地址，地址为应用沙箱地址，本样例不是系统应用，故没有支持保存到系统相册。
  

# 结语

以上是本样例具体功能模块的实现，帮助开发者们了解如何实现给图片的标记功能，以及进行离屏绘制保存新图片的功能。除此之外，开源鸿蒙也提供了丰富的基础组件和其他功能模块，依托开源特性可灵活定制底层功能，借助分布式架构实现 *一次开发，多端部署*，大幅降低跨设备协同开发成本，一系列配套的开发工具和教程可让开发者快速上手，欢迎更多的开发者加入到开源鸿蒙应用开发中，创造更多奇思妙想的应用。

[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5