输入关键字搜索
如何做实名认证
什么是鸿蒙
如何做产品上架
AR是什么东西
华为的HIAI怎么样
如何实现华为开放能力集成
如何加入HarmonyOS
应用开发服务
如何接入情境感知服务
HDC开发者大会
华为账号服务实名认证
运动健康
CTRL+K
文档管理中心

HarmonyOS 5.0.0(12)

输入关键字搜索
如何做实名认证
什么是鸿蒙
如何做产品上架
AR是什么东西
华为的HIAI怎么样
如何实现华为开放能力集成
如何加入HarmonyOS
应用开发服务
如何接入情境感知服务
HDC开发者大会
华为账号服务实名认证
运动健康
CTRL+K
指南

自定义渲染 (XComponent)

更新时间: 2025-03-17 00:08
本文导读
展开章节

概述

XComponent组件作为一种渲染组件，可用于EGL/OpenGLES和媒体数据写入，通过使用XComponent持有的“NativeWindow”来渲染画面，通常用于满足开发者较为复杂的自定义渲染需求，例如相机预览流的显示和游戏画面的渲染。其可通过指定type字段来实现不同的渲染方式，分别为XComponentType.SURFACE和XComponentType.TEXTURE。对于SURFACE类型，开发者将定制的绘制内容单独展示到屏幕上。对于TEXTURE类型，开发者将定制的绘制内容和XComponent组件的内容合成后展示到屏幕上。

目前XComponent组件主要有两个应用场景。一个是Native XComponent场景，在native层获取Native XComponent实例，在native侧注册XComponent的生命周期回调，以及触摸、鼠标、按键等事件回调。另一个是ArkTS XComponent场景，在ArkTS侧获取SurfaceId，生命周期回调、触摸、鼠标、按键等事件回调等均在ArkTS侧触发。

Native XComponent场景

在XComponent组件构造函数的libraryname中定义需要加载的动态库，而后应用就可以在Native层获取Native XComponent实例，其是XComponent组件提供在Native层的实例，可作为ArkTS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取NativeWindow实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。针对Native XComponent，主要的开发场景如下：

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

接口说明

展开
接口名 描述
OH_NativeXComponent_GetXComponentId(OH_NativeXComponent* component, char* id, uint64_t* size) 获取XComponent的id。
OH_NativeXComponent_GetXComponentSize(OH_NativeXComponent* component, const void* window, uint64_t* width, uint64_t* height) 获取XComponent持有的surface的大小。
OH_NativeXComponent_GetXComponentOffset(OH_NativeXComponent* component, const void* window, double* x, double* y) 获取XComponent持有的surface相对其父组件左顶点的偏移量。
OH_NativeXComponent_GetTouchEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_TouchEvent* touchEvent) 获取由XComponent触发的触摸事件。touchEvent内的具体属性值可参考OH_NativeXComponent_TouchEvent。
OH_NativeXComponent_GetTouchPointToolType(OH_NativeXComponent* component, uint32_t pointIndex, OH_NativeXComponent_TouchPointToolType* toolType) 获取XComponent触摸点的工具类型。
OH_NativeXComponent_GetTouchPointTiltX(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltX) 获取XComponent触摸点处相对X轴的倾斜角度。
OH_NativeXComponent_GetTouchPointTiltY(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltY) 获取XComponent触摸点处相对Y轴的倾斜角度。
OH_NativeXComponent_GetMouseEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_MouseEvent* mouseEvent) 获取由XComponent触发的鼠标事件。
OH_NativeXComponent_RegisterCallback(OH_NativeXComponent* component, OH_NativeXComponent_Callback* callback) 为此OH_NativeXComponent实例注册生命周期和触摸事件回调。
OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent* component, OH_NativeXComponent_MouseEvent_Callback* callback) 为此OH_NativeXComponent实例注册鼠标事件回调。
OH_NativeXComponent_RegisterFocusEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) 为此OH_NativeXComponent实例注册获得焦点事件回调。
OH_NativeXComponent_RegisterKeyEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) 为此OH_NativeXComponent实例注册按键事件回调。
OH_NativeXComponent_RegisterBlurEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) 为此OH_NativeXComponent实例注册失去焦点事件回调。
OH_NativeXComponent_GetKeyEvent(OH_NativeXComponent* component, OH_NativeXComponent_KeyEvent** keyEvent) 获取由XComponent触发的按键事件。
OH_NativeXComponent_GetKeyEventAction(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyAction* action) 获取按键事件的动作。
OH_NativeXComponent_GetKeyEventCode(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyCode* code) 获取按键事件的键码值。
OH_NativeXComponent_GetKeyEventSourceType(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_EventSourceType* sourceType) 获取按键事件的输入源类型。
OH_NativeXComponent_GetKeyEventDeviceId(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* deviceId) 获取按键事件的设备ID。
OH_NativeXComponent_GetKeyEventTimestamp(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* timestamp) 获取按键事件的时间戳。
说明

上述接口不支持跨线程访问。

XComponent销毁（onSurfaceDestroyed回调触发后）时会释放上述接口中获取的OH_NativeXComponent和window对象。如果在之后再次使用获取的这些对象有可能会导致出现使用野指针或空指针的崩溃问题，需要开发者避免。

开发步骤

以下步骤以SURFACE类型为例，描述了如何使用XComponent组件调用Node-API接口来创建EGL/GLES环境，实现在主页面绘制图形，并可以改变图形的颜色。

  1. 在界面中定义XComponent。

    收起
    自动换行
    深色代码主题
    复制
    1. //在ets/interface/XComponentContext.ts中声明native侧接口
    2. export default interface XComponentContext {
    3.   drawPattern(): void;
    4. 

    5.   getStatus(): XComponentContextStatus;
    6. };
    7. 

    8. type XComponentContextStatus = {
    9.   hasDraw: boolean,
    10.   hasChangeColor: boolean,
    11. };
    收起
    自动换行
    深色代码主题
    复制
    1. import XComponentContext from "../interface/XComponentContext"
    2. 

    3. @Entry
    4. @Component
    5. struct Index {
    6.     xComponentContext: XComponentContext | undefined = undefined;
    7.     xComponentAttrs: XComponentAttrs = {
    8.         id: 'xcomponentId',
    9.         type: XComponentType.SURFACE,
    10.         libraryname: 'nativerender'
    11.     }
    12. 

    13.     build() {
    14.     Row() {
    15.         // ...
    16.         // 在xxx.ets 中定义 XComponent
    17.         XComponent(this.xComponentAttrs)
    18.             .focusable(true) // 可响应键盘事件
    19.             .onLoad((xComponentContext) => {
    20.                 console.log("onLoad");
    21.                 this.xComponentContext = xComponentContext as XComponentContext;
    22. 

    23.                 // 调用drawPattern绘制内容
    24.                 if (this.xComponentContext) {
    25.                     this.xComponentContext.drawPattern();
    26.                     if (this.xComponentContext.getStatus()) {
    27.                         this.xComponentContext.getStatus().hasDraw;
    28.                     }
    29.                 }
    30.             })
    31.             .onDestroy(() => {
    32.                 console.log("onDestroy");
    33.             })
    34.         // ...
    35.         }
    36.         .onClick(() => {
    37.             // 调用getStatus改变绘制内容
    38.             if (this.xComponentContext && this.xComponentContext.getStatus()) {
    39.                 this.xComponentContext.getStatus().hasChangeColor;
    40.             }
    41.         })
    42.         .height('100%')
    43.     }
    44. }
    45.     
    46. interface XComponentAttrs {
    47.     id: string;
    48.     type: number;
    49.     libraryname: string;
    50. }

  2. Node-API模块注册，具体使用请参考Native API在应用工程中的使用指导。

    收起
    自动换行
    深色代码主题
    复制
    1. #include <hilog/log.h>
    2. #include "common/common.h"
    3. #include "manager/plugin_manager.h"
    4. 

    5. // 在napi_init.cpp文件中，Init方法注册接口函数，从而将封装的C++方法传递出来，供ArkTS侧调用
    6. EXTERN_C_START
    7. static napi_value Init(napi_env env, napi_value exports) {
    8.     // ...
    9.     // 向ArkTS侧暴露接口getContext()
    10.     napi_property_descriptor desc[] = {
    11.         { "getContext", nullptr, PluginManager::GetContext, nullptr, nullptr, nullptr, napi_default, nullptr }
    12.     };
    13.     if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
    14.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Init", "napi_define_properties failed");
    15.         return nullptr;
    16.     }
    17.     // 方法内检查环境变量是否包含XComponent组件实例，若实例存在则导出绘制相关接口
    18.     PluginManager::GetInstance()->Export(env, exports);
    19.     return exports;
    20. }
    21. EXTERN_C_END
    22. 

    23. // 编写接口的描述信息，根据实际需要可以修改对应参数
    24. static napi_module nativerenderModule = {
    25.     .nm_version = 1,
    26.     .nm_flags = 0,
    27.     .nm_filename = nullptr,
    28.     // 入口函数
    29.     .nm_register_func = Init,// 指定加载对应模块时的回调函数
    30.     // 模块名称
    31.     .nm_modname =
    32.         "nativerender", // 指定模块名称，对于XComponent相关开发，这个名称必须和ArkTS侧XComponent中libraryname的值保持一致
    33.     .nm_priv = ((void *)0),
    34.     .reserved = {0}};
    35. 

    36. // __attribute__((constructor))修饰的方法由系统自动调用，使用Node-API接口napi_module_register()传入模块描述信息进行模块注册
    37. extern "C" __attribute__((constructor)) void RegisterModule(void) { napi_module_register(&nativerenderModule); }
    收起
    自动换行
    深色代码主题
    复制
    1. // 检查环境变量是否包含XComponent组件实例，若实例存在则导出绘制相关接口
    2. void PluginManager::Export(napi_env env, napi_value exports)
    3. {
    4.     if ((env == nullptr) || (exports == nullptr)) {
    5.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "Export: env or exports is null");
    6.         return;
    7.     }
    8. 

    9.     napi_value exportInstance = nullptr;
    10.     if (napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance) != napi_ok) {
    11.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "Export: napi_get_named_property fail");
    12.     }
    13. 

    14.     // 获取nativeXComponent
    15.     OH_NativeXComponent* nativeXComponent = nullptr;
    16.     if (napi_unwrap(env, exportInstance, reinterpret_cast<void**>(&nativeXComponent)) != napi_ok) {
    17.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "Export: napi_unwrap fail");
    18.         return;
    19.     }
    20. 

    21.     // 获取XComponent的id，即ArkTS侧XComponent组件构造中的id参数
    22.     char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    23.     uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    24.     if (OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    25.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    26.                      "Export: OH_NativeXComponent_GetXComponentId fail");
    27.         return;
    28.     }
    29. 

    30.     std::string id(idStr);
    31.     auto context = PluginManager::GetInstance();
    32.     if ((context != nullptr) && (nativeXComponent != nullptr)) {
    33.         context->SetNativeXComponent(id, nativeXComponent);
    34.         auto render = context->GetRender(id);
    35.         if (render != nullptr) {
    36.             // 注册回调函数
    37.             render->RegisterCallback(nativeXComponent);
    38.             // 方法内使用Node-API，导出绘制相关接口，向ArkTS侧暴露绘制相关方法
    39.             render->Export(env, exports);
    40.         }
    41.     }
    42. }
    收起
    自动换行
    深色代码主题
    复制
    1. // 使用Node-API中的napi_define_properties方法，向ArkTS侧暴露drawPattern()和getStatus()方法，在ArkTS侧调用drawPattern()来绘制内容，
    2. // 调用getStatus()来改变绘制内容
    3. void PluginRender::Export(napi_env env, napi_value exports)
    4. {
    5.     // ...
    6.     // 将接口函数注册为ArkTS侧接口drawPattern和getStatus
    7.     napi_property_descriptor desc[] = {
    8.         {"drawPattern", nullptr, PluginRender::NapiDrawPattern, nullptr, nullptr, nullptr, napi_default, nullptr},
    9.         {"getStatus", nullptr, PluginRender::TestGetXComponentStatus, nullptr, nullptr, nullptr, napi_default,
    10.          nullptr}};
    11.     if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
    12.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "Export: napi_define_properties failed");
    13.     }
    14. }

  3. 注册XComponent事件回调，使用Node-API实现XComponent事件回调函数。

    (1) 定义surface创建成功，发生改变，销毁和XComponent的touch事件回调接口。

    收起
    自动换行
    深色代码主题
    复制
    1. // 在头文件中定义PluginRender类
    2. class PluginRender {
    3. public:
    4.     explicit PluginRender(std::string& id);
    5.     ~PluginRender() {
    6.         if (eglCore_ != nullptr) {
    7.             eglCore_->Release();
    8.             delete eglCore_;
    9.             eglCore_ = nullptr;
    10.        }
    11.    }
    12.    static PluginRender* GetInstance(std::string& id);
    13.    static void Release(std::string& id);
    14.    static napi_value NapiDrawPattern(napi_env env, napi_callback_info info);
    15.    static napi_value TestGetXComponentStatus(napi_value env, napi_callback_info info);
    16.    void Export(napi_env env, napi_value exports);
    17.    void OnSurfaceChanged(OH_NativeXComponent* component, void* window);
    18.    void OnTouchEvent(OH_NativeXComponent* component, void* window);
    19.    void OnMouseEvent(OH_NativeXComponent* component, void* window);
    20.    void OnHoverEvent(OH_NativeXComponent* component, bool isHover);
    21.    void OnFocusEvent(OH_NativeXComponent* component, void* window);
    22.    void OnBlurEvent(OH_NativeXComponent* component, void* window);
    23.    void OnKeyEvent(OH_NativeXComponent* component, void* window);
    24.    void RegisterCallback(OH_NativeXComponent* NativeXComponent);
    25. 

    26. public:
    27.     static std::unordered_map<std::string, PluginRender*> instance_;
    28.     EGLCore* eglCore_;
    29.     std::string id_;
    30.     static int32_t hasDraw_;
    31.     static int32_t hasChangeColor_;
    32. 

    33. private:
    34.     OH_NativeXComponent_Callback renderCallback_;
    35.     OH_NativeXComponent_MouseEvent_Callback mouseCallback_;
    36. };
    收起
    自动换行
    深色代码主题
    复制
    1. // 在源文件中实现PluginRender类中方法
    2. std::unordered_map<std::string, PluginRender *> PluginRender::instance_;
    3. int32_t PluginRender::hasDraw_ = 0;
    4. int32_t PluginRender::hasChangeColor_ = 0;
    5. 

    6. PluginRender::PluginRender(std::string& id) {
    7.     this->id_ = id;
    8.     this->eglCore_ = new EGLCore();
    9. }
    10. 

    11. PluginRender* PluginRender::GetInstance(std::string& id) {
    12.     if (instance_.find(id) == instance_.end()) {
    13.         PluginRender* instance = new PluginRender(id);
    14.         instance_[id] = instance;
    15.         return instance;
    16.     } else {
    17.         return instance_[id];
    18.     }
    19. }
    20. 

    21. // 定义一个函数OnSurfaceCreatedCB()，封装初始化环境与绘制背景
    22. void OnSurfaceCreatedCB(OH_NativeXComponent *component, void *window) {
    23.        // ...
    24.        // 获取XComponent的id，即ArkTS侧XComponent组件构造中的id参数
    25.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    26.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    27.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    28.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
    29.                         "OnSurfaceCreatedCB: Unable to get XComponent id");
    30.            return;
    31.        }
    32. 

    33.        // 初始化环境与绘制背景
    34.        std::string id(idStr);
    35.        auto render = PluginRender::GetInstance(id);
    36.        uint64_t width;
    37.        uint64_t height;
    38.        // 获取XComponent拥有的surface的大小
    39.        int32_t xSize = OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
    40.        if ((xSize == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) && (render != nullptr)) {
    41.            if (render->eglCore_->EglContextInit(window, width, height)) {
    42.                render->eglCore_->Background();
    43.            }
    44.        }
    45. }
    46. 

    47. // 定义一个函数OnSurfaceChangedCB()
    48. void OnSurfaceChangedCB(OH_NativeXComponent *component, void *window) {
    49.        // ...
    50.        // 获取XComponent的id
    51.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    52.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    53.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    54.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
    55.                         "OnSurfaceChangedCB: Unable to get XComponent id");
    56.            return;
    57.        }
    58. 

    59.        std::string id(idStr);
    60.        auto render = PluginRender::GetInstance(id);
    61.        if (render != nullptr) {
    62.            // 封装OnSurfaceChanged方法
    63.            render->OnSurfaceChanged(component, window);
    64.        }
    65. }
    66. 

    67. // 定义一个函数OnSurfaceDestroyedCB()，将PluginRender类内释放资源的方法Release()封装在其中
    68. void OnSurfaceDestroyedCB(OH_NativeXComponent *component, void *window) {
    69.        // ...
    70.        // 获取XComponent的id
    71.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    72.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    73.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    74.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
    75.                         "OnSurfaceDestroyedCB: Unable to get XComponent id");
    76.            return;
    77.        }
    78. 

    79.        std::string id(idStr);
    80.        // 释放资源
    81.        PluginRender::Release(id);
    82. }
    83. 

    84. // 定义一个函数DispatchTouchEventCB()，响应触摸事件时触发该回调
    85. void DispatchTouchEventCB(OH_NativeXComponent *component, void *window) {
    86.        // ...
    87.        // 获取XComponent的id
    88.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
    89.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    90.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    91.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
    92.                         "DispatchTouchEventCB: Unable to get XComponent id");
    93.            return;
    94.        }
    95. 

    96.        std::string id(idStr);
    97.        PluginRender *render = PluginRender::GetInstance(id);
    98.        if (render != nullptr) {
    99.            // 封装OnTouchEvent方法
    100.            render->OnTouchEvent(component, window);
    101.        }
    102. }
    103. 

    104. // 定义一个函数DispatchMouseEventCB()，响应鼠标事件时触发该回调
    105. void DispatchMouseEventCB(OH_NativeXComponent *component, void *window) {
    106.        // ...
    107.        int32_t ret;
    108.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
    109.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    110.        ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
    111.        if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    112.            return;
    113.        }
    114. 

    115.        std::string id(idStr);
    116.        auto render = PluginRender::GetInstance(id);
    117.        if (render) {
    118.            // 封装OnMouseEvent方法
    119.            render->OnMouseEvent(component, window);
    120.        }
    121. }
    122. 

    123. // 定义一个函数DispatchHoverEventCB()，响应鼠标悬停事件时触发该回调
    124. void DispatchHoverEventCB(OH_NativeXComponent *component, bool isHover) {
    125.        // ...
    126.        int32_t ret;
    127.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
    128.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    129.        ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
    130.        if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    131.            return;
    132.        }
    133. 

    134.        std::string id(idStr);
    135.        auto render = PluginRender::GetInstance(id);
    136.        if (render) {
    137.            // 封装OnHoverEvent方法
    138.            render->OnHoverEvent(component, isHover);
    139.        }
    140. }
    141. 

    142. // 定义一个函数OnFocusEventCB()，响应获焦事件时触发该回调
    143. void OnFocusEventCB(OH_NativeXComponent *component, void *window) {
    144.     // ...
    145.        int32_t ret;
    146.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
    147.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    148.        ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
    149.        if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    150.            return;
    151.        }
    152. 

    153.        std::string id(idStr);
    154.        auto render = PluginRender::GetInstance(id);
    155.        if (render) {
    156.            // 封装OnFocusEvent方法
    157.            render->OnFocusEvent(component, window);
    158.        }
    159. }
    160. 

    161. // 定义一个函数OnBlurEventCB()，响应失去焦点事件时触发该回调
    162. void OnBlurEventCB(OH_NativeXComponent *component, void *window) {
    163.        // ...
    164.        int32_t ret;
    165.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
    166.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    167.        ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
    168.        if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    169.            return;
    170.        }
    171. 

    172.        std::string id(idStr);
    173.        auto render = PluginRender::GetInstance(id);
    174.        if (render) {
    175.            // 封装OnBlurEvent方法
    176.            render->OnBlurEvent(component, window);
    177.        }
    178. }
    179. 

    180. // 定义一个函数OnKeyEventCB()，响应按键事件时触发该回调
    181. void OnKeyEventCB(OH_NativeXComponent *component, void *window) {
    182.        // ...
    183.        int32_t ret;
    184.        char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
    185.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    186.        ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
    187.        if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    188.            return;
    189.        }
    190. 

    191.        std::string id(idStr);
    192.        auto render = PluginRender::GetInstance(id);
    193.        if (render) {
    194.            // 封装OnKeyEvent方法
    195.            render->OnKeyEvent(component, window);
    196.        }
    197. }
    198. 

    199. // 定义一个OnSurfaceChanged()方法
    200. void PluginRender::OnSurfaceChanged(OH_NativeXComponent* component, void* window) {
    201.     char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
    202.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    203.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    204.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback", "OnSurfaceChanged: Unable to get XComponent id");
    205.            return;
    206.        }
    207. 

    208.     std::string id(idStr);
    209.     PluginRender* render = PluginRender::GetInstance(id);
    210.     double offsetX;
    211.     double offsetY;
    212.     // 获取XComponent持有的surface相对其父组件左顶点的偏移量
    213.     OH_NativeXComponent_GetXComponentOffset(component, window, &offsetX, &offsetY);
    214.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OH_NativeXComponent_GetXComponentOffset",
    215.                  "offsetX = %{public}lf, offsetY = %{public}lf", offsetX, offsetY);
    216.     uint64_t width;
    217.     uint64_t height;
    218.     OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
    219.     if (render != nullptr) {
    220.         render->eglCore_->UpdateSize(width, height);
    221.     }
    222. }
    223. 

    224. // 定义一个OnTouchEvent()方法
    225. void PluginRender::OnTouchEvent(OH_NativeXComponent* component, void* window) {
    226.     char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
    227.        uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    228.        if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    229.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
    230.                         "OnTouchEvent: Unable to get XComponent id");
    231.            return;
    232.        }
    233. 

    234.     OH_NativeXComponent_TouchEvent touchEvent;
    235.     // 获取由XComponent触发的触摸事件
    236.     OH_NativeXComponent_GetTouchEvent(component, window, &touchEvent);
    237.     // 获取XComponent触摸点相对于XComponent组件左边缘的坐标x和相对于XComponent组件上边缘的坐标y
    238.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent", "touch info: x = %{public}lf, y = %{public}lf",
    239.                  touchEvent.x, touchEvent.y);
    240.     // 获取XComponent触摸点相对于XComponent所在应用窗口左上角的x坐标和相对于XComponent所在应用窗口左上角的y坐标
    241.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
    242.                  "touch info: screenX = %{public}lf, screenY = %{public}lf", touchEvent.screenX, touchEvent.screenY);
    243.     std::string id(idStr);
    244.     PluginRender* render = PluginRender::GetInstance(id);
    245.     if (render != nullptr && touchEvent.type == OH_NativeXComponent_TouchEventType::OH_NATIVEXCOMPONENT_UP) {
    246.         render->eglCore_->ChangeColor();
    247.         hasChangeColor_ = 1;
    248.     }
    249.     float tiltX = 0.0f;
    250.     float tiltY = 0.0f;
    251.     OH_NativeXComponent_TouchPointToolType toolType =
    252.         OH_NativeXComponent_TouchPointToolType::OH_NATIVEXCOMPONENT_TOOL_TYPE_UNKNOWN;
    253.     // 获取XComponent触摸点的工具类型
    254.     OH_NativeXComponent_GetTouchPointToolType(component, 0, &toolType);
    255.     // 获取XComponent触摸点处相对X轴的倾斜角度
    256.     OH_NativeXComponent_GetTouchPointTiltX(component, 0, &tiltX);
    257.     // 获取XComponent触摸点处相对Y轴的倾斜角度
    258.     OH_NativeXComponent_GetTouchPointTiltY(component, 0, &tiltY);
    259.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
    260.                  "touch info: toolType = %{public}d, tiltX = %{public}lf, tiltY = %{public}lf", toolType, tiltX, tiltY);
    261. }
    262. 

    263. // 定义一个OnMouseEvent()方法
    264. void PluginRender::OnMouseEvent(OH_NativeXComponent *component, void *window) {
    265.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnMouseEvent");
    266.     OH_NativeXComponent_MouseEvent mouseEvent;
    267.     // 获取由XComponent触发的鼠标事件
    268.     int32_t ret = OH_NativeXComponent_GetMouseEvent(component, window, &mouseEvent);
    269.     if (ret == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    270.            OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender",
    271.                      "MouseEvent Info: x = %{public}f, y = %{public}f, action = %{public}d, button = %{public}d",
    272.                      mouseEvent.x, mouseEvent.y, mouseEvent.action, mouseEvent.button);
    273.     } else {
    274.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetMouseEvent error");
    275.     }
    276. }
    277. 

    278. // 定义一个OnHoverEvent()方法
    279. void PluginRender::OnHoverEvent(OH_NativeXComponent* component, bool isHover) {
    280.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnHoverEvent isHover_ = %{public}d", isHover);
    281. }
    282. 

    283. // 定义一个OnFocusEvent()方法
    284. void PluginRender::OnFocusEvent(OH_NativeXComponent* component, void* window) {
    285.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnFocusEvent");
    286. }
    287. 

    288. // 定义一个OnBlurEvent()方法
    289. void PluginRender::OnBlurEvent(OH_NativeXComponent* component, void* window) {
    290.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnBlurEvent");
    291. }
    292. 

    293. // 定义一个OnKeyEvent()方法
    294. void PluginRender::OnKeyEvent(OH_NativeXComponent *component, void *window) {
    295.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnKeyEvent");
    296. 

    297.     OH_NativeXComponent_KeyEvent *keyEvent = nullptr;
    298.     // 获取由XComponent触发的按键事件
    299.     if (OH_NativeXComponent_GetKeyEvent(component, &keyEvent) >= 0) {
    300.            OH_NativeXComponent_KeyAction action;
    301.         // 获取按键事件的动作
    302.            OH_NativeXComponent_GetKeyEventAction(keyEvent, &action);
    303.            OH_NativeXComponent_KeyCode code;
    304.         // 获取按键事件的键码值
    305.            OH_NativeXComponent_GetKeyEventCode(keyEvent, &code);
    306.            OH_NativeXComponent_EventSourceType sourceType;
    307.         // 获取按键事件的输入源类型
    308.            OH_NativeXComponent_GetKeyEventSourceType(keyEvent, &sourceType);
    309.            int64_t deviceId;
    310.         // 获取按键事件的设备ID
    311.            OH_NativeXComponent_GetKeyEventDeviceId(keyEvent, &deviceId);
    312.            int64_t timeStamp;
    313.         // 获取按键事件的时间戳
    314.            OH_NativeXComponent_GetKeyEventTimestamp(keyEvent, &timeStamp);
    315.            OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender",
    316.                      "KeyEvent Info: action=%{public}d, code=%{public}d, sourceType=%{public}d, deviceId=%{public}ld, "
    317.                      "timeStamp=%{public}ld",
    318.                      action, code, sourceType, deviceId, timeStamp);
    319.     } else {
    320.            OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetKeyEvent error");
    321.     }
    322. }

    (2) 注册XComponent事件回调函数，在XComponent事件触发时调用3.1步骤中定义的方法。

    收起
    自动换行
    深色代码主题
    复制
    1. void PluginRender::RegisterCallback(OH_NativeXComponent *NativeXComponent) {
    2.     // 设置组件创建事件的回调函数，组件创建时触发相关操作，初始化环境与绘制背景
    3.     renderCallback_.OnSurfaceCreated = OnSurfaceCreatedCB;
    4.     // 设置组件改变事件的回调函数，组件改变时触发相关操作
    5.     renderCallback_.OnSurfaceChanged = OnSurfaceChangedCB;
    6.     // 设置组件销毁事件的回调函数，组件销毁时触发相关操作，释放申请的资源
    7.     renderCallback_.OnSurfaceDestroyed = OnSurfaceDestroyedCB;
    8.     // 设置触摸事件的回调函数，在触摸事件触发时调用Node-API接口函数，从而调用原C++方法
    9.     renderCallback_.DispatchTouchEvent = DispatchTouchEventCB;
    10.     // 将OH_NativeXComponent_Callback注册给NativeXComponent
    11.     OH_NativeXComponent_RegisterCallback(NativeXComponent, &renderCallback_);
    12.     
    13.     // 设置鼠标事件的回调函数，在触摸事件触发时调用Node-API接口函数，从而调用原C++方法
    14.     mouseCallback_.DispatchMouseEvent = DispatchMouseEventCB;
    15.     // 设置鼠标悬停事件的回调函数，在触摸事件触发时调用Node-API接口函数，从而调用原C++方法
    16.     mouseCallback_.DispatchHoverEvent = DispatchHoverEventCB;
    17.     // 将OH_NativeXComponent_MouseEvent_Callback注册给NativeXComponent
    18.     OH_NativeXComponent_RegisterMouseEventCallback(NativeXComponent, &mouseCallback_);
    19.     
    20.     // 将OnFocusEventCB方法注册给NativeXComponent
    21.     OH_NativeXComponent_RegisterFocusEventCallback(NativeXComponent, OnFocusEventCB);
    22.     // 将OnKeyEventCB方法注册给NativeXComponent
    23.     OH_NativeXComponent_RegisterKeyEventCallback(NativeXComponent, OnKeyEventCB);
    24.     // 将OnBlurEventCB方法注册给 NativeXComponent
    25.     OH_NativeXComponent_RegisterBlurEventCallback(NativeXComponent, OnBlurEventCB);
    26. }

    (3) 定义NapiDrawPattern方法，暴露到ArkTS侧的drawPattern()方法会执行该方法。

    收起
    自动换行
    深色代码主题
    复制
    1. napi_value PluginRender::NapiDrawPattern(napi_env env, napi_callback_info info) {
    2.     // ...
    3.     // 获取环境变量参数
    4.     napi_value thisArg;
    5.     if (napi_get_cb_info(env, info, nullptr, nullptr, &thisArg, nullptr) != napi_ok) {
    6.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "NapiDrawPattern: napi_get_cb_info fail");
    7.         return nullptr;
    8.     }
    9.    
    10.     // 获取环境变量中XComponent实例
    11.     napi_value exportInstance;
    12.     if (napi_get_named_property(env, thisArg, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance) != napi_ok) {
    13.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender",
    14.                      "NapiDrawPattern: napi_get_named_property fail");
    15.         return nullptr;
    16.     }
    17.    
    18.     // 通过napi_unwrap接口，获取XComponent的实例指针
    19.     OH_NativeXComponent *NativeXComponent = nullptr;
    20.     if (napi_unwrap(env, exportInstance, reinterpret_cast<void **>(&NativeXComponent)) != napi_ok) {
    21.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "NapiDrawPattern: napi_unwrap fail");
    22.         return nullptr;
    23.     }
    24.    
    25.     // 获取XComponent实例的id
    26.     char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
    27.     uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    28.     if (OH_NativeXComponent_GetXComponentId(NativeXComponent, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    29.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender",
    30.                      "NapiDrawPattern: Unable to get XComponent id");
    31.         return nullptr;
    32.     }
    33.    
    34.     std::string id(idStr);
    35.     PluginRender *render = PluginRender::GetInstance(id);
    36.     if (render) {
    37.         // 调用绘制方法
    38.         render->eglCore_->Draw();
    39.         OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "render->eglCore_->Draw() executed");
    40.     }
    41.     return nullptr;
    42. }

    (4) 定义TestGetXComponentStatus方法，暴露到ArkTS侧的getStatus()方法会执行该方法。

    收起
    自动换行
    深色代码主题
    复制
    1. napi_value PluginRender::TestGetXComponentStatus(napi_env env, napi_callback_info info) {
    2.     napi_value hasDraw;
    3.     napi_value hasChangeColor;
    4. 

    5.     napi_create_int32(env, hasDraw_, &(hasDraw));
    6.     napi_create_int32(env, hasChangeColor_, &(hasChangeColor));
    7. 

    8.     napi_value obj;
    9.     napi_create_object(env, &obj);
    10.     napi_set_named_property(env, obj, "hasDraw", hasDraw);
    11.     napi_set_named_property(env, obj, "hasChangeColor", hasChangeColor);
    12. 

    13.     return obj;
    14. }

  4. 初始化环境，包括初始化可用的EGLDisplay、确定可用的surface配置、创建渲染区域surface、创建并关联上下文等。

    收起
    自动换行
    深色代码主题
    复制
    1. void EGLCore::UpdateSize(int width, int height) {
    2.     // width_和height_在头文件中定义
    3.     width_ = width;
    4.     height_ = height;
    5. }
    6. 

    7. bool EGLCore::EglContextInit(void *window, int width, int height) {
    8.     // ...
    9.     UpdateSize(width, height);
    10.     eglWindow_ = static_cast<EGLNativeWindowType>(window);
    11. 

    12.     // 初始化display
    13.     eglDisplay_ = eglGetDisplay(EGL_DEFAULT_DISPLAY);
    14.     if (eglDisplay_ == EGL_NO_DISPLAY) {
    15.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglGetDisplay: unable to get EGL display");
    16.         return false;
    17.     }
    18. 

    19.     // 初始化EGL
    20.     EGLint majorVersion;
    21.     EGLint minorVersion;
    22.     if (!eglInitialize(eglDisplay_, &majorVersion, &minorVersion)) {
    23.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore",
    24.             "eglInitialize: unable to get initialize EGL display");
    25.         return false;
    26.     }
    27. 

    28.     // 选择配置
    29.     const EGLint maxConfigSize = 1;
    30.     EGLint numConfigs;
    31.     if (!eglChooseConfig(eglDisplay_, ATTRIB_LIST, &eglConfig_, maxConfigSize, &numConfigs)) {
    32.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglChooseConfig: unable to choose configs");
    33.         return false;
    34.     }
    35. 

    36.     // 创建环境
    37.     return CreateEnvironment();
    38. }
    收起
    自动换行
    深色代码主题
    复制
    1. bool EGLCore::CreateEnvironment() {
    2.     // ...
    3.     // 创建surface
    4.     eglSurface_ = eglCreateWindowSurface(eglDisplay_, eglConfig_, eglWindow_, NULL);
    5. 

    6.     // ...
    7.     // 创建context
    8.     eglContext_ = eglCreateContext(eglDisplay_, eglConfig_, EGL_NO_CONTEXT, CONTEXT_ATTRIBS);
    9.     if (!eglMakeCurrent(eglDisplay_, eglSurface_, eglSurface_, eglContext_)) {
    10.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglMakeCurrent failed");
    11.         return false;
    12.     }
    13. 

    14.     // 创建program
    15.     program_ = CreateProgram(VERTEX_SHADER, FRAGMENT_SHADER);
    16.     if (program_ == PROGRAM_ERROR) {
    17.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "CreateProgram: unable to create program");
    18.         return false;
    19.     }
    20.     return true;
    21. }
    22. 

    23. GLuint EGLCore::CreateProgram(const char* vertexShader, const char* fragShader) {
    24.     if ((vertexShader == nullptr) || (fragShader == nullptr)) {
    25.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore",
    26.                      "createProgram: vertexShader or fragShader is null");
    27.         return PROGRAM_ERROR;
    28.     }
    29. 

    30.     GLuint vertex = LoadShader(GL_VERTEX_SHADER, vertexShader);
    31.     if (vertex == PROGRAM_ERROR) {
    32.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "createProgram vertex error");
    33.         return PROGRAM_ERROR;
    34.     }
    35. 

    36.     GLuint fragment = LoadShader(GL_FRAGMENT_SHADER, fragShader);
    37.     if (fragment == PROGRAM_ERROR) {
    38.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "createProgram fragment error");
    39.         return PROGRAM_ERROR;
    40.     }
    41. 

    42.     GLuint program = glCreateProgram();
    43.     if (program == PROGRAM_ERROR) {
    44.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "createProgram program error");
    45.         glDeleteShader(vertex);
    46.         glDeleteShader(fragment);
    47.         return PROGRAM_ERROR;
    48.     }
    49. 

    50.     // The gl function has no return value.
    51.     glAttachShader(program, vertex);
    52.     glAttachShader(program, fragment);
    53.     glLinkProgram(program);
    54. 

    55.     GLint linked;
    56.     glGetProgramiv(program, GL_LINK_STATUS, &linked);
    57.     if (linked != 0) {
    58.         glDeleteShader(vertex);
    59.         glDeleteShader(fragment);
    60.         return program;
    61.     }
    62. 

    63.     OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "createProgram linked error");
    64.     GLint infoLen = 0;
    65.     glGetProgramiv(program, GL_INFO_LOG_LENGTH, &infoLen);
    66.     if (infoLen > 1) {
    67.         char* infoLog = (char*)malloc(sizeof(char) * (infoLen + 1));
    68.         memset(infoLog, 0, infoLen + 1);
    69.         glGetProgramInfoLog(program, infoLen, nullptr, infoLog);
    70.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "glLinkProgram error = %s", infoLog);
    71.         free(infoLog);
    72.         infoLog = nullptr;
    73.     }
    74.     glDeleteShader(vertex);
    75.     glDeleteShader(fragment);
    76.     glDeleteProgram(program);
    77.     return PROGRAM_ERROR;
    78. }
    79. 

    80. GLuint EGLCore::LoadShader(GLenum type, const char* shaderSrc) {
    81.     if ((type <= 0) || (shaderSrc == nullptr)) {
    82.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "glCreateShader type or shaderSrc error");
    83.         return PROGRAM_ERROR;
    84.     }
    85. 

    86.     GLuint shader = glCreateShader(type);
    87.     if (shader == 0) {
    88.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "glCreateShader unable to load shader");
    89.         return PROGRAM_ERROR;
    90.     }
    91. 

    92.     // The gl function has no return value.
    93.     glShaderSource(shader, 1, &shaderSrc, nullptr);
    94.     glCompileShader(shader);
    95. 

    96.     GLint compiled;
    97.     glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled);
    98.     if (compiled != 0) {
    99.         return shader;
    100.     }
    101. 

    102.     GLint infoLen = 0;
    103.     glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &infoLen);
    104.     if (infoLen <= 1) {
    105.         glDeleteShader(shader);
    106.         return PROGRAM_ERROR;
    107.     }
    108. 

    109.     char *infoLog = (char*)malloc(sizeof(char) * (infoLen + 1));
    110.     if (infoLog != nullptr) {
    111.         memset(infoLog, 0, infoLen + 1);
    112.         glGetShaderInfoLog(shader, infoLen, nullptr, infoLog);
    113.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "glCompileShader error = %s", infoLog);
    114.         free(infoLog);
    115.         infoLog = nullptr;
    116.     }
    117.     glDeleteShader(shader);
    118.     return PROGRAM_ERROR;
    119. }

  5. 渲染功能实现。

    (1) 绘制背景。

    收起
    自动换行
    深色代码主题
    复制
    1. // ...
    2. // 绘制背景颜色 #f4f4f4
    3. const GLfloat BACKGROUND_COLOR[] = { 244.0f / 255, 244.0f / 255, 244.0f / 255, 1.0f };
    4. 

    5. // 绘制图案颜色
    6. const GLfloat DRAW_COLOR[] = {126.0f / 255, 143.0f / 255, 251.0f / 255, 1.0f};
    7. 

    8. // 绘制图案改变后的颜色
    9. const GLfloat CHANGE_COLOR[] = {146.0f / 255, 214.0f / 255, 204.0f / 255, 1.0f};
    10. 

    11. // 绘制背景顶点
    12. const GLfloat BACKGROUND_RECTANGLE_VERTICES[] = {
    13.     -1.0f, 1.0f,
    14.     1.0f, 1.0f,
    15.     1.0f, -1.0f,
    16.     -1.0f, -1.0f
    17. };
    18. // ...
    收起
    自动换行
    深色代码主题
    复制
    1. // 绘制背景颜色
    2. void EGLCore::Background() {
    3.     GLint position = PrepareDraw();
    4.     if (position == POSITION_ERROR) {
    5.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background get position failed");
    6.         return;
    7.     }
    8. 

    9.     if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
    10.                      sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
    11.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background execute draw failed");
    12.         return;
    13.     }
    14. 

    15.     if (!FinishDraw()) {
    16.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background FinishDraw failed");
    17.         return;
    18.     }
    19. }
    20. 

    21. // 绘前准备，获取position，创建成功时position值从0开始
    22. GLint EGLCore::PrepareDraw() {
    23.     if ((eglDisplay_ == nullptr) || (eglSurface_ == nullptr) || (eglContext_ == nullptr) ||
    24.         (!eglMakeCurrent(eglDisplay_, eglSurface_, eglSurface_, eglContext_))) {
    25.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "PrepareDraw: param error");
    26.         return POSITION_ERROR;
    27.     }
    28. 

    29.     glViewport(DEFAULT_X_POSITION, DEFAULT_Y_POSITION, width_, height_);
    30.     glClearColor(GL_RED_DEFAULT, GL_GREEN_DEFAULT, GL_BLUE_DEFAULT, GL_ALPHA_DEFAULT);
    31.     glClear(GL_COLOR_BUFFER_BIT);
    32.     glUseProgram(program_);
    33. 

    34.     return glGetAttribLocation(program_, POSITION_NAME);
    35. }
    36. 

    37. // 依据传入参数在指定区域绘制指定颜色
    38. bool EGLCore::ExecuteDraw(GLint position, const GLfloat *color, const GLfloat shapeVertices[], unsigned long vertSize) {
    39.     if ((position > 0) || (color == nullptr) || (vertSize / sizeof(shapeVertices[0]) != SHAPE_VERTICES_SIZE)) {
    40.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ExecuteDraw: param error");
    41.         return false;
    42.     }
    43. 

    44.     glVertexAttribPointer(position, POINTER_SIZE, GL_FLOAT, GL_FALSE, 0, shapeVertices);
    45.     glEnableVertexAttribArray(position);
    46.     glVertexAttrib4fv(1, color);
    47.     glDrawArrays(GL_TRIANGLE_FAN, 0, TRIANGLE_FAN_SIZE);
    48.     glDisableVertexAttribArray(position);
    49. 

    50.     return true;
    51. }
    52. 

    53. // 结束绘制操作
    54. bool EGLCore::FinishDraw() {
    55.     // 强制刷新缓冲
    56.     glFlush();
    57.     glFinish();
    58.     return eglSwapBuffers(eglDisplay_, eglSurface_);
    59. }

    (2) 绘制图形。

    收起
    自动换行
    深色代码主题
    复制
    1. void EGLCore::Draw() {
    2.     flag_ = false;
    3.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "Draw");
    4.     GLint position = PrepareDraw();
    5.     if (position == POSITION_ERROR) {
    6.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw get position failed");
    7.         return;
    8.     }
    9. 

    10.     // 绘制背景
    11.     if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
    12.                      sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
    13.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw background failed");
    14.         return;
    15.     }
    16.     
    17.     // 将五角星分为五个四边形，计算其中一个四边形的四个顶点
    18.     GLfloat rotateX = 0;
    19.     GLfloat rotateY = FIFTY_PERCENT * height_;
    20.     GLfloat centerX = 0;
    21.     GLfloat centerY = -rotateY * (M_PI / 180 * 54) * (M_PI / 180 * 18);
    22.     GLfloat leftX = -rotateY * (M_PI / 180 * 18);
    23.     GLfloat leftY = 0;
    24.     GLfloat rightX = rotateY * (M_PI / 180 * 18);
    25.     GLfloat rightY = 0;
    26. 

    27.     // 确定绘制四边形的顶点，使用绘制区域的百分比表示
    28.     const GLfloat shapeVertices[] = {
    29.         centerX / width_, centerY / height_,
    30.         leftX / width_, leftY / height_,
    31.         rotateX / width_, rotateY / height_,
    32.         rightX / width_, rightY / height_
    33.     };
    34.     
    35.     if (!ExecuteDrawStar(position, DRAW_COLOR, shapeVertices, sizeof(shapeVertices))) {
    36.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
    37.         return;
    38.     }
    39.     
    40.     GLfloat rad = M_PI / 180 * 72;
    41.     for (int i = 0; i < 4; ++i) 
    42.     {
    43.         // 旋转得其他四个四边形的顶点
    44.         rotate2d(centerX, centerY, &rotateX, &rotateY,rad);
    45.         rotate2d(centerX, centerY, &leftX, &leftY,rad);
    46.         rotate2d(centerX, centerY, &rightX, &rightY,rad);
    47.         
    48.         // 确定绘制四边形的顶点，使用绘制区域的百分比表示
    49.         const GLfloat shapeVertices[] = {
    50.                 centerX / width_, centerY / height_,
    51.                 leftX / width_, leftY / height_,
    52.                 rotateX / width_, rotateY / height_,
    53.                 rightX / width_, rightY / height_
    54.         };
    55.         
    56.         // 绘制图形
    57.         if (!ExecuteDrawStar(position, DRAW_COLOR, shapeVertices, sizeof(shapeVertices))) {
    58.             OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
    59.             return;
    60.         }
    61.     }
    62. 

    63.     // 结束绘制
    64.     if (!FinishDraw()) {
    65.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw FinishDraw failed");
    66.         return;
    67.     }
    68. 

    69.     flag_ = true;
    70. }

    (3) 改变颜色，重新画一个大小相同颜色不同的图形，与原图形替换，达到改变颜色的效果。

    收起
    自动换行
    深色代码主题
    复制
    1. void EGLCore::ChangeColor() {
    2.     if (!flag_) {
    3.         return;
    4.     }
    5.     OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor");
    6.     GLint position = PrepareDraw();
    7.     if (position == POSITION_ERROR) {
    8.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor get position failed");
    9.         return;
    10.     }
    11. 

    12.     // 绘制背景
    13.     if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
    14.                      sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
    15.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor execute draw background failed");
    16.         return;
    17.     }
    18. 

    19.     // 确定绘制四边形的顶点，使用绘制区域的百分比表示
    20.     GLfloat rotateX = 0;
    21.     GLfloat rotateY = FIFTY_PERCENT * height_;
    22.     GLfloat centerX = 0;
    23.     GLfloat centerY = -rotateY * (M_PI / 180 * 54) * (M_PI / 180 * 18);
    24.     GLfloat leftX = -rotateY * (M_PI / 180 * 18);
    25.     GLfloat leftY = 0;
    26.     GLfloat rightX = rotateY * (M_PI / 180 * 18);
    27.     GLfloat rightY = 0;
    28. 

    29.     // 确定绘制四边形的顶点，使用绘制区域的百分比表示
    30.     const GLfloat shapeVertices[] = {
    31.         centerX / width_, centerY / height_,
    32.         leftX / width_, leftY / height_,
    33.         rotateX / width_, rotateY / height_,
    34.         rightX / width_, rightY / height_
    35.     };
    36.     
    37.     // 使用新的颜色绘制
    38.     if (!ExecuteDrawNewStar(position, CHANGE_COLOR, shapeVertices, sizeof(shapeVertices))) {
    39.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
    40.         return;
    41.     }
    42. 

    43.     GLfloat rad = M_PI / 180 * 72;
    44.     for (int i = 0; i < 4; ++i) {
    45.         // 旋转得其他四个四边形的顶点
    46.         rotate2d(centerX, centerY, &rotateX, &rotateY,rad);
    47.         rotate2d(centerX, centerY, &leftX, &leftY,rad);
    48.         rotate2d(centerX, centerY, &rightX, &rightY,rad);
    49.         
    50.         // 确定绘制四边形的顶点，使用绘制区域的百分比表示
    51.         const GLfloat shapeVertices[] = {
    52.                 centerX / width_, centerY / height_,
    53.                 leftX / width_, leftY / height_,
    54.                 rotateX / width_, rotateY / height_,
    55.                 rightX / width_, rightY / height_
    56.         };
    57. 

    58.         // 使用新的颜色绘制
    59.         if (!ExecuteDrawNewStar(position, CHANGE_COLOR, shapeVertices, sizeof(shapeVertices))) {
    60.             OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
    61.             return;
    62.         }
    63.     }
    64. 

    65.     // 结束绘制
    66.     if (!FinishDraw()) {
    67.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor FinishDraw failed");
    68.     }
    69. }
    70. 

    71. bool EGLCore::ExecuteDrawNewStar(
    72.    GLint position, const GLfloat* color, const GLfloat shapeVertices[], unsigned long vertSize) {
    73.    if ((position > 0) || (color == nullptr) || (vertSize / sizeof(shapeVertices[0])) != SHAPE_VERTICES_SIZE) {
    74.        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ExecuteDraw: param error");
    75.        return false;
    76.    }
    77. 

    78.    // The gl function has no return value.
    79.    glVertexAttribPointer(position, POINTER_SIZE, GL_FLOAT, GL_FALSE, 0, shapeVertices);
    80.    glEnableVertexAttribArray(position);
    81.    glVertexAttrib4fv(1, color);
    82.    glDrawArrays(GL_TRIANGLE_FAN, 0, TRIANGLE_FAN_SIZE);
    83.    glDisableVertexAttribArray(position);
    84. 

    85.    return true;
    86. }

  6. 释放相关资源。

    (1) EGLCore类下创建Release()方法，释放初始化环境时申请的资源，包含窗口display、渲染区域surface、环境上下文context等。

    收起
    自动换行
    深色代码主题
    复制
    1. void EGLCore::Release() {
    2.     // 释放surface
    3.     if ((eglDisplay_ == nullptr) || (eglSurface_ == nullptr) || (!eglDestroySurface(eglDisplay_, eglSurface_))) {
    4.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglDestroySurface failed");
    5.     }
    6.     // 释放context
    7.     if ((eglDisplay_ == nullptr) || (eglContext_ == nullptr) || (!eglDestroyContext(eglDisplay_, eglContext_))) {
    8.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglDestroyContext failed");
    9.     }
    10.     // 释放display
    11.     if ((eglDisplay_ == nullptr) || (!eglTerminate(eglDisplay_))) {
    12.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglTerminate failed");
    13.     }
    14. }

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

    收起
    自动换行
    深色代码主题
    复制
    1. void PluginRender::Release(std::string &id) {
    2.     PluginRender *render = PluginRender::GetInstance(id);
    3.     if (render != nullptr) {
    4.         render->eglCore_->Release();
    5.         delete render->eglCore_;
    6.         render->eglCore_ = nullptr;
    7.         instance_.erase(instance_.find(id));
    8.     }
    9. }

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

    收起
    自动换行
    深色代码主题
    复制
    1. # 设置CMake最小版本
    2. cmake_minimum_required(VERSION 3.4.1)
    3. # 项目名称
    4. project(XComponent)
    5. 

    6. set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
    7. add_definitions(-DOHOS_PLATFORM)
    8. # 设置头文件搜索目录
    9. include_directories(
    10.     ${NATIVERENDER_ROOT_PATH}
    11.     ${NATIVERENDER_ROOT_PATH}/include
    12. )
    13. # 添加名为nativerender的动态库，库文件名为libnativerender.so，添加cpp文件
    14. add_library(nativerender SHARED
    15.     render/egl_core.cpp
    16.     render/plugin_render.cpp
    17.     manager/plugin_manager.cpp
    18.     napi_init.cpp
    19. )
    20. 

    21. find_library(
    22.     EGL-lib
    23.     EGL
    24. )
    25. 

    26. find_library(
    27.     GLES-lib
    28.     GLESv3
    29. )
    30. 

    31. find_library(
    32.     hilog-lib
    33.     hilog_ndk.z
    34. )
    35. 

    36. find_library(
    37.     libace-lib
    38.     ace_ndk.z
    39. )
    40. 

    41. find_library(
    42.     libnapi-lib
    43.     ace_napi.z
    44. )
    45. 

    46. find_library(
    47.     libuv-lib
    48.     uv
    49. )
    50. # 添加构建需要链接的库
    51. target_link_libraries(nativerender PUBLIC
    52.     ${EGL-lib} ${GLES-lib} ${hilog-lib} ${libace-lib} ${libnapi-lib} ${libuv-lib})

ArkTS XComponent场景

与Native XComponent不同，ArkTS XComponent不再需要libraryname参数。通过在ArkTS侧获取SurfaceId，布局信息、生命周期回调、触摸、鼠标、按键等事件回调等均在ArkTS侧触发，按需传递到Native侧进行处理。主要开发场景如下：

  • 基于ArkTS侧获取的SurfaceId，在Native侧调用OH_NativeWindow_CreateNativeWindowFromSurfaceId接口创建出NativeWindow实例。
  • 利用NativeWindow和EGL接口开发自定义绘制内容以及申请和提交Buffer到图形队列。
  • ArkTS侧获取生命周期、事件等信息传递到Native侧处理。

接口说明

ArkTS侧的XComponentController

展开
接口名 描述
getXComponentSurfaceId(): string 获取XComponent对应Surface的ID。
onSurfaceCreated(surfaceId: string): void 当XComponent持有的Surface创建后进行该回调。
onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void 当XComponent持有的Surface大小改变后（包括首次创建时的大小改变）进行该回调。
onSurfaceDestroyed(surfaceId: string): void 当XComponent持有的Surface销毁后进行该回调。

Native侧

展开
接口名 描述
int32_t OH_NativeWindow_CreateNativeWindowFromSurfaceId (uint64_t surfaceId, OHNativeWindow **window ) 通过surfaceId创建对应的OHNativeWindow。
void OH_NativeWindow_DestroyNativeWindow (OHNativeWindow* window) 将OHNativeWindow对象的引用计数减1，当引用计数为0的时候，该OHNativeWindow对象会被析构掉。

开发步骤

以下步骤以SURFACE类型为例，描述了如何使用XComponent组件在ArkTS侧传入SurfaceId，在native侧创建NativeWindow实例，然后创建EGL/GLES环境，实现在主页面绘制图形，并可以改变图形的颜色。

  1. 在界面中定义XComponent。

    收起
    自动换行
    深色代码主题
    复制
    1. // 函数声明，在cpp/types/libnativerender/Index.d.ts中定义
    2. type XComponentContextStatus = {
    3.     hasDraw: boolean,
    4.     hasChangeColor: boolean,
    5. };
    6. export const SetSurfaceId: (id: BigInt) => any;
    7. export const ChangeSurface: (id: BigInt, w: number, h: number) =>any;
    8. export const DrawPattern: (id: BigInt) => any;
    9. export const GetXComponentStatus: (id: BigInt) => XComponentContextStatus
    10. export const ChangeColor: (id: BigInt) => any;
    11. export const DestroySurface: (id: BigInt) => any;
    收起
    自动换行
    深色代码主题
    复制
    1. import nativeRender from 'libnativerender.so'
    2. 

    3. // 重写XComponentController，设置生命周期回调
    4. class MyXComponentController extends XComponentController {
    5.     onSurfaceCreated(surfaceId: string): void {
    6.         console.log(`onSurfaceCreated surfaceId: ${surfaceId}`)
    7.         nativeRender.SetSurfaceId(BigInt(surfaceId));
    8.     }
    9. 

    10.     onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void {
    11.         console.log(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`)
    12.         // 在onSurfaceChanged中调用ChangeSurface绘制内容
    13.         nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight)
    14.     }
    15. 

    16.     onSurfaceDestroyed(surfaceId: string): void {
    17.         console.log(`onSurfaceDestroyed surfaceId: ${surfaceId}`)
    18.         nativeRender.DestroySurface(BigInt(surfaceId))
    19.     }
    20. }
    21. 

    22. @Entry
    23. @Component
    24. struct Index {
    25.     @State currentStatus: string = "index";
    26.     xComponentController: XComponentController = new MyXComponentController();
    27. 

    28.     build() {
    29.         Column() {
    30.             //...
    31.             //在xxx.ets 中定义 XComponent
    32.             Column({ space: 10 }) {
    33.                 XComponent({
    34.                     type: XComponentType.SURFACE,
    35.                     controller: this.xComponentController
    36.                 })
    37.             Text(this.currentStatus)
    38.                 .fontSize('24fp')
    39.                 .fontWeight(500)
    40.             }
    41.             .onClick(() => {
    42.                 let surfaceId = this.xComponentController.getXComponentSurfaceId()
    43.                 nativeRender.ChangeColor(BigInt(surfaceId))
    44.                 let hasChangeColor: boolean = false;
    45.                 if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) {
    46.                     hasChangeColor = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasChangeColor;
    47.                 }
    48.                 if (hasChangeColor) {
    49.                     this.currentStatus = "change color";
    50.                 }
    51.             })
    52. 

    53.             //...
    54.             Row() {
    55.                 Button('Draw Star')
    56.                     .fontSize('16fp')
    57.                     .fontWeight(500)
    58.                     .margin({ bottom: 24 })
    59.                     .onClick(() => {
    60.                         let surfaceId = this.xComponentController.getXComponentSurfaceId()
    61.                         nativeRender.DrawPattern(BigInt(surfaceId))
    62.                         let hasDraw: boolean = false;
    63.                         if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) {
    64.                             hasDraw = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasDraw;
    65.                         }
    66.                         if (hasDraw) {
    67.                             this.currentStatus = "draw star"
    68.                         }
    69.                     })
    70.                     .width('53.6%')
    71.                     .height(40)
    72.             }
    73.             .width('100%')
    74.             .justifyContent(FlexAlign.Center)
    75.             .alignItems(VerticalAlign.Bottom)
    76.             .layoutWeight(1)
    77.         }
    78.         .width('100%')
    79.         .height('100%')
    80.     }
    81. }

  2. Node-API模块注册，具体使用请参考Native API在应用工程中的使用指导。

    收起
    自动换行
    深色代码主题
    复制
    1. #include <hilog/log.h>
    2. #include "common/common.h"
    3. #include "manager/plugin_manager.h"
    4. namespace NativeXComponentSample {
    5. // 在napi_init.cpp文件中，Init方法注册接口函数，从而将封装的C++方法传递出来，供ArkTS侧调用
    6. EXTERN_C_START
    7. static napi_value Init(napi_env env, napi_value exports) {
    8.     // ...
    9.     // 向ArkTS侧暴露接口SetSurfaceId(),ChangeSurface(),DestroySurface(),
    10.     // DrawPattern(),ChangeColor(),GetXComponentStatus()
    11.     napi_property_descriptor desc[] = {
    12.         {"SetSurfaceId", nullptr, PluginManager::SetSurfaceId, nullptr, nullptr, nullptr, napi_default, nullptr},
    13.         {"ChangeSurface", nullptr, PluginManager::ChangeSurface, nullptr, nullptr, nullptr, napi_default, nullptr},
    14.         {"DestroySurface", nullptr, PluginManager::DestroySurface, nullptr, nullptr, nullptr, napi_default, nullptr},
    15.         {"DrawPattern", nullptr, PluginManager::DrawPattern, nullptr, nullptr, nullptr, napi_default, nullptr},
    16.         {"ChangeColor", nullptr, PluginManager::ChangeColor, nullptr, nullptr, nullptr, napi_default, nullptr},
    17.         {"GetXComponentStatus", nullptr, PluginManager::GetXComponentStatus, nullptr, nullptr, nullptr, napi_default,
    18.          nullptr}};
    19.     if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
    20.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Init", "napi_define_properties failed");
    21.         return nullptr;
    22.     }
    23.     return exports;
    24. }
    25. EXTERN_C_END
    26. // 编写接口的描述信息，根据实际需要可以修改对应参数
    27. static napi_module nativerenderModule = {.nm_version = 1,
    28.                                          .nm_flags = 0,
    29.                                          .nm_filename = nullptr,
    30.                                          // 入口函数
    31.                                          .nm_register_func = Init,
    32.                                          // 模块名称
    33.                                          .nm_modname = "nativerender",
    34.                                          .nm_priv = ((void *)0),
    35.                                          .reserved = {0}};
    36. } // namespace NativeXComponentSample
    37. // __attribute__((constructor))修饰的方法由系统自动调用，使用Node-API接口napi_module_register()传入模块描述信息进行模块注册
    38. extern "C" __attribute__((constructor)) void RegisterModule(void) {
    39.     napi_module_register(&NativeXComponentSample::nativerenderModule);
    40. }

  3. 上述注册的六个函数在native侧具体实现。

    收起
    自动换行
    深色代码主题
    复制
    1. // PluginManager类定义
    2. class PluginManager {
    3. public:
    4.     ~PluginManager();
    5.     static PluginRender *GetPluginRender(int64_t &id);
    6.     static napi_value ChangeColor(napi_env env, napi_callback_info info);
    7.     static napi_value DrawPattern(napi_env env, napi_callback_info info);
    8.     static napi_value SetSurfaceId(napi_env env, napi_callback_info info);
    9.     static napi_value ChangeSurface(napi_env env, napi_callback_info info);
    10.     static napi_value DestroySurface(napi_env env, napi_callback_info info);
    11.     static napi_value GetXComponentStatus(napi_env env, napi_callback_info info);
    12. 

    13. public:
    14.     static std::unordered_map<int64_t, PluginRender *> pluginRenderMap_;
    15.     static std::unordered_map<int64_t, OHNativeWindow *> windowMap_;
    16. };
    17. 

    18. // 解析从ArkTS侧传入的surfaceId，此处surfaceId是一个64位int值
    19. int64_t ParseId(napi_env env, napi_callback_info info) {
    20.     if ((env == nullptr) || (info == nullptr)) {
    21.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ParseId", "env or info is null");
    22.         return -1;
    23.     }
    24.     size_t argc = 1;
    25.     napi_value args[1] = {nullptr};
    26.     if (napi_ok != napi_get_cb_info(env, info, &argc, args, nullptr, nullptr)) {
    27.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ParseId", "GetContext napi_get_cb_info failed");
    28.         return -1;
    29.     }
    30.     int64_t value = 0;
    31.     bool lossless = true;
    32.     if (napi_ok != napi_get_value_bigint_int64(env, args[0], &value, &lossless)) {
    33.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ParseId", "Get value failed");
    34.         return -1;
    35.     }
    36.     return value;
    37. }
    38. 

    39. // 设置SurfaceId，基于SurfaceId完成对NativeWindow的初始化
    40. napi_value PluginManager::SetSurfaceId(napi_env env, napi_callback_info info) {
    41.     int64_t surfaceId = ParseId(env, info);
    42.     OHNativeWindow *nativeWindow;
    43.     PluginRender *pluginRender;
    44.     if (windowMap_.find(surfaceId) == windowMap_.end()) {
    45.         OH_NativeWindow_CreateNativeWindowFromSurfaceId(surfaceId, &nativeWindow);
    46.         windowMap_[surfaceId] = nativeWindow;
    47.     }
    48.     if (pluginRenderMap_.find(surfaceId) == pluginRenderMap_.end()) {
    49.         pluginRender = new PluginRender(surfaceId);
    50.         pluginRenderMap_[surfaceId] = pluginRender;
    51.     }
    52.     pluginRender->InitNativeWindow(nativeWindow);
    53.     return nullptr;
    54. }
    55. 

    56. void PluginRender::InitNativeWindow(OHNativeWindow *window) {
    57.     eglCore_->EglContextInit(window); // 参考Native XComponent场景 EglContextInit的实现
    58. }
    59. 

    60. // 根据传入的surfaceId、width、height实现surface大小的变动
    61. napi_value PluginManager::ChangeSurface(napi_env env, napi_callback_info info) {
    62.     if ((env == nullptr) || (info == nullptr)) {
    63.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    64.                      "ChangeSurface: OnLoad env or info is null");
    65.         return nullptr;
    66.     }
    67.     int64_t surfaceId = 0;
    68.     size_t argc = 3;
    69.     napi_value args[3] = {nullptr};
    70. 

    71.     if (napi_ok != napi_get_cb_info(env, info, &argc, args, nullptr, nullptr)) {
    72.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    73.                      "ChangeSurface: GetContext napi_get_cb_info failed");
    74.         return nullptr;
    75.     }
    76.     bool lossless = true;
    77.     int index = 0;
    78.     if (napi_ok != napi_get_value_bigint_int64(env, args[index++], &surfaceId, &lossless)) {
    79.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "ChangeSurface: Get value failed");
    80.         return nullptr;
    81.     }
    82.     double width;
    83.     if (napi_ok != napi_get_value_double(env, args[index++], &width)) {
    84.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "ChangeSurface: Get width failed");
    85.         return nullptr;
    86.     }
    87.     double height;
    88.     if (napi_ok != napi_get_value_double(env, args[index++], &height)) {
    89.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "ChangeSurface: Get height failed");
    90.         return nullptr;
    91.     }
    92.     auto pluginRender = GetPluginRender(surfaceId);
    93.     if (pluginRender == nullptr) {
    94.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "ChangeSurface: Get pluginRender failed");
    95.         return nullptr;
    96.     }
    97.     pluginRender->UpdateNativeWindowSize(width, height);
    98.     return nullptr;
    99. }
    100. 

    101. void PluginRender::UpdateNativeWindowSize(int width, int height) {
    102.     eglCore_->UpdateSize(width, height); // 参考Native XComponent场景 UpdateSize的实现
    103.     if (!hasChangeColor_ && !hasDraw_) {
    104.         eglCore_->Background(); // 参考Native XComponent场景 Background的实现
    105.     }
    106. }
    107. 

    108. // 销毁surface
    109. napi_value PluginManager::DestroySurface(napi_env env, napi_callback_info info) {
    110.     int64_t surfaceId = ParseId(env, info);
    111.     auto pluginRenderMapIter = pluginRenderMap_.find(surfaceId);
    112.     if (pluginRenderMapIter != pluginRenderMap_.end()) {
    113.         delete pluginRenderMapIter->second;
    114.         pluginRenderMap_.erase(pluginRenderMapIter);
    115.     }
    116.     auto windowMapIter = windowMap_.find(surfaceId);
    117.     if (windowMapIter != windowMap_.end()) {
    118.         OH_NativeWindow_DestroyNativeWindow(windowMapIter->second);
    119.         windowMap_.erase(windowMapIter);
    120.     }
    121.     return nullptr;
    122. }
    123. 

    124. // 实现EGL绘画逻辑
    125. napi_value PluginManager::DrawPattern(napi_env env, napi_callback_info info) {
    126.     int64_t surfaceId = ParseId(env, info);
    127.     auto pluginRender = GetPluginRender(surfaceId);
    128.     if (pluginRender == nullptr) {
    129.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "DrawPattern: Get pluginRender failed");
    130.         return nullptr;
    131.     }
    132.     pluginRender->DrawPattern();
    133.     return nullptr;
    134. }
    135. 

    136. PluginRender *PluginManager::GetPluginRender(int64_t &id) {
    137.     if (pluginRenderMap_.find(id) != pluginRenderMap_.end()) {
    138.         return pluginRenderMap_[id];
    139.     }
    140.     return nullptr;
    141. }
    142. 

    143. void PluginRender::DrawPattern() {
    144.     eglCore_->Draw(hasDraw_); // 参考Native XComponent场景 Draw实现
    145. }
    146. 

    147. // 实现改变绘制图形颜色的功能
    148. napi_value PluginManager::ChangeColor(napi_env env, napi_callback_info info) {
    149.     int64_t surfaceId = ParseId(env, info);
    150.     auto pluginRender = GetPluginRender(surfaceId);
    151.     if (pluginRender == nullptr) {
    152.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager", "ChangeColor: Get pluginRender failed");
    153.         return nullptr;
    154.     }
    155.     pluginRender->ChangeColor(); // 参考Native XComponent场景 ChangeColor实现
    156.     return nullptr;
    157. }
    158. 

    159. void PluginRender::ChangeColor() { eglCore_->ChangeColor(hasChangeColor_); }
    160. 

    161. // 获得xcomponent状态，并返回至ArkTS侧
    162. napi_value PluginManager::GetXComponentStatus(napi_env env, napi_callback_info info) {
    163.     int64_t surfaceId = ParseId(env, info);
    164.     auto pluginRender = GetPluginRender(surfaceId);
    165.     if (pluginRender == nullptr) {
    166.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    167.                      "GetXComponentStatus: Get pluginRender failed");
    168.         return nullptr;
    169.     }
    170.     napi_value hasDraw;
    171.     napi_value hasChangeColor;
    172.     napi_status ret = napi_create_int32(env, pluginRender->HasDraw(), &(hasDraw));
    173.     if (ret != napi_ok) {
    174.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    175.                      "GetXComponentStatus: napi_create_int32 hasDraw_ error");
    176.         return nullptr;
    177.     }
    178.     ret = napi_create_int32(env, pluginRender->HasChangedColor(), &(hasChangeColor));
    179.     if (ret != napi_ok) {
    180.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    181.                      "GetXComponentStatus: napi_create_int32 hasChangeColor_ error");
    182.         return nullptr;
    183.     }
    184.     napi_value obj;
    185.     ret = napi_create_object(env, &obj);
    186.     if (ret != napi_ok) {
    187.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    188.                      "GetXComponentStatus: napi_create_object error");
    189.         return nullptr;
    190.     }
    191.     ret = napi_set_named_property(env, obj, "hasDraw", hasDraw);
    192.     if (ret != napi_ok) {
    193.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    194.                      "GetXComponentStatus: napi_set_named_property hasDraw error");
    195.         return nullptr;
    196.     }
    197.     ret = napi_set_named_property(env, obj, "hasChangeColor", hasChangeColor);
    198.     if (ret != napi_ok) {
    199.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginManager",
    200.                      "GetXComponentStatus: napi_set_named_property hasChangeColor error");
    201.         return nullptr;
    202.     }
    203.     return obj;
    204. }
    205. 

    206. int32_t PluginRender::HasDraw() { return hasDraw_; }
    207. 

    208. int32_t PluginRender::HasChangedColor() { return hasChangeColor_; }

  4. 配置具体的CMakeLists，使用CMake工具链将C++源代码编译成动态链接库文件。

    收起
    自动换行
    深色代码主题
    复制
    1. # 设置CMake最小版本.
    2. cmake_minimum_required(VERSION 3.4.1)
    3. # 项目名称
    4. project(XComponent)
    5. 

    6. set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
    7. add_definitions(-DOHOS_PLATFORM)
    8. # 设置头文件搜索目录
    9. include_directories(
    10.     ${NATIVERENDER_ROOT_PATH}
    11.     ${NATIVERENDER_ROOT_PATH}/include
    12. )
    13. # 添加名为nativerender的动态库，库文件名为libnativerender.so，添加cpp文件
    14. add_library(nativerender SHARED
    15.     render/egl_core.cpp
    16.     render/plugin_render.cpp
    17.     manager/plugin_manager.cpp
    18.     napi_init.cpp
    19. )
    20. 

    21. find_library(
    22.     # Sets the name of the path variable.
    23.     EGL-lib
    24.     # Specifies the name of the NDK library that
    25.     # you want CMake to locate.
    26.     EGL
    27. )
    28. 

    29. find_library(
    30.     # Sets the name of the path variable.
    31.     GLES-lib
    32.     # Specifies the name of the NDK library that
    33.     # you want CMake to locate.
    34.     GLESv3
    35. )
    36. 

    37. find_library(
    38.     # Sets the name of the path variable.
    39.     hilog-lib
    40.     # Specifies the name of the NDK library that
    41.     # you want CMake to locate.
    42.     hilog_ndk.z
    43. )
    44. 

    45. find_library(
    46.     # Sets the name of the path variable.
    47.     libace-lib
    48.     # Specifies the name of the NDK library that
    49.     # you want CMake to locate.
    50.     ace_ndk.z
    51. )
    52. 

    53. find_library(
    54.     # Sets the name of the path variable.
    55.     libnapi-lib
    56.     # Specifies the name of the NDK library that
    57.     # you want CMake to locate.
    58.     ace_napi.z
    59. )
    60. 

    61. find_library(
    62.     # Sets the name of the path variable.
    63.     libuv-lib
    64.     # Specifies the name of the NDK library that
    65.     # you want CMake to locate.
    66.     uv
    67. )
    68. # 添加构建需要链接的库
    69. target_link_libraries(nativerender PUBLIC
    70.     ${EGL-lib} ${GLES-lib} ${hilog-lib} ${libace-lib} ${libnapi-lib} ${libuv-lib} libnative_window.so)

自绘制原理说明

XComponent持有一个surface，开发者能通过调用NativeWindow等接口，申请并提交Buffer至图形队列，以此方式将自绘制内容传送至该surface。XComponent负责将此surface整合进UI界面，其中展示的内容正是开发者传送的自绘制内容。surface的默认位置与大小与XComponent组件一致，开发者可利用setXComponentSurfaceRect接口自定义调整surface的位置和大小。

说明

当开发者传输的绘制内容包含透明元素时，surface区域的显示效果会与下方内容进行合成展示。例如，若传输的内容完全透明，且XComponent的背景色被设置为黑色，同时Surface保持默认的大小与位置，则最终显示的将是一片黑色区域。

生命周期说明

开发者在ArkTS侧使用如下代码即可用XComponent组件进行利用EGL/OpenGLES渲染的开发。

收起
自动换行
深色代码主题
复制
  1. @Builder
  2. function myComponent() {
  3.   XComponent({ id: 'xcomponentId1', type: XComponentType.SURFACE, libraryname: 'nativerender' })
  4.     .onLoad((context) => {})
  5.     .onDestroy(() => {})
  6. }

onLoad事件

触发时刻：XComponent准备好surface后触发。

参数context：其上面挂载了暴露在模块上的Native方法，使用方法类似于利用 import context from "libnativerender.so" 直接加载模块后获得的context实例。

时序：

​ Native XComponent场景：

​ onLoad事件的触发和surface相关，其和Native侧的OnSurfaceCreated的时序如下图：

​ ArkTS XComponent场景：

​ onLoad事件的触发和surface相关，其和ArkTS侧的OnSurfaceCreated的时序如下图：

onDestroy事件

触发时刻：XComponent组件被销毁时触发，与一般ArkUI的组件销毁时机一致。

时序：

​ Native XComponent场景：

​ onDestroy事件的触发和surface相关，其和Native侧的OnSurfaceDestroyed的时序如下图：

​ ArkTS XComponent场景：

​ onDestroy事件的触发和surface相关，其和ArkTS侧的OnSurfaceDestroyed的时序如下图：

示例代码

简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词