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

引言

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

樣例簡(jiǎn)介

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

使用說(shuō)明

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

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

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

樣例代碼拆解

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

標(biāo)記圖片：

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

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

b）this.currentTask為T(mén)asks.MARK時(shí)，調(diào)用this.getMarkTool()刷新底部菜單欄。

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

2．添加文字

a）在onSelectItem中判斷item.task為T(mén)asks.TEXT，拉起自定義輸入彈框。

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

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

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

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

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

3．添加貼紙

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

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

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

4．標(biāo)記圖片

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

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

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

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

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

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

5．保存圖片

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

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

結(jié)語(yǔ)

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

供稿：開(kāi)發(fā)者與活動(dòng)運(yùn)營(yíng)組劉麗紅