Xcomponent、NativeImage开发指导

NativeImage是提供

针对NativeImage，常见的开发场景如下：

 通过NativeImage提供的Native API接口创建NativeImage实例作为消费者端，获取与该实例对应的NativeWindow作为生产者端。NativeWindow相关接口可用于填充Buffer内容并提交，NativeImage将Buffer内容更新到OpenGL外部纹理上。本模块需要配合NativeWindow、NativeBuffer、EGL、GLES3模块一起使用。

使用的核心API

​​XComponent开发​​

​​NativeImage开发​​

开发流程：

在界面中定义Xcomponent

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

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

初始化环境

渲染功能实现

释放相关资源

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

Xcomponent绘图简略流程

具体流程

ArkTS侧方法调用：

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

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

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

C++侧渲染功能实现：

1、初始化环境：

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

初始化EGL环境：检查egl扩展,通过GetPlatformEglDisplay（）方法回去当前显示设备并初始化，绑定图形绘制的API为OpenGLES，通过eglChooseConfig（）获取一个有效的系统配置信息，创建EGL上下文, 关联上下文

2、绘制图形：

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

创建OH_NativeImage实例。

获取对应的数据生产者端NativeWindow和NativeWindowBuffer

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

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

根据需求绘制相应图形；

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

3、改变背景：

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

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

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

核心代码解释

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

3、创建OH_NativeImage实例，获取对应的数据生产者端NativeWindow、NativeWindowBuffer

4.更新内容到OpenGL纹理，并解绑OpenGL纹理，绑定到新的外部纹理上。

5.将接口函数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