Xcomponent绘图流程分析

Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。针对Native XComponent，主要的开发场景如下：

• 利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。
• 在这些回调中进行初始化环境、获取当前状态、响应各类事件的开发。
• 利用Native Window和EGL接口开发自定义绘制内容以及申请和提交Buffer到图形队列。

使用的核心API

​​XComponent开发指导​​

开发流程：

1. 在界面中定义Xcomponent

2. 模块注册，注册接口函数，从而将封装的C++方法传递出来，供JS侧调用

3. 注册Component事件回调，使用NAPI实现XComponent事件回调函数

4. 初始化环境

5. 渲染功能实现

6. 释放相关资源

7. 注册与编译，使用CMake工具链将C++源代码编译成动态链接库文件

Xcomponent绘图简略流程

具体流程

ArkTS侧方法调用：

添加XComponent组件，设置XComponent组件的唯一标识id，指定XComponent组件类型及需要链接的动态库名称。

组件链接动态库加载完成后回调onLoad()方法，指定XComponent组件的上下文环境，上下文环境包含来自C++挂载的方法。

新增Button组件，绑定由NAPI注册的drawPattern()方法，实现绘制图形

C++侧渲染功能实现：

1、初始化环境：

XComponent的宽高，通过static_cast<OHNativeWindow*>()实例化NativeWindow;

− 通过 OH_NativeWindow_NativeWindowRequestBuffer 获取 OHNativeWindowBuffer 实例

n 使用系统mmap接口拿到bufferHandle的内存虚拟地址

2、绘制图形：

在接口函数NapiDrawPattern（）中调用绘制方法

创建一个bitmap对象并构造对应格式

创建一个canvas对象并与与bitmap绑定

根据需求绘制相应图形；

画完后获取像素地址，地址指向的内存包含画布画的像素数据

通过OH_NativeWindow_NativeWindowFlushBuffer 提交给消费者使用，例如：显示在屏幕上

3、改变背景：

在DispatchTouchEventCB回调函数里面调用改变背景的方法：

使用static_cast<uint32_t *>(mappedAddress_)方法用mmap获取到的地址来访问内存改变颜色

通过OH_NativeWindow_NativeWindowFlushBuffer 提交给消费者使用，显示在屏幕上。

核心代码解释

1.注册XComponent生命周期、触摸、按键等回调

3.将接口函数NapiDrawPattern ()注册为ArkTS侧接口drawPattern ()，在ArkTS侧调用drawPattern ()方法，完成绘制。

使用NAPI将C++方法传递给ArkTS：

创建接口函数NapiDrawPattern ()，封装对应C++渲染方法。根据XComponent组件信息，获取对应的渲染模块render，调用绘制方法。

注册为ArkTS侧接口的方法，固定为napi_value (*napi_callback)(napi_env env, napi_callback_info info)类型，不可更改。napi_value为NAPI定义的指针，无返回值时返回 nullptr。

将接口函数NapiDrawPattern ()注册为ArkTS侧接口drawPattern ()，在ArkTS侧调用drawPattern ()方法，完成绘制。

释放相关资源：

释放申请资源的步骤如下：

EGLCore类下创建Release()方法，去掉内存映射

PluginRender类添加Release()方法，释放EGLCore实例及PluginRender实例。

将回调函数方法绑定为组件销毁事件的回调方法，组件销毁时触发，释放相关资源。

注册与编译：

在napi_init.cpp文件中，Init方法注册上文实现的接口函数，从而将封装的C++方法传递出来，供ArkTS侧调用。

通过PluginManager调用Export（）编写接口函数，根据实际需要可以修改对应参数。

attribute((constructor))修饰的方法由系统自动调用，使用NAPI接口napi_module_register()传入模块描述信息进行模块注册。

使用CMake工具链将C++源代码编译成动态链接库文件 实现效果 实现效果

注明适配的版本信息

DevEco Studio Version: 4.0.1.601

SDK：HarmoneyOS 4.0.10.11