OpenHarmony 3.1 Release版本關鍵特性解析——ArkUI框架又有哪些新增能力?
阿新 • • 發佈:2022-05-31
ArkUI 是一套 UI 開發框架,它提供了開發者進行應用 UI 開發時所必須的能力。隨著 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”) 3.1 Release(以下簡稱 v3.1)版本的釋出,ArkUI 框架也增加了許多新能力,接下來一起看看都有哪些新增能力吧。
新增宣告式 Canvas 繪製能力中包含 Canvas 元件和 OffscreenCanvas 元件。
● Canvas元件:為了方便開發者通過繪製方式實現自定義 UI 效果,v3.1 版本新增了 Canvas 繪製能力。
● OffscreenCanvas元件:為了滿足開發者離屏繪製開發場景,v3.1 版本新增了離屏繪製能力。
有了 Canvas 繪製能力後,v3.1 版本便基於 Canvas 移植了 Lottie 的動畫庫供開發者使用,後文將詳細介紹。
新增混合開發能力
新增混合開發能力中包含了 XComponent 元件和 Web 元件。
● XComponent元件:為了便於開發者在 OpenHarmony 系統上構建 C++/TS 應用,以滿足類似遊戲、地圖等應用開發場景,v3.1 版本提供了 XComponent 元件及其配套的 NDK(native development kit,原生開發包)。
● Web元件 :為了滿足開發者在應用內載入和訪問 HTML5 網頁的需求,v3.1 版本重點構建了 Web 元件,並提供了豐富的 API,可支撐 HTML5 頁面與 TS 頁面進行資料互動。
增強UI開發能力
增強 UI 開發能力中包含了鍵盤與滑鼠的元件統一互動能力增強和開發工具鏈的 eTS 編譯打包與實時預覽能力增強。
● 鍵盤與滑鼠:新版本中還重點提升了統一互動的操作體驗,開發者無需進行復雜適配,即可支援使用者使用鍵盤、滑鼠進行 UI 互動。
● eTS編譯打包與實時預覽:為了滿足了多種狀態樣式統一設定的訴求,v3.1 版本提供了 @Style 裝飾器,優化了工具鏈的編譯效能與預覽效能,實現了支援多種檔案大型應用編譯。
看完這些新增能力,你也許會很好奇,它們是如何使用的呢?接下來一起了解一下這些新增能力的使用方法吧。
新增宣告式Canvas繪製能力
宣告式Canvas介紹
首先介紹一下宣告式 Canvas 給大家提供的繪製能力。為了更好地利用現有 Web Canvas 生態,v3.1 版本提供了標準的 W3C Canvas 繪製介面(如圖 2 所示),豐富的繪製方法可以讓開發者高效繪製出矩形、文字、影象等。
注:因OffscreenCanvas與Canvas繪製介面相同,都遵循w3c標準,故此處不再贅述
圖2 W3C Canvas繪製介面
使用方法
下面介紹一個示例,給大家展示宣告式開發正規化中 Canvas 元件的基礎使用方法。
圖 3 是三張圖片疊加的效果,頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage(x,y, width, height)方法設定圖片座標及尺寸,後面繪製的圖片自動覆蓋原來的影象,從而達到圖片疊加顯示的效果。
圖3 圖片疊加
如下程式碼所示,首先在 Column() 元件中建立了一塊畫布,並結合內建元件與屬性方法對畫布進行宣告式描述。
然後通過 RenderingContext() 獲取命令式的繪圖物件,將宣告式 UI 介面與命令式繪製良好地關聯起來。
最後通過 onReady 回撥方法直接使用命令式語法,使用繪製物件在畫布中進行繪製。
ArkUI框架新增能力概覽
本次版本更新主要提升了 ArkUI 框架開發大型應用的能力。如圖 1 所示,藍色模組是本次新版本 ArkUI 框架的新增/增強能力,它包括:Canvas、OffscreenCanvas、XComponent 元件、Web 元件、鍵盤與滑鼠以及 eTS 編譯打包與實時預覽能力。 圖1 ArkUI框架新增能力概覽圖 每一次能力的新增,都是為了讓開發者能夠更加高效、便捷地開發,下面一起了解一下這些新能力都將帶來哪些便捷。 為了便於大家理解,本次新增的能力分成了以下三類:新增宣告式 Canvas 繪製能力、新增混合開發能力和增強 UI 開發能力。 新增宣告式Canvas繪製能力新增宣告式Canvas繪製能力
宣告式Canvas介紹
首先介紹一下宣告式 Canvas 給大家提供的繪製能力。為了更好地利用現有 Web Canvas 生態,v3.1 版本提供了標準的 W3C Canvas 繪製介面(如圖 2 所示),豐富的繪製方法可以讓開發者高效繪製出矩形、文字、影象等。
注:因OffscreenCanvas與Canvas繪製介面相同,都遵循w3c標準,故此處不再贅述
圖2 W3C Canvas繪製介面
使用方法
下面介紹一個示例,給大家展示宣告式開發正規化中 Canvas 元件的基礎使用方法。
圖 3 是三張圖片疊加的效果,頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage(x,y, width, height)方法設定圖片座標及尺寸,後面繪製的圖片自動覆蓋原來的影象,從而達到圖片疊加顯示的效果。
圖3 圖片疊加
如下程式碼所示,首先在 Column() 元件中建立了一塊畫布,並結合內建元件與屬性方法對畫布進行宣告式描述。
然後通過 RenderingContext() 獲取命令式的繪圖物件,將宣告式 UI 介面與命令式繪製良好地關聯起來。
最後通過 onReady 回撥方法直接使用命令式語法,使用繪製物件在畫布中進行繪製。
@Entry @Component struct IndexCanvas { // 然後,獲取繪圖物件 private ctx: RenderingContext = new RenderingContext(this.settings); // 列出所要用到的圖片 private img: ImageBitmap = new ImageBitmap("common/bg.jpg"); build() { Column() { // 首先,建立canvas畫布 Canvas(this.ctx) .width(1500) .height(900) .backgroundColor('#ffff00') // 最後,開始繪製 .onReady(() => { this.ctx.drawImage( this.img, 400, 200, 540, 300); this.ctx.drawImage( this.img, 500, 300, 540, 300); this.ctx.drawImage( this.img, 600, 400, 540, 300); }) } .width('100%') .height('100%') } }
基於宣告式Canvas的Lottie動畫支援
介紹 Lottie 是業界常用的動畫格式,它支援通過 Canvas 渲染,OpenHarmony 團隊為大家改造了 Lottie 庫,命名為 lottie-ohos-ets,開發者可以直接引用該庫,繫結 Canvas 元件後即可顯示動畫。 使用方法 Lottie 動畫的使用主要分為以下四個步驟: 步驟一:準備 Lottie 檔案,作為資源新增(可以使用 AE 工具製作並匯出 JSON 檔案) 步驟二:引入 Lottie-ohos-ets 支援庫 import lottie from ‘lottie-ohos-ets’ 步驟三:將 Lottie 動畫與 Canvas 繫結Canvas(this.context) .onAppear(() => { // 隨Canvas佈局自動載入動畫 let anim = lottie.loadAnimation({ container: this.context, renderer: ‘canvas’, name:‘animation’, path: ‘common/lottie/ventilation_1.json’ }) })
步驟四:顯示動畫
新增混合開發能力
基於XComponent的C++/TS混合開發能力 介紹 在應用開發過程中,很多場景是無法直接採用 UI 組合實現的,例如遊戲、地圖這種應用需要依賴 C++、 SDK 進行獨立渲染,又如相機、視訊播放器這種應用是需要使用相機進行預覽顯示的,因此就需要框架能提供一種可以在 C++ 側進行繪製的元件,於是 v3.1 版本就推出了 XComponent 元件,它可以支援 C++/TS 混合開發。 如圖 4 所示,系統分為應用層、框架層和系統服務層,藍色模組是新增能力。v3.1 版本在框架層部分提供了宣告式的 XComponent 元件,以便開發者在應用頁面中進行使用。 圖4 XComponent的C++/TS混合開發 使用方法 在應用層中,開發者可以使用系統 NDK 提供的標準庫進行應用動態庫的開發,標準庫中為應用繪製提供了標準的 EGL/OpenGLES 介面,可以支援三方 SDK 直接引入使用,再結合框架層的 XComponent 提供的介面即可對 C++ 進行渲染。 基於 XComponent 元件的 C++/TS 混合開發主要分為以下幾個步驟: 步驟一:首先是開發 C++ 動態庫。基於 NDK 編譯工具,將開發者編寫的 CPP 檔案編譯成 .so 檔案。 開發者僅需要引入標頭檔案,並覆蓋 OnSurfaceCreate 方法進行繪製即可使用 NDK 提供的 OpenGLES 介面,實現繪製效果。程式碼如下:// C++ 渲染模組 #include <ace/xcomponent/native_interface_xcomponent.h> #include <EGL/egl.h> #include <GLES/gl.h> #include <stdio.h> // NDK void OnSurfaceCreate(OH_NativeXComponent* component, void* nativewindow) { mEglWindow = static_cast<EGLNativeWindowType>(nativewindow); mEGLSurface = eglCreateWindowSurface (mEGLDisplay, mEGLConfig, mEglWindow, winAttribs); // GLES Logic…… eglSwapBuffers(display, eglsurface); }步驟二:然後通過 XComponent 元件載入動態庫。呼叫 TS 介面,通過 TS 控制 C++ 邏輯,傳入資料與事件,即可對 C++ 邏輯進行渲染。 XComponent 元件的使用也極其簡單,設定引數對應動態庫名稱即可實現載入。程式碼如下:
XComponent({ id: 'xcomponentId', type: 'texture', libraryname: 'mynativerender'})