OpenHarmony实战开发-如何实现自定义绘制 (XComponent)

XComponent组件作为一种绘制组件，通常用于满足开发者较为复杂的自定义绘制需求，例如相机预览流的显示和游戏画面的绘制。

其可通过指定其type字段来实现不同的功能，主要有两个“surface”和“component”字段可供选择。

对于“surface”类型，开发者可将相关数据传入XComponent单独拥有的“NativeWindow”来渲染画面。

对于“component”类型，主要用于实现动态加载显示内容的目的。

surface类型

XComponent设置为surface类型时，通常用于EGL/OpenGLES和媒体数据写入，并将其显示在XComponent组件上。

设置为“surface“类型时XComponent组件可以和其他组件一起进行布局和渲染。

同时XComponent又拥有单独的“NativeWindow“，可以为开发者在native侧提供native window用来创建EGL/OpenGLES环境，进而使用标准的OpenGL ES开发。

除此之外，媒体相关应用（视频、相机等）也可以将相关数据写入XComponent所提供的NativeWindow，从而呈现相应画面。

使用EGL/OpenGLES渲染

native侧代码开发要点

应用如果要通过js来桥接native，一般需要使用napi接口来处理js交互，XComponent同样不例外。

Native侧处理js逻辑的文件类型为so：

• 每个模块对应一个so
• so的命名规则为 lib{模块名}.so

对于使用XComponent进行标准OpenGL ES开发的场景，CMAKELists.txt文件内容大致如下：

cmake_minimum_required(VERSION 3.4.1)
project(XComponent) # 项目名称

set(NATIVERENDER_ROOT_PATH ${
   CMAKE_CURRENT_SOURCE_DIR})
# 头文件查找路径
include_directories(${
   NATIVERENDER_ROOT_PATH}
                    ${
   NATIVERENDER_ROOT_PATH}/include
                    )

# 编译目标so，SHARED表示动态库
add_library(nativerender SHARED
            xxx.cpp
            )

# 查找相关库 (包括OpenGL ES相关库和XComponent提供的ndk接口)
find_library( EGL-lib
              EGL )

find_library( GLES-lib
              GLESv3 )

find_library( libace-lib
              ace_ndk.z )

# 编译so所需要的依赖
target_link_libraries(nativerender PUBLIC ${
   EGL-lib} ${
   GLES-lib} ${
   libace-lib} libace_napi.z.so libc++.a)
cmake_minimum_required(VERSION 3.4.1)
project(XComponent) # 项目名称

set(NATIVERENDER_ROOT_PATH ${
   CMAKE_CURRENT_SOURCE_DIR})
# 头文件查找路径
include_directories(${
   NATIVERENDER_ROOT_PATH}
                    ${
   NATIVERENDER_ROOT_PATH}/include
                    )

# 编译目标so，SHARED表示动态库
add_library(nativerender SHARED
            xxx.cpp
            )

# 查找相关库 (包括OpenGL ES相关库和XComponent提供的ndk接口)
find_library( EGL-lib
              EGL )

find_library( GLES-lib
              GLESv3 )

find_library( libace-lib
              ace_ndk.z )

# 编译so所需要的依赖
target_link_libraries(nativerender PUBLIC ${
   EGL-lib} ${
   GLES-lib} ${
   libace-lib} libace_napi.z.so libc++.a)

Napi模块注册

static napi_value Init(napi_env env, napi_value exports)
{
   
	// 定义暴露在模块上的方法
    napi_property_descriptor desc[] ={
   
        // 通过DECLARE_NAPI_FUNCTION宏完成方法名的映射，这里就是将native侧的PluginRender::NapiChangeColor方法映射到ets侧的changeColor方法
        DECLARE_NAPI_FUNCTION("changeColor", PluginRender::NapiChangeColor),
    };
    // 通过此接口开发者可在exports上挂载native方法（即上面的PluginRender::NapiChangeColor），exports会通过js引擎绑定到js层的一个js对象
    NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
    return exports