基于开源鸿蒙的图片编辑开发样例（2）

【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！

引言

本期内容介绍基于开源鸿蒙在RK3568上开发图片编辑样例的全流程，分为上篇和下篇，本篇为下篇，主要介绍标记、保存图片功能。

样例简介

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

使用说明

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

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

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

样例代码拆解

下面是各个功能模块代码逻辑详细分解。样例源码链接：https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/Image

标记图片：

1．标记图片主页面

a）点击底部菜单栏标记按钮，设置this.currentTask为Tasks.MARK，显示标记图片主操作页面。

b）this.currentTask为Tasks.MARK时，调用this.getMarkTool()刷新底部菜单栏。

c）在getMarkTool中显示文字和贴纸标记选项，点击调用this.onSelectItem()添加文字和贴纸。

2．添加文字

a）在onSelectItem中判断item.task为Tasks.TEXT，拉起自定义输入弹框。

b）dialogController中在InputTextDialog中通过TextInput组件输入文字，点击确定按钮后关闭弹框，调用this.confirm，即对应的的onAccept。

c）在onAccept()调用onSelectItem，传入参数maskDatas[0]就是Tasks.TEXT，以及hasInputText为true。

d）判断hasInputText为true，设置this.currentTask为Tasks.TEXT,和this.cancelOkText，刷新底部菜单栏。

e）根据this.currentTask为Tasks.TEXT，调用this.getMaterialTool()组件，并传入fontColors展示不同的颜色块。

f）在getMaterialTool中调用this.TextOrStickerScroll()，通过List组件展示不同的颜色色块，根据传入的materials判断是添加文字，点击色块改变文字颜色。

3．添加贴纸

a）在onSelectItem中判断item.task不是Tasks.TEXT，设置this.currentTask和this.cancelOkText，刷新底部菜单栏。

b）添加贴纸和添加文字一样调用this.getMaterialTool()，但是传入stickers。

c）在getMaterialTool中调用this.TextOrStickerScroll()，通过List组件展示不同的贴纸，根据传入的materials判断是添加贴纸，通过Image组件显示选择的贴纸。

4．标记图片

a）当this.currentTask为Tasks.TEXT或Tasks.STICKER时，通过MaterialEdit自定义组件将文字和贴纸添加到图片上。

b）MaterialEdit页面通过Image组件展示图片，通过RelativeContainer展示文字或贴纸，并根据拖动的坐标设置postion属性，从而改变文字或贴纸添加的位置。

c）在RelativeContainer中通过getMaterialBuilder展示文字或贴纸。

d）通过getMaterialStyle接口设置组件的对齐方式，获取手势拖动坐标。

e）将获取的this.centerX和this.centerY设置到.position属性，文字或贴纸位置。

f）在MaterialEdit组件aboutToDisappear时，保存添加文字或贴纸的图片。

5．保存图片

a）编译完成后，点击保存按钮，调用this.onSave()保存编辑后的图片。

b）调用savePixelMap保存编辑后的图片并返回保存地址，地址为应用沙箱地址，本样例不是系统应用，故没有支持保存到系统相册。

结语

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

供稿：开发者与活动运营组 刘丽红