乐趣区

关于openharmony:OpenHarmony-31-Release版本关键特性解析ArkUI框架又有哪些新增能力

jiezi

ArkUI 是一套 UI 开发框架，它提供了开发者进行利用 UI 开发时所必须的能力。随着 OpenAtom OpenHarmony（以下简称“OpenHarmony”）3.1 Release（以下简称 v3.1）版本的公布，ArkUI 框架也减少了许多新能力，接下来一起看看都有哪些新增能力吧。
ArkUI 框架新增能力概览
本次版本更新次要 晋升了 ArkUI 框架开发大型利用的能力。如图 1 所示，蓝色模块是本次新版本 ArkUI 框架的新增 / 加强能力，它包含：Canvas、OffscreenCanvas、XComponent 组件、Web 组件、键盘与鼠标以及 eTS 编译打包与实时预览能力。

                   图 1 ArkUI 框架新增能力概览图

每一次能力的新增，都是为了让开发者可能更加高效、便捷地开发，上面一起理解一下这些新能力都将带来哪些便捷。
为了便于大家了解，本次新增的能力分成了以下三类：新增申明式 Canvas 绘制能力、新增混合开发能力和加强 UI 开发能力。
新增申明式 Canvas 绘制能力
新增申明式 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 规范，故此处不再赘述

应用办法
上面介绍一个示例，给大家展现申明式开发范式中 Canvas 组件的根底应用办法。
图 3 是三张图片叠加的成果，顶层的图片笼罩了底层的图片。通过顺次应用 drawImage(x,y, width, height)办法设置图片坐标及尺寸，前面绘制的图片主动笼罩原来的图像，从而达到图片叠加显示的成果。

如下代码所示，首先在 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 组件，以便开发者在利用页面中进行应用。

应用办法
在应用层中，开发者能够应用零碎 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'})

基于 Web 组件的 HTML5/TS 混合开发能力

介绍
有些利用开发场景是在利用中嵌入网页，网页可能是本地页面，也可能是网络页面，且须要在 HTML5 页面中与原生组件之间进行数据传递。针对以上开发场景，v3.1 版本提供了基于 Web 组件的 HTML5/TS 混合开发能力。
应用办法
Web 组件的应用办法次要分为以下几个步骤：
步骤一：首先提前准备好 HTML5 页面文件或者网络地址
步骤二 ：而后用 Web 组件加载 HTML5 页面
步骤三：最初就能够显示出页面内容
上面通过一个例子，来为大家展现 Web 组件加载页面的应用步骤。如图 5 所示，这是一个常见的 Web 组件应用场景，首先是筹备好网络地址 https://openharmony.cn 并将 Web 组件与其余组件在同一页面中独特纵向布局排列，而后用 Web 组件通过 src 指定首页链接并加载页面，最初页面就构建实现了。


Web 组件还提供了将 HTML5 页面与原生 TS 页面进行交互的能力，它能够反对在原生组件页面中执行 HTML5 页面中定义的 JavaScript 办法，也能够反对在 HTML5 页面中应用原生页面中注入的 JavaScript 对象。因为篇幅无限，此处不再针对上述能力开展介绍，开发者能够自行拜访社区开发文档，基于 runJavaScript 办法和 registerJavaScriptProxy 办法的示例，构建出能力更强的 Web 利用。
社区开发文档
https://gitee.com/openharmony…
加强 UI 开发能力
键盘与鼠标的组件对立交互能力加强
在 v3.1 版本中，ArkUI 框架加强了对立交互能力，它让利用开发更加化繁为简。如图 6 所示，v3.1 版本将鼠标、键盘在组件层面进行了对立，通过雷同事件回调屏蔽了输出设施类型的差别，因而开发者无需关怀具体的输出设施类型。

开发工具链的 eTS 编译打包与实时预览
开发工具链 DevEco Studio 也追随 v3.1 版本的更新做了能力的加强，能力加强后的工具实现了反对多种文件大型利用编译、领有亚秒级的实时预览成果、组件双向预览能力、能够实时查看组件的属性，且实时查看的成果已与业界持平。欢送开发者更新最新的 DevEco Studio 进行应用体验。
最初介绍一下 v3.1 版本为大家提供的新装璜器 @Style。该装璜器能够将款式对立设置，款式复用，同时 v3.1 版本针对多态成果，提供了一次性设置接口，该能力可能最大化复用款式设置。如图 7 所示，右边通过 @Style 别离定义三种款式汇合，之后通过左边 stateStyles 属性办法，同时设置给 UI 组件，即可实现图 8 中三种成果，别离为失常状态成果、按压状态成果和禁用状态成果。


结语
以上就是本期 ArkUI 框架新能力的全副介绍啦，欢送大家踊跃尝鲜。同时 ArkUI 框架将来会进一步晋升动静布局能力和推出跨 OS 平台部署等相干能力，各位开发者敬请期待！

退出移动版