倪紅軍OpenHarmony應(yīng)用開發(fā)

零基礎(chǔ)入門第六章多媒體應(yīng)用開發(fā)6.1概述

6.2影音播放器的設(shè)計(jì)與實(shí)現(xiàn)6.3圖片編輯器的設(shè)計(jì)與實(shí)現(xiàn)倪紅軍制作6.1概述本節(jié)要點(diǎn)1.了解音頻接口的基本功能2.了解視頻接口的基本功能3.了解相機(jī)接口的基本功能4.了解圖片接口的基本功能倪紅軍制作6.1.1音頻接口音頻接口（audio）支持音頻業(yè)務(wù)的開發(fā)，提供包括音頻播放、音頻采集、音量管理和短音播放等音頻相關(guān)的功能。音頻播放主要是將音頻數(shù)據(jù)轉(zhuǎn)碼為可聽見的音頻模擬信號并通過輸出設(shè)備進(jìn)行播放，同時(shí)對播放任務(wù)進(jìn)行管理。音頻采集主要是通過輸入設(shè)備將聲音采集并轉(zhuǎn)碼為音頻數(shù)據(jù)，同時(shí)對采集任務(wù)進(jìn)行管理。音量管理主要包括音量調(diào)節(jié)、輸入/輸出設(shè)備管理、注冊音頻中斷和音頻采集中斷的回調(diào)等。短音播放主要負(fù)責(zé)管理音頻資源的加載與播放、tone音的生成與播放以及系統(tǒng)音播放。ArkTS開發(fā)框架的“@ohos.multimedia.audio”模塊中提供了音量管理、音頻路由管理、混音管理等接口與服務(wù)能力。倪紅軍制作6.1.2視頻接口視頻接口（media）支持視頻業(yè)務(wù)的開發(fā)和生態(tài)開放，開發(fā)者可以通過已開放的接口實(shí)現(xiàn)視頻編解碼、視頻合成、視頻提取、視頻播放和視頻錄制等操作及新功能開發(fā)。視頻編解碼主要是將視頻進(jìn)行編碼和解碼。視頻提取主要是將多媒體文件中的音視頻數(shù)據(jù)進(jìn)行分離，提取出音頻、視頻數(shù)據(jù)源。視頻播放包括播放控制、播放設(shè)置和播放查詢，如播放的開始與停止、播放速度設(shè)置和是否循環(huán)播放等。視頻錄制主要是在選擇視頻（音頻）來源后，可以錄制并生成視頻（音頻文件）。ArkTS開發(fā)框架的“@ohos.multimedia.media”模塊中提供了音視頻解壓播放、壓縮錄制等接口與服務(wù)能力。倪紅軍制作6.1.3相機(jī)接口相機(jī)接口（camera）支持相機(jī)業(yè)務(wù)的開發(fā)，開發(fā)者既可以通過已開放的接口實(shí)現(xiàn)相機(jī)硬件的訪問、預(yù)覽、拍照、連拍和錄像等操作及新功能開發(fā)，也可以通過合適的接口或者接口組合實(shí)現(xiàn)閃光燈控制、曝光時(shí)間控制、手動對焦、自動對焦控制、變焦控制、人臉識別以及更多的功能。但是，同一時(shí)刻只能有一個(gè)相機(jī)應(yīng)用程序在運(yùn)行。開發(fā)者必須按照相機(jī)權(quán)限申請、相機(jī)設(shè)備創(chuàng)建、相機(jī)設(shè)備配置、相機(jī)幀捕獲及相機(jī)設(shè)備釋放的開發(fā)流程進(jìn)行接口的順序調(diào)用，否則可能會出現(xiàn)調(diào)用失敗等問題。ArkTS開發(fā)框架的“@ohos.multimedia.camera”模塊提供了精確控制相機(jī)鏡頭，采集視覺信息等接口與服務(wù)能力。倪紅軍制作6.1.4圖片接口圖片接口（image）既支持圖片解碼、圖片編碼、基本的位圖操作、圖片編輯等圖片業(yè)務(wù)的開發(fā)，也支持通過接口組合實(shí)現(xiàn)更復(fù)雜的圖片處理邏輯。為了方便圖片在應(yīng)用中進(jìn)行顯示或旋轉(zhuǎn)、縮放、裁剪等處理，通常需要使用圖片解碼技術(shù)將不同的存檔格式圖片（如JPEG、PNG、GIF、RAW、WebP、BMP、SVG等）解碼為無壓縮的位圖格式圖片（PixelMap）；為了方便圖片在應(yīng)用程序中進(jìn)行保存、傳輸?shù)认鄳?yīng)的處理，通常需要使用圖片編碼技術(shù)將無壓縮的位圖格式（PixelMap）編碼成不同格式的存檔格式圖片（目前僅支持JPEG和WebP）。ArkTS開發(fā)框架的“@ohos.multimedia.image”模塊中提供了圖片編解碼、圖片處理等接口與服務(wù)能力。倪紅軍制作6.2影音播放器的設(shè)計(jì)與實(shí)現(xiàn)本節(jié)要點(diǎn)1.掌握AVPlayer類型對象的屬性、功能及使用方法和應(yīng)用場景2.掌握監(jiān)聽/取消監(jiān)聽AVPlayer不同類型事件的使用方法和應(yīng)用場景3.掌握XComponent和Video組件的使用方法和應(yīng)用場景4.掌媒體查詢的使用方法和應(yīng)用場景5.掌握影音播放器的實(shí)現(xiàn)方法倪紅軍制作6.2.1AVPlayerAVPlayer（播放管理類）用于將mp3、mp4、mkv等音視頻媒體資源轉(zhuǎn)碼為可聽見的音頻模擬信號和可供渲染的圖像，并通過音箱、顯示屏等輸出設(shè)備進(jìn)行播放展示。它的管理和播放音視頻媒體資源能力由ArkTS開發(fā)框架的“@ohos.multimedia.media”模塊提供。AVPlayer類的屬性及功能說明如表所示。倪紅軍制作6.2.1AVPlayerAVPlayer（播放管理類）用于將mp3、mp4、mkv等音視頻媒體資源轉(zhuǎn)碼為可聽見的音頻模擬信號和可供渲染的圖像，并通過音箱、顯示屏等輸出設(shè)備進(jìn)行播放展示。它的管理和播放音視頻媒體資源能力由ArkTS開發(fā)框架的“@ohos.multimedia.media”模塊提供。AVPlayer類的屬性及功能說明如表所示。/pages/v4.0/zh-cn/application-dev/media/using-avplayer-for-playback.md倪紅軍制作6.2.1AVPlayer1．創(chuàng)建AVPlayer實(shí)例調(diào)用createAVPlayer（）方法創(chuàng)建AVPlayer實(shí)例后，AVPlayer實(shí)例切換為idle狀態(tài)。media.createAVPlayer():Promise<AVPlayer>：異步創(chuàng)建一個(gè)音視頻播放實(shí)例對象，表示Promise回調(diào)函數(shù)返回一個(gè)AVPlayer對象，失敗時(shí)返回null?？蓜?chuàng)建的音視頻播放實(shí)例對象數(shù)量由設(shè)備芯片決定，但視頻播放實(shí)例對象最多不能超過13個(gè)、音視頻播放實(shí)例對象最多不能超過16個(gè)。media.createAVPlayer(callback:AsyncCallback<AVPlayer>):void：異步創(chuàng)建一個(gè)音視頻播放實(shí)例對象，使用callback異步回調(diào)函數(shù)返回一個(gè)AVPlayer對象，失敗時(shí)返回null。例如，異步創(chuàng)建1個(gè)名為avPlayer的播放實(shí)例如下所示。倪紅軍制作6.2.1AVPlayer2．設(shè)置播放資源播放資源可以是本地資源文件（由fdSrc屬性設(shè)置），也可以是網(wǎng)絡(luò)資源文件（由url屬性設(shè)置）。但是，播放網(wǎng)絡(luò)資源文件時(shí)，應(yīng)用需具有網(wǎng)絡(luò)訪問權(quán)限（ohos.permission.INTERNET）。打開項(xiàng)目的module.json5文件，在modules配置項(xiàng)中用requestPermissions屬性配置項(xiàng)添加應(yīng)用的權(quán)限，代碼如下所示。例如，為avPlayer播放實(shí)例設(shè)置網(wǎng)絡(luò)資源文件的代碼如下所示。倪紅軍制作6.2.1AVPlayer3．準(zhǔn)備播放調(diào)用prepare（）方法，AVPlayer實(shí)例切換為prepared狀態(tài)，此時(shí)可以獲取播放資源的播放總時(shí)長（duration屬性值）、設(shè)置播放音量等。prepare():Promise<void>：通過Promise方式準(zhǔn)備播放音視頻資源，返回值類型為Promise<void>，表示準(zhǔn)備播放的Promise返回值。prepare(callback:AsyncCallback<void>):void：通過回調(diào)方式準(zhǔn)備播放音視頻資源，callback參數(shù)表示準(zhǔn)備播放的回調(diào)方法。例如，準(zhǔn)備播放avPlayer實(shí)例的代碼如下所示。倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。（1）播放調(diào)用play（）方法，AVPlayer實(shí)例切換為playing狀態(tài)。但是，只有在播放實(shí)例對象為prepared、paused或completed狀態(tài)時(shí)才能調(diào)用該方法。play():Promise<void>：通過Promise方式開始播放音視頻資源，返回值類型為Promise<void>，表示開始播放的Promise返回值。play(callback:AsyncCallback<void>):void：通過回調(diào)方式開始播放音視頻資源，callback參數(shù)表示開始播放的回調(diào)方法。

例如，開始播放avPlayer實(shí)例的代碼如下所示。倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。（2）暫停調(diào)用pause（）方法，AVPlayer實(shí)例切換為paused狀態(tài)。但是，只有在播放實(shí)例對象為playing狀態(tài)時(shí)才能調(diào)用該方法。pause():Promise<void>：通過Promise方式暫停播放音視頻資源，返回值類型為Promise<void>，表示暫停播放的Promise返回值。pause(callback:AsyncCallback<void>):void：通過回調(diào)方式暫停播放音視頻資源，callback參數(shù)表示暫停播放的回調(diào)方法。例如，開始播放avPlayer實(shí)例的代碼如下所示。倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。（3）跳轉(zhuǎn)只有播放實(shí)例對象為prepared、playing、paused或completed狀態(tài)時(shí)才能調(diào)用跳轉(zhuǎn)方法。seek(timeMs:number,mode?:SeekMode):void：跳轉(zhuǎn)到指定播放位置。timeMs參數(shù)表示跳轉(zhuǎn)到的時(shí)間節(jié)點(diǎn)，單位為毫秒（ms），取值范圍為[0，播放資源的總時(shí)長]；mode參數(shù)表示跳轉(zhuǎn)模式，僅在播放視頻資源時(shí)設(shè)置，其值包括SEEK_PREV_SYNC（默認(rèn)值，跳轉(zhuǎn)到指定時(shí)間點(diǎn)的上一個(gè)關(guān)鍵幀，一般用于向前快進(jìn)）、SEEK_NEXT_SYNC（跳轉(zhuǎn)到指定時(shí)間點(diǎn)的下一個(gè)關(guān)鍵幀，一般用于向后快進(jìn)）。例如，從頭開始重新播放avPlayer實(shí)例的代碼如下所示。倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。（4）停止調(diào)用stop（）方法，AVPlayer實(shí)例切換為stopped狀態(tài)。但是，只有在播放實(shí)例對象為prepared、playing、paused或completed狀態(tài)時(shí)才能調(diào)用該方法。stop():Promise<void>：通過Promise方式停止播放音視頻資源，返回值類型為Promise<void>，表示停止播放的Promise返回值。stop(callback:AsyncCallback<void>):void：通過回調(diào)方式停止播放音視頻資源，callback參數(shù)表示停止播放的回調(diào)方法。

例如，停止播放avPlayer實(shí)例的代碼如下所示。

倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。（5）設(shè)置倍速模式只有播放實(shí)例對象為prepared、playing、paused或completed狀態(tài)時(shí)才能調(diào)用設(shè)置倍速模式方法。

setSpeed(speed:PlaybackSpeed):void：設(shè)置倍速模式，可以通過speedDone事件確認(rèn)是否生效。但是直播場景不支持該方法。speed參數(shù)表示播放倍速模式，其值包括SPEED_FORWARD_0_75_X（0.75倍）、SPEED_FORWARD_1_00_X（1倍）、SPEED_FORWARD_1_25_X（1.25倍）、SPEED_FORWARD_1_75_X （1.75倍）、SPEED_FORWARD_2_00_X（2倍）。倪紅軍制作6.2.1AVPlayer4．播放控制當(dāng)音視頻資源播放準(zhǔn)備好后，就可以調(diào)用AVPlayer提供的方法實(shí)現(xiàn)播放、暫停、跳轉(zhuǎn)和停止功能。

（6）設(shè)置音量只有播放實(shí)例對象為prepared、playing、paused或completed狀態(tài)時(shí)才能調(diào)用設(shè)置音量方法。setVolume(volume:number):void：設(shè)置媒體播放音量，可以通過volumeChange事件確認(rèn)是否生效。volume參數(shù)表示指定的相對音量大小，取值范圍為[0.00-1.00]，1表示最大音量，即100%。倪紅軍制作6.2.1AVPlayer5．重置播放資源如果在音視頻資源播放時(shí)需要重置播放資源，則可以調(diào)用reset（）方法，該方法執(zhí)行后AVPlayer實(shí)例重新進(jìn)入idle狀態(tài)，此時(shí)允許更換資源文件。但是，只有在播放對象為initialized、prepared、playing、paused、completed、stopped或error狀態(tài)時(shí)才能調(diào)用該方法。reset():Promise<void>：通過Promise方式重置播放音視頻資源，返回值類型為Promise<void>，表示重置播放的Promise返回值。reset(callback:AsyncCallback<void>):void：通過回調(diào)方式重置播放音視頻資源，callback參數(shù)表示重置播放的回調(diào)方法。

例如，重置avPlayer實(shí)例的播放資源并播放的代碼如下所示。倪紅軍制作6.2.1AVPlayer6．釋放播放資源

如果音視頻資源播放完成，則可以調(diào)用release（）方法釋放播放資源，該方法執(zhí)行后AVPlayer實(shí)例重新進(jìn)入released狀態(tài)，此時(shí)退出播放。release():Promise<void>：通過Promise方式銷毀播放音視頻資源，返回值類型為Promise<void>，表示銷毀播放的Promise返回值。release(callback:AsyncCallback<void>):void：通過回調(diào)方式銷毀播放音視頻資源，callback參數(shù)表示銷毀播放的回調(diào)方法。

例如，釋放avPlayer實(shí)例的播放資源代碼如下所示。倪紅軍制作6.2.1AVPlayer【范例6-1】設(shè)計(jì)如圖所示的音樂播放器頁面，點(diǎn)擊“播放”按鈕，開始播放音樂，并且“播放”切換為“暫?！?，并完成頁面上相應(yīng)的功能。（1）定義變量（2）自定義showTime（）方法按時(shí)分秒格式顯示時(shí)間倪紅軍制作6.2.1AVPlayer【范例6-1】設(shè)計(jì)如圖所示的音樂播放器頁面，點(diǎn)擊“播放”按鈕，開始播放音樂，并且“播放”切換為“暫?！保⑼瓿身撁嫔舷鄳?yīng)的功能。（3）實(shí)現(xiàn)aboutToAppear（）函數(shù)"/sound/00/31/31/45/313145_60306d4d1114cc554dcfe44ea5cab8a8.mp3倪紅軍制作6.2.1AVPlayer【范例6-1】設(shè)計(jì)如圖所示的音樂播放器頁面，點(diǎn)擊“播放”按鈕，開始播放音樂，并且“播放”切換為“暫?！?，并完成頁面上相應(yīng)的功能。（4）音樂播放器的功能實(shí)現(xiàn)頁面最上面3行信息的顯示代碼如下所示。倪紅軍制作6.2.1AVPlayer【范例6-1】設(shè)計(jì)如圖所示的音樂播放器頁面，點(diǎn)擊“播放”按鈕，開始播放音樂，并且“播放”切換為“暫?！保⑼瓿身撁嫔舷鄳?yīng)的功能。（4）音樂播放器的功能實(shí)現(xiàn)最左側(cè)按鈕的功能代碼如下所示。倪紅軍制作6.2.1AVPlayer【范例6-1】設(shè)計(jì)如圖所示的音樂播放器頁面，點(diǎn)擊“播放”按鈕，開始播放音樂，并且“播放”切換為“暫?！?，并完成頁面上相應(yīng)的功能。（4）音樂播放器的功能實(shí)現(xiàn)停止、重放、循環(huán)按鈕的功能代碼如下所示。倪紅軍制作6.2.2監(jiān)聽和取消監(jiān)聽事件1．監(jiān)聽事件on(type:string,callback:Callback<number>):void：用于開始監(jiān)聽表6-2中所列的事件，并可以根據(jù)返回值進(jìn)行相應(yīng)的事務(wù)處理。type參數(shù)表示監(jiān)聽事件的類型，其值及功能說明如表所示；callback參數(shù)表示監(jiān)聽事件的回調(diào)方法。例如，范例6-1中的aboutToAppear（）函數(shù)實(shí)現(xiàn)計(jì)時(shí)器的功能代碼可以用下列代碼替換。即監(jiān)聽當(dāng)前播放時(shí)間，并根據(jù)回調(diào)返回的當(dāng)前時(shí)間更新頁面上的當(dāng)前時(shí)間和進(jìn)度條的進(jìn)度。倪紅軍制作6.2.2監(jiān)聽和取消監(jiān)聽事件1．監(jiān)聽事件on(type:‘stateChange’,callback:(state:AVPlayerState,reason:StateChangeReason)=>void):void：用于監(jiān)聽播放狀態(tài)機(jī)AVPlayerState切換的事件。type參數(shù)表示狀態(tài)機(jī)切換事件回調(diào)類型，其值為“stateChange”；callback參數(shù)表示監(jiān)聽狀態(tài)機(jī)切換事件的回調(diào)方法，state表示當(dāng)前播放狀態(tài)，reason表示當(dāng)前播放狀態(tài)的切換原因。on(type:‘error’,callback:ErrorCallback):void：用于監(jiān)聽AVPlayer的錯(cuò)誤事件，該事件僅用于錯(cuò)誤提示，不需要用戶停止播控動作。type參數(shù)表示錯(cuò)誤事件回調(diào)類型，其值為“error”；callback參數(shù)表示監(jiān)聽錯(cuò)誤事件的回調(diào)方法，發(fā)生錯(cuò)誤時(shí)會提供錯(cuò)誤碼ID和錯(cuò)誤信息。例如，在范例6-1的基礎(chǔ)上，添加監(jiān)聽錯(cuò)誤事件功能，實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.2監(jiān)聽和取消監(jiān)聽事件1．監(jiān)聽事件on(type:‘endOfStream’,callback:Callback<void>):void：用于監(jiān)聽資源播放至結(jié)尾的事件。type參數(shù)表示資源播放至結(jié)尾事件回調(diào)類型，其值為“endOfStream”；callback參數(shù)表示監(jiān)聽資源播放至結(jié)尾事件的回調(diào)方法。例如，在范例6-1的基礎(chǔ)上，添加播放至結(jié)尾，切換到資源文件目錄resources/rawfile下的friend.mp3文件繼續(xù)播放，實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.2監(jiān)聽和取消監(jiān)聽事件1．監(jiān)聽事件on(type:‘bufferingUpdate’,callback:(infoType:BufferingInfoType,value:number)=>void):void：用于監(jiān)聽音視頻緩存更新事件，僅網(wǎng)絡(luò)播放支持該訂閱事件。type參數(shù)表示播放緩存事件回調(diào)類型，其值為“bufferingUpdate”；callback參數(shù)表示監(jiān)聽播放緩存事件的回調(diào)方法。on(type:‘startRenderFrame’,callback:Callback<void>):void：用于監(jiān)聽視頻播放開始首幀渲染的更新事件，僅視頻播放支持該訂閱事件，該事件僅代表播放服務(wù)將第一幀畫面送顯示模塊，實(shí)際效果依賴顯示服務(wù)渲染性能。type參數(shù)表示視頻播放開始首幀渲染事件回調(diào)類型，其值為“startRenderFrame”；callback參數(shù)表示監(jiān)聽視頻播放開始首幀渲染事件回調(diào)方法。on(type:‘videoSizeChange’,callback:(width:number,height:number)=>void):void：用于監(jiān)聽視頻播放寬高變化事件，僅視頻播放支持該訂閱事件，默認(rèn)只在prepared狀態(tài)上報(bào)一次，但HLS協(xié)議碼流會在切換分辨率時(shí)上報(bào)。type參數(shù)表示視頻播放寬高變化事件回調(diào)類型，其值為“videoSizeChange”；callback參數(shù)表示監(jiān)聽視頻播放寬高變化事件回調(diào)方法，width表示寬，height表示高。倪紅軍制作6.2.2監(jiān)聽和取消監(jiān)聽事件2．取消監(jiān)聽事件off(type:‘stateChange’):void：取消監(jiān)聽播放狀態(tài)機(jī)AVPlayerState切換的事件。off(type:‘error’):void：取消監(jiān)聽播放的錯(cuò)誤事件。off(type:‘seekDone’):void：取消監(jiān)聽seek生效的事件。off(type:‘speedDone’):void：取消監(jiān)聽setSpeed生效的事件。off(type:‘volumeChange’):void：取消監(jiān)聽setVolume生效的事件。off(type:‘endOfStream’):void：取消監(jiān)聽資源播放至結(jié)尾的事件。off(type:‘timeUpdate’):void：取消監(jiān)聽資源播放當(dāng)前時(shí)間。off(type:‘durationUpdate’):void：取消監(jiān)聽資源播放資源的時(shí)長。off(type:‘bufferingUpdate’):void：取消監(jiān)聽音視頻緩存更新事件。off(type:‘startRenderFrame’):void：取消監(jiān)聽視頻播放開始首幀渲染的更新事件。off(type:‘videoSizeChange’):void：取消監(jiān)聽視頻播放寬高變化事件。倪紅軍制作6.2.3XComponentXComponent組件是滿足開發(fā)者自定義繪制需求的一種繪制組件，可用于EGL/OpenGLES和媒體數(shù)據(jù)寫入，并顯示在該組件。其接口格式如下所示。（1）id參數(shù)用于設(shè)置組件的唯一標(biāo)識，唯一標(biāo)識的字符串長度不超過128個(gè)字符。（2）type參數(shù)用于設(shè)置組件的類型，該類型包括surface、component和texture。（3）libraryname參數(shù)用于設(shè)置應(yīng)用Native層編譯輸出動態(tài)庫名稱，但僅surface類型生效。（4）controller參數(shù)用于設(shè)置XComponent組件控制器，通過控制器調(diào)用如表所示的組件方法實(shí)現(xiàn)相應(yīng)的功能，但僅surface類型生效。倪紅軍制作6.2.3XComponent【范例6-2】設(shè)計(jì)如圖左所示的視頻播放器頁面，點(diǎn)擊“播放”、“暫?！?、“繼續(xù)”、“音量-”、“音量+”按鈕實(shí)現(xiàn)相應(yīng)功能；點(diǎn)擊“倍速”，彈出如圖右所示滑動文本選擇器對話框，在對話框中滑動倍速文本，并點(diǎn)擊“確定”按鈕后，視頻會以選定的倍速播放。倪紅軍制作6.2.3XComponent【范例6-2】設(shè)計(jì)如圖左所示的視頻播放器頁面，點(diǎn)擊“播放”、“暫?！薄ⅰ袄^續(xù)”、“音量-”、“音量+”按鈕實(shí)現(xiàn)相應(yīng)功能；點(diǎn)擊“倍速”，彈出如圖右所示滑動文本選擇器對話框，在對話框中滑動倍速文本，并點(diǎn)擊“確定”按鈕后，視頻會以選定的倍速播放。倪紅軍制作6.2.3XComponent【范例6-2】設(shè)計(jì)如圖左所示的視頻播放器頁面，點(diǎn)擊“播放”、“暫?！薄ⅰ袄^續(xù)”、“音量-”、“音量+”按鈕實(shí)現(xiàn)相應(yīng)功能；點(diǎn)擊“倍速”，彈出如圖右所示滑動文本選擇器對話框，在對話框中滑動倍速文本，并點(diǎn)擊“確定”按鈕后，視頻會以選定的倍速播放。倪紅軍制作6.2.3XComponent【范例6-2】設(shè)計(jì)如圖左所示的視頻播放器頁面，點(diǎn)擊“播放”、“暫停”、“繼續(xù)”、“音量-”、“音量+”按鈕實(shí)現(xiàn)相應(yīng)功能；點(diǎn)擊“倍速”，彈出如圖右所示滑動文本選擇器對話框，在對話框中滑動倍速文本，并點(diǎn)擊“確定”按鈕后，視頻會以選定的倍速播放。倪紅軍制作6.2.3XComponent【范例6-2】設(shè)計(jì)如圖左所示的視頻播放器頁面，點(diǎn)擊“播放”、“暫?！?、“繼續(xù)”、“音量-”、“音量+”按鈕實(shí)現(xiàn)相應(yīng)功能；點(diǎn)擊“倍速”，彈出如圖右所示滑動文本選擇器對話框，在對話框中滑動倍速文本，并點(diǎn)擊“確定”按鈕后，視頻會以選定的倍速播放。倪紅軍制作6.2.4Video組件Video組件（視頻播放組件）用于播放視頻媒體，其接口格式如下所示。value參數(shù)用于設(shè)置播放的視頻信息。VideoOptions類型參數(shù)及功能說明如表所示。倪紅軍制作6.2.4Video組件為了滿足各種應(yīng)用開發(fā)場景的需要，該組件除支持通用屬性和通用事件外，還支持如上表所示的屬性和如下表所示的事件。倪紅軍制作6.2.4Video組件默認(rèn)狀態(tài)下，Video組件會自帶一個(gè)控制視頻播放的控制欄，通過該控制欄上的控制按鈕可以實(shí)現(xiàn)視頻的播放、暫停、全屏及退出全屏等效果。由于實(shí)際應(yīng)用開發(fā)中，往往需要根據(jù)不同的應(yīng)用場景實(shí)現(xiàn)對視頻播放效果進(jìn)行控制，所以也可以使用VideoController類型對象實(shí)現(xiàn)這些功能，VideoController類型對象提供了如表所示的方法實(shí)現(xiàn)這些功能。倪紅軍制作6.2.4Video組件【范例6-3】設(shè)計(jì)如圖所示的視頻播放器頁面，點(diǎn)擊頁面中間的“?”標(biāo)識，開始播放視頻，“?”標(biāo)識消失；點(diǎn)擊播放頁面的任何區(qū)域，頁面中間顯示“||”標(biāo)識，點(diǎn)擊頁面中間的“||”標(biāo)識，視頻暫停播放，并且切換為“?”標(biāo)識。/__local/4/E3/18/CE2EDE9C41F616494605C3B6888_6ED27270_822177.mp4?e=.mp4倪紅軍制作6.2.4Video組件【范例6-3】設(shè)計(jì)如圖所示的視頻播放器頁面，點(diǎn)擊頁面中間的“?”標(biāo)識，開始播放視頻，“?”標(biāo)識消失；點(diǎn)擊播放頁面的任何區(qū)域，頁面中間顯示“||”標(biāo)識，點(diǎn)擊頁面中間的“||”標(biāo)識，視頻暫停播放，并且切換為“?”標(biāo)識。倪紅軍制作6.2.4Video組件【范例6-3】設(shè)計(jì)如圖所示的視頻播放器頁面，點(diǎn)擊頁面中間的“?”標(biāo)識，開始播放視頻，“?”標(biāo)識消失；點(diǎn)擊播放頁面的任何區(qū)域，頁面中間顯示“||”標(biāo)識，點(diǎn)擊頁面中間的“||”標(biāo)識，視頻暫停播放，并且切換為“?”標(biāo)識。倪紅軍制作6.2.5媒體查詢媒體查詢（mediaquery）允許根據(jù)設(shè)備的屏幕大小、屏幕方向、分辨率及顏色深度等不同特性動態(tài)地調(diào)整應(yīng)用頁面的樣式和布局。媒體查詢的能力由ArkTS開發(fā)框架的“@ohos.mediaquery”模塊提供。1．導(dǎo)入媒體查詢模塊2．設(shè)置媒體查詢條件mediaquery.matchMediaSync(condition:string):MediaQueryListener：設(shè)置媒體查詢的查詢條件，并返回對應(yīng)的監(jiān)聽句柄。condition參數(shù)表示媒體查詢條件；返回值類型為MediaQueryListener，該類型對象為用于注冊和取消注冊監(jiān)聽回調(diào)。媒體查詢條件由媒體類型（media-type）、邏輯操作符（media-logic-operations）、媒體特征（media-feature）組成，其中媒體類型可以省略，邏輯操作符用于連接不同媒體類型與媒體特征，媒體特征由“()”括起來且可以有多個(gè)。媒體查詢的語法格式如下所示。[media-type][media-logic-operations][(media-feature)]倪紅軍制作6.2.5媒體查詢媒體查詢的語法格式如下所示。[media-type][media-logic-operations][(media-feature)]媒體類型目前只有screen一種，用于表示按屏幕相關(guān)參數(shù)進(jìn)行媒體查詢。媒體特征包括應(yīng)用顯示區(qū)域的寬高、設(shè)備分辨率以及設(shè)備的寬高等屬性，媒體特征屬性與功能說明如表所示。媒體邏輯操作符包括and（與）、or（或）、not（取反）、only和（,）等，它們可以構(gòu)成復(fù)雜的媒體查詢條件。倪紅軍制作6.2.5媒體查詢例如，應(yīng)用頁面可繪制區(qū)域的寬度達(dá)1024px的查詢條件為“(width>=1024)”；媒體類型為tablet的查詢條件為“(device-type:tablet)”；屏幕方向?yàn)闄M屏的查詢條件為“(orientation:landscape)”；屏幕方向?yàn)樨Q屏的查詢條件為“(orientation:portrait)”。設(shè)置這些查詢條件的代碼如下所示。例如，設(shè)置設(shè)備類型是tablet并且設(shè)備的分辨率大于等于500的媒體查詢代碼如下所示。倪紅軍制作6.2.5媒體查詢3．為媒體查詢條件注冊回調(diào)on(type:’change’,callback:Callback<MediaQueryResult>):void：向?qū)?yīng)的查詢條件注冊回調(diào)，當(dāng)媒體屬性發(fā)生變更時(shí)會觸發(fā)該回調(diào)。type參數(shù)表示監(jiān)聽類型，僅能為“change”；callback表示注冊的回調(diào)事件，該回調(diào)事件的返回值類型為MediaQueryResult，該類型包含的屬性及功能說明如表所示。4．為媒體查詢條件取消注冊回調(diào)off(type:’change’,callback:Callback<MediaQueryResult>):void：通過向?qū)?yīng)的查詢條件取消注冊回調(diào)，當(dāng)媒體屬性發(fā)生變更時(shí)不再觸發(fā)指定的回調(diào)。倪紅軍制作6.2.5媒體查詢【范例6-4】設(shè)計(jì)新聞顯示頁面，當(dāng)屏幕為橫屏方向顯示如左圖所示效果，頁面左側(cè)按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面右側(cè)顯示對應(yīng)的新聞內(nèi)容；當(dāng)屏幕為豎屏方向顯示如右圖所示效果，頁面下方按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面上方顯示對應(yīng)的新聞內(nèi)容。（1）定義橫屏顯示頁面倪紅軍制作6.2.5媒體查詢【范例6-4】設(shè)計(jì)新聞顯示頁面，當(dāng)屏幕為橫屏方向顯示如左圖所示效果，頁面左側(cè)按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面右側(cè)顯示對應(yīng)的新聞內(nèi)容；當(dāng)屏幕為豎屏方向顯示如右圖所示效果，頁面下方按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面上方顯示對應(yīng)的新聞內(nèi)容。（1）定義橫屏顯示頁面倪紅軍制作6.2.5媒體查詢【范例6-4】設(shè)計(jì)新聞顯示頁面，當(dāng)屏幕為橫屏方向顯示如左圖所示效果，頁面左側(cè)按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面右側(cè)顯示對應(yīng)的新聞內(nèi)容；當(dāng)屏幕為豎屏方向顯示如右圖所示效果，頁面下方按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面上方顯示對應(yīng)的新聞內(nèi)容。（2）定義豎屏顯示頁面倪紅軍制作6.2.5媒體查詢【范例6-4】設(shè)計(jì)新聞顯示頁面，當(dāng)屏幕為橫屏方向顯示如左圖所示效果，頁面左側(cè)按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面右側(cè)顯示對應(yīng)的新聞內(nèi)容；當(dāng)屏幕為豎屏方向顯示如右圖所示效果，頁面下方按列表方式顯示新聞標(biāo)題，點(diǎn)擊列表中的新聞標(biāo)題，在頁面上方顯示對應(yīng)的新聞內(nèi)容。（3）功能實(shí)現(xiàn)倪紅軍制作6.2.6案例：影音播放器1．需求描述影音播放器應(yīng)用既可以播放音頻文件，也可以播放視頻文件。在設(shè)備的屏幕方向變化時(shí)，播放頁面效果也會隨之變化。倪紅軍制作6.2.6案例：影音播放器1．需求描述影音播放器應(yīng)用既可以播放音頻文件，也可以播放視頻文件。在設(shè)備的屏幕方向變化時(shí)，播放頁面效果也會隨之變化。倪紅軍制作6.2.6案例：影音播放器2．設(shè)計(jì)思路豎屏播放音頻和視頻頁面以Column布局，頁面上半部分播放音頻文件的界面由自定義組件MusicWindow實(shí)現(xiàn)、播放視頻文件的界面由自定義組件VideoWindow實(shí)現(xiàn)，下半部分顯示的音視頻文件列表由List組件實(shí)現(xiàn)。MusicWindow組件頁面以Column布局，封面圖由Image組件實(shí)現(xiàn)，播放文件標(biāo)題由Text組件實(shí)現(xiàn)，播放進(jìn)度由Progress組件實(shí)現(xiàn)，當(dāng)前時(shí)間及總時(shí)長由Flex布局的Text組件實(shí)現(xiàn)，“上一首”、“播放/暫停/繼續(xù)”及“下一首”按鈕由Flex布局的Button組件實(shí)現(xiàn)。VideoWindow組件頁面以Column布局，視頻文件播放窗口由Video組件實(shí)現(xiàn)。橫屏播放音頻和視頻頁面以Row布局，頁面左半部分顯示的音視頻文件列表由List組件實(shí)現(xiàn)，頁面右半部分播放音頻文件的界面由自定義組件MusicWindow實(shí)現(xiàn)、播放視頻文件的界面由自定義組件VideoWindow實(shí)現(xiàn)。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（1）創(chuàng)建影音播放器應(yīng)用模塊及準(zhǔn)備資源文件將圖片文件復(fù)制到y(tǒng)yplay/src/main/resources/base/media文件夾下；將音視頻文件復(fù)制到y(tǒng)yplay/src/main/resources/rawfile文件夾下。（2）初始化音視頻文件數(shù)據(jù)在yyplay/src/main/ets/viewmodel文件夾中創(chuàng)建播放文件類（文件名為MediaItem.kt），其詳細(xì)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（2）初始化音視頻文件數(shù)據(jù)在yyplay/src/main/ets/viewmodel文件夾中創(chuàng)建音視頻文件數(shù)據(jù)對象常量（MEDIADATAS），詳細(xì)代碼如下所示。/__local/4/E3/18/CE2EDE9C41F616494605C3B6888_6ED27270_822177.mp4?e=.mp4倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（3）創(chuàng)建顯示音視頻文件列表項(xiàng)的自定義組件播放列表中的音視頻文件列表項(xiàng)以Row方式布局，封面圖由Image組件實(shí)現(xiàn)、顯示文件標(biāo)題由Text組件實(shí)現(xiàn)、顯示文件類別由Image組件實(shí)現(xiàn)。在yyplay/src/main/ets/view文件夾中創(chuàng)建顯示音視頻文件列表項(xiàng)的自定義組件（HorizontalItem），詳細(xì)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（4）創(chuàng)建播放音頻文件窗口的自定義組件播放音頻文件窗口組件作為影音播放器應(yīng)用頁面的子組件，當(dāng)用戶點(diǎn)擊影音播放器應(yīng)用頁面上的播放列表項(xiàng)時(shí)，播放音頻文件窗口加載的音頻文件會隨之改變。在yyplay/src/main/ets/view文件夾中創(chuàng)建播放音頻文件窗口的自定義組件（MusicWindow），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（4）創(chuàng)建播放音頻文件窗口的自定義組件播放音頻文件窗口組件作為影音播放器應(yīng)用頁面的子組件，當(dāng)用戶點(diǎn)擊影音播放器應(yīng)用頁面上的播放列表項(xiàng)時(shí)，播放音頻文件窗口加載的音頻文件會隨之改變。在yyplay/src/main/ets/view文件夾中創(chuàng)建播放音頻文件窗口的自定義組件（MusicWindow），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（4）創(chuàng)建播放音頻文件窗口的自定義組件播放音頻文件窗口組件作為影音播放器應(yīng)用頁面的子組件，當(dāng)用戶點(diǎn)擊影音播放器應(yīng)用頁面上的播放列表項(xiàng)時(shí)，播放音頻文件窗口加載的音頻文件會隨之改變。在yyplay/src/main/ets/view文件夾中創(chuàng)建播放音頻文件窗口的自定義組件（MusicWindow），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（4）創(chuàng)建播放音頻文件窗口的自定義組件播放音頻文件窗口組件作為影音播放器應(yīng)用頁面的子組件，當(dāng)用戶點(diǎn)擊影音播放器應(yīng)用頁面上的播放列表項(xiàng)時(shí)，播放音頻文件窗口加載的音頻文件會隨之改變。在yyplay/src/main/ets/view文件夾中創(chuàng)建播放音頻文件窗口的自定義組件（MusicWindow），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（5）創(chuàng)建播放視頻文件窗口的自定義組件播放視頻文件窗口組件作為影音播放器應(yīng)用頁面的子組件，當(dāng)用戶點(diǎn)擊影音播放器應(yīng)用頁面上的播放列表項(xiàng)時(shí)，播放視頻文件窗口加載的視頻文件會隨之改變。在yyplay/src/main/ets/view文件夾中創(chuàng)建播放音頻文件窗口的自定義組件（VideoWindow），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（6）創(chuàng)建設(shè)備屏幕為豎屏?xí)r的應(yīng)用頁面自定義組件當(dāng)設(shè)備屏幕為豎屏?xí)r，影音播放器頁面以Column方式布局，上半部分為音頻播放窗口或視頻播放窗口，下半部分為音視頻文件列表。在yyplay/src/main/ets/common文件夾中創(chuàng)建設(shè)備屏幕為豎屏?xí)r的應(yīng)用頁面自定義組件（ColumnView），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（7）創(chuàng)建設(shè)備屏幕為橫屏?xí)r的應(yīng)用頁面自定義組件當(dāng)設(shè)備屏幕為橫屏?xí)r，影音播放器頁面以Row方式布局，頁面左側(cè)為音視頻文件列表，右側(cè)為音頻播放窗口或視頻播放窗口。在yyplay/src/main/ets/common文件夾中創(chuàng)建設(shè)備屏幕為橫屏?xí)r的應(yīng)用頁面自定義組件（RowView），詳細(xì)實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.2.6案例：影音播放器3．實(shí)現(xiàn)流程（8）創(chuàng)建應(yīng)用主頁面組件影音播放器應(yīng)用頁面加載時(shí)，首先監(jiān)聽媒體屬性變更狀態(tài)，當(dāng)屬性變更時(shí)會觸發(fā)回調(diào)事件。如果設(shè)備為橫屏，則新聞顯示頁面加載橫屏顯示頁面（RowView.ets）；如果設(shè)備為豎屏，則新聞顯示頁面加載豎屏顯示頁面（ColumnView.ets）。在yyplay/src/main/ets/page文件夾中創(chuàng)建主頁面組件（Index），詳細(xì)實(shí)現(xiàn)代碼如右所示。倪紅軍制作6.3圖片編輯器的設(shè)計(jì)與實(shí)現(xiàn)本節(jié)要點(diǎn)1.掌握PhotoViewPicker選擇圖片/視頻或保存圖片/視頻的使用方法和應(yīng)用場景2.掌握使用圖片處理接口創(chuàng)建PixelMap、讀取圖像像素?cái)?shù)據(jù)和讀取區(qū)域內(nèi)的圖片數(shù)據(jù)等的使用方法和應(yīng)用場景3.掌握Canvas和CanvasRendering2dContext對象的使用方法和應(yīng)用場景4.掌握圖片編輯器的實(shí)現(xiàn)方法倪紅軍制作6.3.1PhotoViewPickerPhotoViewPicker（圖庫選擇器類）用于開發(fā)選擇圖片/視頻或保存圖片/視頻等應(yīng)用場景，它由ArkTS開發(fā)框架的“@ohos.file.picker”模塊提供，導(dǎo)入模塊及創(chuàng)建PhotoViewPicker實(shí)例的代碼如下所示。1．選擇圖片或視頻select(option?:PhotoSelectOptions):Promise<PhotoSelectResult>：異步選擇模式拉起photoPicker界面供用戶選擇一個(gè)或多個(gè)圖片/視頻，并以Promise形式返回選擇結(jié)果集。option參數(shù)為PhotoSelectOptions類型，表示photoPicker選擇選項(xiàng)；若省略該參數(shù)，則默認(rèn)選擇圖片或視頻類型的媒體文件，選擇媒體文件的數(shù)量最大為50。Promise回調(diào)函數(shù)返回一個(gè)PhotoSelectResult類型對象。倪紅軍制作6.3.1PhotoViewPicker1．選擇圖片或視頻select(option:PhotoSelectOptions,callback:AsyncCallback<PhotoSelectResult>):void：異步選擇模式拉起photoPicker界面供用戶選擇一個(gè)或多個(gè)圖片/視頻，并以callback函數(shù)返回一個(gè)PhotoSelectResult類型的選擇結(jié)果集，該類型對象的參數(shù)及功能說明如上表所示。option參數(shù)為PhotoSelectOptions類型，表示photoPicker選擇選項(xiàng)，該類型對象的參數(shù)及功能說明如下表所示。倪紅軍制作6.3.1PhotoViewPicker2．保存圖片或視頻save(option?:PhotoSaveOptions):Promise<Array<string>>：異步保存模式拉起photoPicker界面供用戶保存一個(gè)或多個(gè)圖片/視頻，并以Promise形式返回一個(gè)保存文件的uri數(shù)組。option參數(shù)為PhotoSaveOptions類型，表示photoPicker界面保存圖片或視頻文件的選項(xiàng)，該類型對象的參數(shù)及功能說明如下表所示；若省略該參數(shù)，則需要用戶在photoPicker界面自行輸入保存的文件名。返回值類型為Promise<Array<string>>，表示Promise回調(diào)函數(shù)返回一個(gè)保存圖片或視頻文件的Array<string>類型結(jié)果集。但是，此接口并不會將圖片/視頻保存到圖庫，而是保存到文件管理器。倪紅軍制作6.3.1PhotoViewPicker2．保存圖片或視頻save(option:PhotoSaveOptions,callback:AsyncCallback<Array<string>>):void：異步保存模式拉起photoPicker界面供用戶保存一個(gè)或多個(gè)圖片/視頻，并以callback函數(shù)返回一個(gè)Array<string>類型結(jié)果集。option參數(shù)為PhotoSaveOptions類型，表示photoPicker界面保存圖片或視頻文件的選項(xiàng)。但是，此接口并不會將圖片/視頻保存到圖庫，而是保存到文件管理器。倪紅軍制作6.3.2圖片處理接口應(yīng)用開發(fā)中使用圖片處理接口模塊相關(guān)功能之前，需要先用如下代碼導(dǎo)入“@ohos.multimedia.image”模塊。1．創(chuàng)建圖片源實(shí)例image.createImageSource(uri:string):ImageSource：根據(jù)uri創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中uri參數(shù)表示圖片路徑，但目前僅支持應(yīng)用沙箱路徑；ImageSource為圖片源類，用于獲取圖片的相關(guān)信息。image.createImageSource(uri:string,options:SourceOptions):ImageSource：根據(jù)uri創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中uri參數(shù)表示圖片路徑，options參數(shù)表示圖片屬性，SourceOptions類型對象的屬性及功能說明如表所示。倪紅軍制作6.3.2圖片處理接口應(yīng)用開發(fā)中使用圖片處理接口模塊相關(guān)功能之前，需要先用如下代碼導(dǎo)入“@ohos.multimedia.image”模塊。1．創(chuàng)建圖片源實(shí)例image.createImageSource(fd:number):ImageSource：根據(jù)文件描述符創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中fd參數(shù)表示圖片文件描述符。image.createImageSource(fd:number,options:SourceOptions):ImageSource：根據(jù)文件描述符創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中fd參數(shù)表示圖片文件描述符，options參數(shù)表示圖片屬性。image.createImageSource(buf:ArrayBuffer):ImageSource：根據(jù)緩沖區(qū)創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中buf參數(shù)表示圖片緩沖區(qū)數(shù)組。image.createImageSource(buf:ArrayBuffer,options:SourceOptions):ImageSource：根據(jù)圖片緩沖區(qū)創(chuàng)建圖片源實(shí)例，返回ImageSource類型實(shí)例。其中buf參數(shù)表示圖片緩沖區(qū)數(shù)組，options參數(shù)表示圖片屬性。倪紅軍制作6.3.2圖片處理接口2．ImageSouce類ImageSouce是圖片源類，該類包含多個(gè)用于獲取圖片相關(guān)信息的屬性和方法，ImageSource的屬性及功能如表所示。ImageSource類提供的方法及功能說明如下所示。getImageInfo(index?:number):Promise<ImageInfo>：異步獲取圖片信息，結(jié)果以Promise形式返回。index參數(shù)表示創(chuàng)建圖片源時(shí)的序號，省略時(shí)默認(rèn)為0；返回值類型為Promise<ImageInfo>，表示Promise回調(diào)函數(shù)返回一個(gè)ImageInfo類型對象，ImageInfo類型對象的屬性及功能說明如表所示。getImageInfo(index?:number,callback:AsyncCallback<ImageInfo>):void：異步獲取圖片信息，結(jié)果以callback形式返回。index參數(shù)表示創(chuàng)建圖片源時(shí)的序號，省略時(shí)默認(rèn)為0；callback表示獲取圖片信息回調(diào)，異步返回圖片信息對象。倪紅軍制作6.3.2圖片處理接口【范例6-5】設(shè)計(jì)如圖所示的圖片屬性顯示頁面，點(diǎn)擊“打開圖片”按鈕，彈出photoPicker界面供用戶選擇要顯示屬性的圖片，在photoPicker界面上選擇圖片后，該圖片會顯示在頁面中間；點(diǎn)擊“圖片屬性”按鈕，在頁面的最上方顯示當(dāng)前打開圖片的高和寬。（1）自定義openPic（）方法獲得圖片路徑倪紅軍制作6.3.2圖片處理接口【范例6-5】設(shè)計(jì)如圖所示的圖片屬性顯示頁面，點(diǎn)擊“打開圖片”按鈕，彈出photoPicker界面供用戶選擇要顯示屬性的圖片，在photoPicker界面上選擇圖片后，該圖片會顯示在頁面中間；點(diǎn)擊“圖片屬性”按鈕，在頁面的最上方顯示當(dāng)前打開圖片的高和寬。（2）功能實(shí)現(xiàn)倪紅軍制作6.3.2圖片處理接口2．ImageSouce類ImageSource類提供的方法及功能說明如下所示。createPixelMap(options?:DecodingOptions):Promise<PixelMap>：根據(jù)圖片解碼參數(shù)異步創(chuàng)建PixelMap對象，結(jié)果以Promise形式返回。options參數(shù)表示解碼參數(shù)，DecodingOptions類型對象用于設(shè)置圖像解碼選項(xiàng)，其屬性及功能說明如表所示。createPixelMap(options?:DecodingOptions,callback:AsyncCallback<PixelMap>):void：根據(jù)圖片解碼參數(shù)異步創(chuàng)建PixelMap對象，使用callback異步回調(diào)。options參數(shù)表示解碼參數(shù)，callback參數(shù)表示獲取PixelMap類型對象的回調(diào)函數(shù)。倪紅軍制作6.3.2圖片處理接口2．ImageSouce類ImageSource類提供的方法及功能說明如下所示。createPixelMap(options?:DecodingOptions):Promise<PixelMap>：根據(jù)圖片解碼參數(shù)異步創(chuàng)建PixelMap對象，結(jié)果以Promise形式返回。返回值類型為Promise<PixelMap>，表示Promise回調(diào)函數(shù)返回一個(gè)PixelMap類型對象，PixelMap類是圖像像素類，用于讀取或?qū)懭雸D像數(shù)據(jù)以及獲取圖像信息，其包含的方法及功能說明如表所示。倪紅軍制作6.3.2圖片處理接口2．ImageSouce類ImageSource類提供的方法及功能說明如下所示。createPixelMap(options?:DecodingOptions):Promise<PixelMap>：根據(jù)圖片解碼參數(shù)異步創(chuàng)建PixelMap對象，結(jié)果以Promise形式返回。返回值類型為Promise<PixelMap>，表示Promise回調(diào)函數(shù)返回一個(gè)PixelMap類型對象，PixelMap類是圖像像素類，用于讀取或?qū)懭雸D像數(shù)據(jù)以及獲取圖像信息，其包含的方法及功能說明如表所示。倪紅軍制作6.3.2圖片處理接口【范例6-6】設(shè)計(jì)如左圖所示的圖片旋轉(zhuǎn)頁面，點(diǎn)擊“打開圖片”按鈕，彈出如右圖所示的photoPicker界面供用戶選擇要旋轉(zhuǎn)的圖片，在photoPicker界面上選擇圖片后，該圖片會顯示在頁面中間；點(diǎn)擊“順時(shí)針旋轉(zhuǎn)”按鈕，圖片按順時(shí)針方向旋轉(zhuǎn)90。，點(diǎn)擊“逆時(shí)針旋轉(zhuǎn)”按鈕，圖片按逆時(shí)針方向旋轉(zhuǎn)90。倪紅軍制作6.3.2圖片處理接口【范例6-6】設(shè)計(jì)如左圖所示的圖片旋轉(zhuǎn)頁面，點(diǎn)擊“打開圖片”按鈕，彈出如右圖所示的photoPicker界面供用戶選擇要旋轉(zhuǎn)的圖片，在photoPicker界面上選擇圖片后，該圖片會顯示在頁面中間；點(diǎn)擊“順時(shí)針旋轉(zhuǎn)”按鈕，圖片按順時(shí)針方向旋轉(zhuǎn)90。，點(diǎn)擊“逆時(shí)針旋轉(zhuǎn)”按鈕，圖片按逆時(shí)針方向旋轉(zhuǎn)90。（1）自定義openPixMap（）方法獲得圖片的PixelMap倪紅軍制作6.3.2圖片處理接口【范例6-6】設(shè)計(jì)如左圖所示的圖片旋轉(zhuǎn)頁面，點(diǎn)擊“打開圖片”按鈕，彈出如右圖所示的photoPicker界面供用戶選擇要旋轉(zhuǎn)的圖片，在photoPicker界面上選擇圖片后，該圖片會顯示在頁面中間；點(diǎn)擊“順時(shí)針旋轉(zhuǎn)”按鈕，圖片按順時(shí)針方向旋轉(zhuǎn)90。，點(diǎn)擊“逆時(shí)針旋轉(zhuǎn)”按鈕，圖片按逆時(shí)針方向旋轉(zhuǎn)90。（2）功能實(shí)現(xiàn)倪紅軍制作6.3.2圖片處理接口3．創(chuàng)建ImagePacker實(shí)例image.createImagePacker():ImagePacker：創(chuàng)建ImagePacker實(shí)例，返回值為ImagePacker類型對象。4．ImagePacker類ImagePacker類是打包器類，它包含多個(gè)用于圖片壓縮和打包的屬性和方法。ImagePacker的屬性及功能如表所示。倪紅軍制作6.3.2圖片處理接口3．創(chuàng)建ImagePacker實(shí)例image.createImagePacker():ImagePacker：創(chuàng)建ImagePacker實(shí)例，返回值為ImagePacker類型對象。4．ImagePacker類ImagePacker的方法及功能如下所示。packing(source:ImageSource,option:PackingOption):Promise<ArrayBuffer>：圖片壓縮或重新打包，結(jié)果以Promise形式返回。source參數(shù)表示打包的圖片源；option參數(shù)用于設(shè)置打包參數(shù)，該參數(shù)類型為PackingOption，其屬性及功能說明如表所示。返回值類型為Promise<ArrayBuffer>，表示Promise回調(diào)函數(shù)返回一個(gè)ArrayBuffer類型對象。倪紅軍制作6.3.2圖片處理接口4．ImagePacker類packing(source:ImageSource,option:PackingOption,callback:AsyncCallback<ArrayBuffer>):void：圖片壓縮或重新打包，使用callback形式返回結(jié)果。source參數(shù)表示打包的圖片源；option參數(shù)用于設(shè)置打包參數(shù)；callback參數(shù)用于獲取圖片打包回調(diào)，回調(diào)返回一個(gè)ArrayBuffer類型對象。packing(source:PixelMap,option:PackingOption):Promise<ArrayBuffer>：圖片壓縮或重新打包，結(jié)果以Promise形式返回。source參數(shù)表示打包的PixelMap源；option參數(shù)用于設(shè)置打包參數(shù)。返回值類型為Promise<ArrayBuffer>，表示Promise回調(diào)函數(shù)返回一個(gè)ArrayBuffer類型對象。packing(source:PixelMap,option:PackingOption,callback:AsyncCallback<ArrayBuffer>):void：圖片壓縮或重新打包，使用callback形式返回結(jié)果。source參數(shù)表示打包的PixelMap源；option參數(shù)用于設(shè)置打包參數(shù)。release():Promise<void>：釋放圖片打包實(shí)例，結(jié)果以Promise形式返回。

release(callback:AsyncCallback<void>):void：釋放圖片打包實(shí)例，使用callback形式返回結(jié)果。倪紅軍制作6.3.2圖片處理接口【范例6-7】在范例6-6的基礎(chǔ)上，增加保存圖片功能。點(diǎn)擊如左圖所示的“保存圖片”按鈕，在彈出如右圖所示的photoPicker選擇器中選擇保存位置后，就可以將頁面上顯示的圖片保存到相冊中。倪紅軍制作6.3.2圖片處理接口【范例6-7】在范例6-6的基礎(chǔ)上，增加保存圖片功能。點(diǎn)擊如左圖所示的“保存圖片”按鈕，在彈出如右圖所示的photoPicker選擇器中選擇保存位置后，就可以將頁面上顯示的圖片保存到相冊中。（1）自定義savePhoto（）方法保存圖片文件倪紅軍制作6.3.2圖片處理接口【范例6-7】在范例6-6的基礎(chǔ)上，增加保存圖片功能。點(diǎn)擊如左圖所示的“保存圖片”按鈕，在彈出如右圖所示的photoPicker選擇器中選擇保存位置后，就可以將頁面上顯示的圖片保存到相冊中。（2）添加“保存圖片”按鈕點(diǎn)擊事件倪紅軍制作6.3.3Canvas組件Canvas組件（畫布組件）用于自定義繪制圖形，其接口格式如下所示。context參數(shù)用于設(shè)置CanvasRenderingContext2D對象。為了滿足各種應(yīng)用開發(fā)場景的需要，Canvas組件除支持通用屬性和通用事件外，還支持如下事件。onReady(event:()=>void)：Canvas組件初始化完成時(shí)或者Canvas組件發(fā)生大小變化時(shí)的事件回調(diào)，當(dāng)該事件被觸發(fā)時(shí)畫布被清空，該事件之后Canvas組件的寬度和高度確定，此時(shí)，既可以獲取Canvas組件的寬度和高度，也可以使用Canvas相關(guān)API繪制圖形。但是，當(dāng)Canvas組件僅發(fā)生位置變化時(shí)，只觸發(fā)onAreaChange事件，不觸發(fā)onReady事件。倪紅軍制作6.3.3Canvas組件【范例6-8】設(shè)計(jì)如圖所示的畫布頁面，畫布的寬度為“100%”、高度為“50%”、背景色為黃色的實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.3.4CanvasRenderingContext2D通過CanvasRenderingContext2D對象可以在Canvas組件上繪制指定特征的矩形、文本、圖片等圖形。CanvasRenderingContext2D的接口格式如下所示。settings參數(shù)為RenderingContextSettings類型，用于配置CanvasRendering2dContext對象是否開啟抗鋸齒。RenderingContextSettings的接口格式如下所示。為了在Canvas組件上繪制矩形、文本、圖片等二維圖形，CanvasRendering2dContext對象提供了繪制、清除不同類型圖形的方法。1．繪制填充矩形fillRect(x:number,y:number,width:number,height:number):void：在Canvas組件上繪制一個(gè)填充矩形。參數(shù)及功能說明如表所示。倪紅軍制作6.3.4CanvasRenderingContext2D2．繪制矩形框strokeRect(x:number,y:number,width:number,height:number):void：在Canvas組件上繪制一個(gè)有邊框的矩形，矩形內(nèi)部不填充。3．刪除繪制內(nèi)容clearRect(x:number,y:number,width:number,height:number):void：刪除指定區(qū)域內(nèi)的繪制內(nèi)容?！痉独?-9】在范例6-8的基礎(chǔ)上設(shè)計(jì)如圖所示的頁面，用戶在頁面上選擇“填充矩形”選項(xiàng)，點(diǎn)擊“繪矩形”按鈕后會在頁面左上角（10，10）位置處繪制寬和高均為100的填充矩形，填充色為紅色；用戶在頁面上選擇“矩形框”選項(xiàng)，點(diǎn)擊“繪矩形”按鈕后會在頁面左上角（10，150）位置處繪制寬和高均為100的矩形框，矩形的邊框顏色為藍(lán)色；點(diǎn)擊“橡皮擦”按鈕，擦除頁面上的所有圖形。詳細(xì)實(shí)現(xiàn)步驟如下所示。倪紅軍制作6.3.4CanvasRenderingContext2D4．繪制填充類文本fillText(text:string,x:number,y:number,maxWidth?:number):void：繪制填充類文本。參數(shù)及功能說明如表所示。5．繪制描邊類文本strokeText(text:string,x:number,y:number,maxWidth?:number):void：繪制描邊類文本。6．獲取文本測算對象measureText(text:string):TextMetrics：獲取一個(gè)文本測算的對象，通過該對象可以獲取指定文本的寬度值。text參數(shù)表示需要進(jìn)行測量的文本，返回值類型為TextMetrics，該類型的width屬性用于獲取指定字體的寬度。倪紅軍制作6.3.4CanvasRenderingContext2D【范例6-10】在范例6-9的基礎(chǔ)上設(shè)計(jì)如圖所示的頁面，用戶點(diǎn)擊“繪制文本”按鈕后會分別在頁面左上角（10，50）、（10，100）位置處繪制填充類文本和描邊類文本“歡迎學(xué)習(xí)OpenHarmony”，并在頁面的（10，150）位置處顯示所繪制文本的寬度。實(shí)現(xiàn)代碼如下所示。倪紅軍制作6.3.4CanvasRenderingContext2D7．繪制路徑beginPath():void：創(chuàng)建一個(gè)新的繪制路徑。moveTo(x:number,y:number):void：路徑從當(dāng)前點(diǎn)移動到指定點(diǎn)，參數(shù)（x，y）表示指定點(diǎn)坐標(biāo)。lineTo(x:number,y:number):void：從當(dāng)前點(diǎn)到指定點(diǎn)進(jìn)行路徑連接，參數(shù)（x，y）表示指定點(diǎn)坐標(biāo)。stroke(path?:Path2D):void：進(jìn)行邊框繪制操作，參數(shù)path為Path2D類型，該類型為路徑對象，支持通過對象的接口進(jìn)行路徑的描述，并通過Canvas的stroke（）方法或者fill（）方法進(jìn)行繪制。fill():void：對封閉路徑進(jìn)行填充。

closePath():void：結(jié)束當(dāng)前路徑形成一個(gè)封閉路徑。倪紅軍制作6.3.4CanvasRenderingContext2D【范例6-11】在范例6-10的基礎(chǔ)上設(shè)計(jì)如圖所示的頁面，用戶點(diǎn)擊“涂鴉”按鈕后，就可以在頁面上自由繪制圖形。實(shí)現(xiàn)步驟如下所示。（1）定義變量倪紅軍制作6.3.4CanvasRenderingContext2D【范例6-11】在范例6-10的基礎(chǔ)上設(shè)計(jì)如圖所示的頁面，用戶點(diǎn)擊“涂鴉”按鈕后，就可以在頁面上自由繪制圖形。實(shí)現(xiàn)步驟如下所示。（2）給Canvas綁定觸摸事件和手勢識別事件倪紅軍制作6.3.4CanvasRenderingContext2D【范例6-11】在范例6-10的基礎(chǔ)上設(shè)計(jì)如圖所示的頁面，用戶點(diǎn)擊“涂鴉”按鈕后，就可以在頁面上自由繪制圖形。實(shí)現(xiàn)步驟如下所示。（3）涂鴉按鈕的功能實(shí)現(xiàn)倪紅軍制作6.3.4CanvasRenderingContext2D8．修飾圖形rotate(angle:number):void：針對當(dāng)前坐標(biāo)軸進(jìn)行順時(shí)針旋轉(zhuǎn)，參數(shù)angle表示順時(shí)針旋轉(zhuǎn)的弧度值。例如，下列代碼表示將繪制的填充矩形和填充文本圖形沿順時(shí)針方向旋轉(zhuǎn)45度。scale(x:number,y:number):void：設(shè)置Canvas畫布的縮放變換屬性，后續(xù)的繪制操作將按照縮放比例進(jìn)行縮放。參數(shù)x表示設(shè)置水平方向的縮放值；參數(shù)y表示設(shè)置垂直方向的縮放值。倪紅軍制作6.3.4CanvasRenderingContext2D9．繪制圖像

drawImage(image:ImageBitmap|PixelMap,dx:number,dy:number):void：在繪制區(qū)域左上角坐標(biāo)處繪制指定圖像。參數(shù)image表示源圖像；參數(shù)（dx，dy）表示繪制區(qū)域左上角的坐標(biāo)。drawImage(image:ImageBitmap|PixelMap,dx:number,dy:number,dw:number,dh:number):void：在繪制區(qū)域指定坐標(biāo)處繪制指定圖像。參數(shù)image表示源圖像；參數(shù)（dx，dy）表示繪制區(qū)域左上角的坐標(biāo)；參數(shù)（dw，dh）表示繪制區(qū)域的寬度和高度，當(dāng)繪制區(qū)域的寬度和裁切圖像的寬度和高度不一致時(shí)，將圖像拉伸或壓縮為繪制區(qū)域的寬度和高度。drawImage(image:ImageBitmap|PixelMap,sx:number,sy:number,sw:number,sh:number,dx:number,dy:number,dw:number,dh:number):void：在繪制區(qū)域指定坐標(biāo)處繪制指定圖像的裁切區(qū)域。參數(shù)image表示源圖像；參數(shù)（sx