拆·应用 第七期（下）：基于开源鸿蒙的图片编辑开发样例

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

样例简介

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

使用说明

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

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

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

样例代码拆解

下面是各个功能模块代码逻辑详细分解。可以在这里查看样例源码。 标记图片：

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保存编辑后的图片并返回保存地址，地址为应用沙箱地址，本样例不是系统应用，故没有支持保存到系统相册。

结语

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