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

引言

本期內(nèi)容介紹基于開源鴻蒙在RK3568上開發(fā)圖片編輯樣例的全流程，分為上篇和下篇，本篇為下篇，主要介紹標(biāo)記、保存圖片功能。

樣例簡介

在開源鴻蒙生態(tài)建設(shè)中，多媒體能力是構(gòu)建豐富用戶體驗的核心要素。本樣例首先使用@ohos.file.photoAccessHelper拉起圖庫選擇圖片，然后使用image.createImageSource創(chuàng)建圖片源實例，接下來使用createPixelMap創(chuàng)建PixelMap對象，便于實現(xiàn)圖片的編輯功能，使用effectKit.getHighestSaturationColor() 接口實現(xiàn)對圖片的高亮調(diào)節(jié)，利用Image、Text組件的組合給圖片添加文字、貼紙，再使用OffscreenCanvasRenderingContext2D進行離屏繪制保存新的pixelMap。

使用說明

添加文字：點擊標(biāo)記，再點擊文字，彈出輸入框，輸入文字后，文字會添加到圖片上，可拖動粘貼框改變粘貼的位置，選擇顏色修改文字顏色。

添加貼紙：點擊貼紙，可以滑動選擇不同的貼紙?zhí)砑拥綀D片上，可拖動粘貼框改變粘貼的位置，點擊√將貼紙?zhí)砑拥綀D片上，并返回主編輯頁面。

保存圖片：點擊右上角的保存圖標(biāo)，保存編譯后的圖片到應(yīng)用沙箱路徑。

樣例代碼拆解

下面是各個功能模塊代碼邏輯詳細分解。樣例源碼鏈接：https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/Image

標(biāo)記圖片：

1．標(biāo)記圖片主頁面

a）點擊底部菜單欄標(biāo)記按鈕，設(shè)置this.currentTask為Tasks.MARK，顯示標(biāo)記圖片主操作頁面。

b）this.currentTask為Tasks.MARK時，調(diào)用this.getMarkTool()刷新底部菜單欄。

c）在getMarkTool中顯示文字和貼紙標(biāo)記選項，點擊調(diào)用this.onSelectItem()添加文字和貼紙。

2．添加文字

a）在onSelectItem中判斷item.task為Tasks.TEXT，拉起自定義輸入彈框。

b）dialogController中在InputTextDialog中通過TextInput組件輸入文字，點擊確定按鈕后關(guān)閉彈框，調(diào)用this.confirm，即對應(yīng)的的onAccept。

c）在onAccept()調(diào)用onSelectItem，傳入?yún)?shù)maskDatas[0]就是Tasks.TEXT，以及hasInputText為true。

d）判斷hasInputText為true，設(shè)置this.currentTask為Tasks.TEXT,和this.cancelOkText，刷新底部菜單欄。

e）根據(jù)this.currentTask為Tasks.TEXT，調(diào)用this.getMaterialTool()組件，并傳入fontColors展示不同的顏色塊。

f）在getMaterialTool中調(diào)用this.TextOrStickerScroll()，通過List組件展示不同的顏色色塊，根據(jù)傳入的materials判斷是添加文字，點擊色塊改變文字顏色。

3．添加貼紙

a）在onSelectItem中判斷item.task不是Tasks.TEXT，設(shè)置this.currentTask和this.cancelOkText，刷新底部菜單欄。

b）添加貼紙和添加文字一樣調(diào)用this.getMaterialTool()，但是傳入stickers。

c）在getMaterialTool中調(diào)用this.TextOrStickerScroll()，通過List組件展示不同的貼紙，根據(jù)傳入的materials判斷是添加貼紙，通過Image組件顯示選擇的貼紙。

4．標(biāo)記圖片

a）當(dāng)this.currentTask為Tasks.TEXT或Tasks.STICKER時，通過MaterialEdit自定義組件將文字和貼紙?zhí)砑拥綀D片上。

b）MaterialEdit頁面通過Image組件展示圖片，通過RelativeContainer展示文字或貼紙，并根據(jù)拖動的坐標(biāo)設(shè)置postion屬性，從而改變文字或貼紙?zhí)砑拥奈恢谩?/p>

c）在RelativeContainer中通過getMaterialBuilder展示文字或貼紙。

d）通過getMaterialStyle接口設(shè)置組件的對齊方式，獲取手勢拖動坐標(biāo)。

e）將獲取的this.centerX和this.centerY設(shè)置到.position屬性，文字或貼紙位置。

f）在MaterialEdit組件aboutToDisappear時，保存添加文字或貼紙的圖片。

5．保存圖片

a）編譯完成后，點擊保存按鈕，調(diào)用this.onSave()保存編輯后的圖片。

b）調(diào)用savePixelMap保存編輯后的圖片并返回保存地址，地址為應(yīng)用沙箱地址，本樣例不是系統(tǒng)應(yīng)用，故沒有支持保存到系統(tǒng)相冊。

結(jié)語

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

供稿：開發(fā)者與活動運營組劉麗紅