【拆·應用】是為開源鴻蒙應用開發者打造的技術分享平臺，是匯聚開發者的技術洞見與實踐經驗、提供開發心得與創新成果的展示窗口。誠邀您踴躍發聲，期待您的真知灼見與技術火花！

引言

本期內容介紹基于開源鴻蒙在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保存編輯后的圖片并返回保存地址，地址為應用沙箱地址，本樣例不是系統應用，故沒有支持保存到系統相冊。

結語

以上是本樣例具體功能模塊的實現，幫助開發者們了解如何實現給圖片的標記功能，以及進行離屏繪制保存新圖片的功能。除此之外，開源鴻蒙也提供了豐富的基礎組件和其他功能模塊，依托開源特性可靈活定制底層功能，借助分布式架構實現 “一次開發，多端部署”，大幅降低跨設備協同開發成本，一系列配套的開發工具和教程可讓開發者快速上手，歡迎更多的開發者加入到開源鴻蒙應用開發中，創造更多奇思妙想的應用。

供稿：開發者與活動運營組劉麗紅