鸿蒙5.0开辟进阶：UI开辟常用组件-自界说渲染 (XComponent) ...

概述

XComponent组件作为一种渲染组件，通常用于满意开辟者较为复杂的自界说渲染需求，比方相机预览流的显示和游戏画面的渲染。其可通过指定其type字段来实现不同的功能，主要有两个“surface”和“component”字段可供选择。对于“surface”类型，开辟者可将相关数据传入XComponent单独拥有的“NativeWindow”来渲染画面。对于“component”类型，通常用于在XComponent内部执行非UI逻辑以实现动态加载显示内容的目标。
XComponent设置为“surface“类型时，其可以和其他组件一起进行布局和渲染，同时XComponent又拥有单独的“NativeWindow“，可以为开辟者在native侧提供NativeWindow用来创建EGL/OpenGLES情况，进而使用尺度的OpenGL ES开辟。除此之外，媒体相关应用（视频、相机等）也可以将相关数据写入XComponent所提供的NativeWindow，从而呈现相应画面。
目前XComponent组件在type设置为“surface”时主要有两个应用场景。一个是Native XComponent场景，是在native层获取Native XComponent实例，在native侧注册XComponent的生命周期回调，以及触摸、鼠标、按键等事件回调。另一个是ArkTS XComponent场景，是在ArkTS侧获取SurfaceId，生命周期回调、触摸、鼠标、按键等事件回调等均在ArkTS侧触发。
surface类型

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组件调用Node-API接口来创建EGL/GLES情况，实现在主页面绘制图形，并可以改变图形的颜色。
  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对象会被析构掉。 开辟步骤
以下步骤形貌了如何使用XComponent组件在ArkTS侧传入Surfaceid，在native侧创建NativeWindow实例，然后创建EGL/GLES情况，实现在主页面绘制图形，并可以改变图形的颜色。

• 在界面中界说XComponent。
  
  1. @Entry
  2. @Component
  3. struct Index {
  4.     @State message: string = 'Hello World'
  5.     xComponentContext: object | undefined = undefined;
  6.     xComponentAttrs: XComponentAttrs = {
  7.         id: 'xcomponentId',
  8.         type: XComponentType.SURFACE,
  9.         libraryname: 'nativerender'
  10.     }
  12.     build() {
  13.     Row() {
  14.         // ...
  15.         // 在xxx.ets 中定义 XComponent
  16.         XComponent(this.xComponentAttrs)
  17.             .focusable(true) // 可响应键盘事件
  18.             .onLoad((xComponentContext) => {
  19.             this.xComponentContext = xComponentContext;
  20.             })
  21.             .onDestroy(() => {
  22.             console.log("onDestroy");
  23.             })
  24.         // ...
  25.         }
  26.         .height('100%')
  27.     }
  28. }
  29.    
  30. interface XComponentAttrs {
  31. id: string;
  32.     type: number;
  33.     libraryname: string;
  34. }

  复制代码
• Node-API模块注册。
  
  1. // 在napi_init.cpp文件中，Init方法注册接口函数，从而将封装的C++方法传递出来，供ArkTS侧调用
  2. EXTERN_C_START
  3. static napi_value Init(napi_env env, napi_value exports)
  4. {
  5.     // ...
  6.     // 向ArkTS侧暴露接口getContext()
  7.     napi_property_descriptor desc[] = {
  8.         { "getContext", nullptr, PluginManager::GetContext, nullptr, nullptr, nullptr, napi_default, nullptr }
  9.     };
  10.     if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
  11.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Init", "napi_define_properties failed");
  12.         return nullptr;
  13.     }
  14.     // 方法内检查环境变量是否包含XComponent组件实例，若实例存在注册绘制相关接口
  15.     PluginManager::GetInstance()->Export(env, exports);
  16.     return exports;
  17. }
  18. EXTERN_C_END
  20. // 编写接口的描述信息，根据实际需要可以修改对应参数
  21. static napi_module nativerenderModule = {
  22.     .nm_version = 1,
  23.     .nm_flags = 0,
  24.     .nm_filename = nullptr,
  25.     // 入口函数
  26.     .nm_register_func = Init,// 指定加载对应模块时的回调函数
  27.     // 模块名称
  28.     .nm_modname = "nativerender", // 指定模块名称，对于XComponent相关开发，这个名称必须和ArkTS侧XComponent中libraryname的值保持一致
  29.     .nm_priv = ((void *)0),
  30.     .reserved = { 0 }
  31. };
  33. // __attribute__((constructor))修饰的方法由系统自动调用，使用Node-API接口napi_module_register()传入模块描述信息进行模块注册
  34. extern "C" __attribute__((constructor)) void RegisterModule(void)
  35. {
  36.     napi_module_register(&nativerenderModule);
  37. }
  39. // 使用Node-API中的napi_define_properties方法，向ArkTS侧暴露drawPattern()方法，在ArkTS侧调用drawPattern()来绘制内容。
  40. void PluginRender::Export(napi_env env, napi_value exports)
  41. {
  42.     // ...
  43.     // 将接口函数注册为ArkTS侧接口drawPattern
  44.     napi_property_descriptor desc[] = {
  45.         { "drawPattern", nullptr, PluginRender::NapiDrawPattern, nullptr, nullptr, nullptr, napi_default, nullptr }
  46.     };
  47.     if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
  48.         OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "Export: napi_define_properties failed");
  49.     }
  50. }

  复制代码
• 上述注册的六个函数在native侧详细实现。
  
  2. // 定义一个函数OnSurfaceCreatedCB()，封装初始化环境与绘制背景
  3. void OnSurfaceCreatedCB(OH_NativeXComponent *component, void *window)
  4. {
  5. // ...
  6. // 获取XComponent的id，即ArkTS侧XComponent组件构造中的id参数
  7. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
  8. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  9. if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NativeXComponent_RESULT_SUCCESS) {
  10. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
  11. "OnSurfaceCreatedCB: Unable to get XComponent id");
  12. return;
  13. }
  15. // 初始化环境与绘制背景
  16. std::string id(idStr);
  17. auto render = PluginRender::GetInstance(id);
  18. uint64_t width;
  19. uint64_t height;
  20. // 获取XComponent拥有的surface的大小
  21. int32_t xSize = OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
  22. if ((xSize == OH_NativeXComponent_RESULT_SUCCESS) && (render != nullptr)) {
  23. if (render->eglCore_->EglContextInit(window, width, height)) {
  24. render->eglCore_->Background();
  25. }
  26. }
  27. }
  29. // 定义一个函数OnSurfaceChangedCB()
  30. void OnSurfaceChangedCB(OH_NativeXComponent *component, void *window)
  31. {
  32. // ...
  33. // 获取XComponent的id
  34. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
  35. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  36. if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NativeXComponent_RESULT_SUCCESS) {
  37. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
  38. "OnSurfaceChangedCB: Unable to get XComponent id");
  39. return;
  40. }
  42. std::string id(idStr);
  43. auto render = PluginRender::GetInstance(id);
  44. if (render != nullptr) {
  45. // 封装OnSurfaceChanged方法
  46. render->OnSurfaceChanged(component, window);
  47. }
  48. }
  50. // 定义一个函数OnSurfaceDestroyedCB()，将PluginRender类内释放资源的方法Release()封装在其中
  51. void OnSurfaceDestroyedCB(OH_NativeXComponent *component, void *window)
  52. {
  53. // ...
  54. // 获取XComponent的id
  55. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
  56. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  57. if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NativeXComponent_RESULT_SUCCESS) {
  58. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
  59. "OnSurfaceDestroyedCB: Unable to get XComponent id");
  60. return;
  61. }
  63. std::string id(idStr);
  64. // 释放资源
  65. PluginRender::Release(id);
  66. }
  68. // 定义一个函数DispatchTouchEventCB()，响应触摸事件时触发该回调
  69. void DispatchTouchEventCB(OH_NativeXComponent *component, void *window)
  70. {
  71. // ...
  72. // 获取XComponent的id
  73. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
  74. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  75. if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NativeXComponent_RESULT_SUCCESS) {
  76. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
  77. "DispatchTouchEventCB: Unable to get XComponent id");
  78. return;
  79. }
  81. std::string id(idStr);
  82. PluginRender *render = PluginRender::GetInstance(id);
  83. if (render != nullptr) {
  84. // 封装OnTouchEvent方法
  85. render->OnTouchEvent(component, window);
  86. }
  87. }
  89. // 定义一个函数DispatchMouseEventCB()，响应鼠标事件时触发该回调
  90. void DispatchMouseEventCB(OH_NativeXComponent *component, void *window) {
  91. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "DispatchMouseEventCB");
  92. int32_t ret;
  93. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
  94. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  95. ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
  96. if (ret != OH_NativeXComponent_RESULT_SUCCESS) {
  97. return;
  98. }
  100. std::string id(idStr);
  101. auto render = PluginRender::GetInstance(id);
  102. if (render) {
  103. // 封装OnMouseEvent方法
  104. render->OnMouseEvent(component, window);
  105. }
  106. }
  108. // 定义一个函数DispatchHoverEventCB()，响应鼠标悬停事件时触发该回调
  109. void DispatchHoverEventCB(OH_NativeXComponent *component, bool isHover) {
  110. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "DispatchHoverEventCB");
  111. int32_t ret;
  112. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
  113. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  114. ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
  115. if (ret != OH_NativeXComponent_RESULT_SUCCESS) {
  116. return;
  117. }
  119. std::string id(idStr);
  120. auto render = PluginRender::GetInstance(id);
  121. if (render) {
  122. // 封装OnHoverEvent方法
  123. render->OnHoverEvent(component, isHover);
  124. }
  125. }
  127. // 定义一个函数OnFocusEventCB()，响应获焦事件时触发该回调
  128. void OnFocusEventCB(OH_NativeXComponent *component, void *window) {
  129. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnFocusEventCB");
  130. int32_t ret;
  131. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
  132. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  133. ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
  134. if (ret != OH_NativeXComponent_RESULT_SUCCESS) {
  135. return;
  136. }
  138. std::string id(idStr);
  139. auto render = PluginRender::GetInstance(id);
  140. if (render) {
  141. // 封装OnFocusEvent方法
  142. render->OnFocusEvent(component, window);
  143. }
  144. }
  146. // 定义一个函数OnBlurEventCB()，响应失去焦点事件时触发该回调
  147. void OnBlurEventCB(OH_NativeXComponent *component, void *window) {
  148. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnBlurEventCB");
  149. int32_t ret;
  150. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
  151. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  152. ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
  153. if (ret != OH_NativeXComponent_RESULT_SUCCESS) {
  154. return;
  155. }
  157. std::string id(idStr);
  158. auto render = PluginRender::GetInstance(id);
  159. if (render) {
  160. // 封装OnBlurEvent方法
  161. render->OnBlurEvent(component, window);
  162. }
  163. }
  165. // 定义一个函数OnKeyEventCB()，响应按键事件时触发该回调
  166. void OnKeyEventCB(OH_NativeXComponent *component, void *window) {
  167. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnKeyEventCB");
  168. int32_t ret;
  169. char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
  170. uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
  171. ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
  172. if (ret != OH_NativeXComponent_RESULT_SUCCESS) {
  173. return;
  174. }
  175. std::string id(idStr);
  176. auto render = PluginRender::GetInstance(id);
  177. if (render) {
  178. // 封装OnKeyEvent方法
  179. render->OnKeyEvent(component, window);
  180. }
  181. }
  183. // 定义一个OnSurfaceChanged()方法
  184. void PluginRender::OnSurfaceChanged(OH_NativeXComponent* component, void* window)
  185. {
  186. // ...
  187. std::string id(idStr);
  188. PluginRender* render = PluginRender::GetInstance(id);
  189. double offsetX;
  190. double offsetY;
  191. // 获取XComponent持有的surface相对其父组件左顶点的偏移量
  192. OH_NativeXComponent_GetXComponentOffset(component, window, &offsetX, &offsetY);
  193. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OH_NativeXComponent_GetXComponentOffset",
  194. "offsetX = %{public}lf, offsetY = %{public}lf", offsetX, offsetY);
  195. uint64_t width;
  196. uint64_t height;
  197. OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
  198. if (render != nullptr) {
  199. render->eglCore_->UpdateSize(width, height);
  200. }
  201. }
  203. // 定义一个OnTouchEvent()方法
  204. void PluginRender::OnTouchEvent(OH_NativeXComponent* component, void* window)
  205. {
  206. // ...
  207. OH_NativeXComponent_TouchEvent touchEvent;
  208. // 获取由XComponent触发的触摸事件
  209. OH_NativeXComponent_GetTouchEvent(component, window, &touchEvent);
  210. // 获取XComponent触摸点相对于XComponent组件左边缘的坐标x和相对于XComponent组件上边缘的坐标y
  211. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
  212. "touch info: x = %{public}lf, y = %{public}lf", touchEvent.x, touchEvent.y);
  213. // 获取XComponent触摸点相对于XComponent所在应用窗口左上角的x坐标和相对于XComponent所在应用窗口左上角的y坐标
  214. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
  215. "touch info: screenX = %{public}lf, screenY = %{public}lf", touchEvent.screenX, touchEvent.screenY);
  216. std::string id(idStr);
  217. PluginRender* render = PluginRender::GetInstance(id);
  218. if (render != nullptr && touchEvent.type == OH_NativeXComponent_TouchEventType::OH_NativeXComponent_UP) {
  219. render->eglCore_->ChangeColor();
  220. hasChangeColor_ = 1;
  221. }
  222. float tiltX = 0.0f;
  223. float tiltY = 0.0f;
  224. OH_NativeXComponent_TouchPointToolType toolType =
  225. OH_NativeXComponent_TouchPointToolType::OH_NativeXComponent_TOOL_TYPE_UNKNOWN;
  226. // 获取XComponent触摸点的工具类型
  227. OH_NativeXComponent_GetTouchPointToolType(component, 0, &toolType);
  228. // 获取XComponent触摸点处相对X轴的倾斜角度
  229. OH_NativeXComponent_GetTouchPointTiltX(component, 0, &tiltX);
  230. // 获取XComponent触摸点处相对Y轴的倾斜角度
  231. OH_NativeXComponent_GetTouchPointTiltY(component, 0, &tiltY);
  232. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
  233. "touch info: toolType = %{public}d, tiltX = %{public}lf, tiltY = %{public}lf", toolType, tiltX, tiltY);
  234. }
  236. // 定义一个OnMouseEvent()方法
  237. void PluginRender::OnMouseEvent(OH_NativeXComponent *component, void *window) {
  238. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnMouseEvent");
  239. OH_NativeXComponent_MouseEvent mouseEvent;
  240. // 获取由XComponent触发的鼠标事件
  241. int32_t ret = OH_NativeXComponent_GetMouseEvent(component, window, &mouseEvent);
  242. if (ret == OH_NativeXComponent_RESULT_SUCCESS) {
  243. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "MouseEvent Info: x = %{public}f, y = %{public}f, action = %{public}d, button = %{public}d", mouseEvent.x, mouseEvent.y, mouseEvent.action, mouseEvent.button);
  244. } else {
  245. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetMouseEvent error");
  246. }
  247. }
  249. // 定义一个OnMouseEvent()方法
  250. void PluginRender::OnKeyEvent(OH_NativeXComponent *component, void *window) {
  251. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnKeyEvent");
  253. OH_NativeXComponent_KeyEvent *keyEvent = nullptr;
  254. // 获取由XComponent触发的按键事件。
  255. if (OH_NativeXComponent_GetKeyEvent(component, &keyEvent) >= 0) {
  256. OH_NativeXComponent_KeyAction action;
  257. // 获取按键事件的动作
  258. OH_NativeXComponent_GetKeyEventAction(keyEvent, &action);
  259. OH_NativeXComponent_KeyCode code;
  260. // 获取按键事件的键码值
  261. OH_NativeXComponent_GetKeyEventCode(keyEvent, &code);
  262. OH_NativeXComponent_EventSourceType sourceType;
  263. // 获取按键事件的输入源类型
  264. OH_NativeXComponent_GetKeyEventSourceType(keyEvent, &sourceType);
  265. int64_t deviceId;
  266. // 获取按键事件的设备ID
  267. OH_NativeXComponent_GetKeyEventDeviceId(keyEvent, &deviceId);
  268. int64_t timeStamp;
  269. // 获取按键事件的时间戳
  270. OH_NativeXComponent_GetKeyEventTimestamp(keyEvent, &timeStamp);
  271. OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "KeyEvent Info: action=%{public}d, code=%{public}d, sourceType=%{public}d, deviceId=%{public}ld, timeStamp=%{public}ld", action, code, sourceType, deviceId, timeStamp);
  272. } else {
  273. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetKeyEvent error");
  274. }
  275. }

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

  复制代码

component类型

XComponent设置为component类型时通常用于在XComponent内部执行非UI逻辑以实现动态加载显示内容的目标。
说明
   type为"component"时，XComponent作为容器，子组件沿垂直方向布局：
  

• 垂直方向上对齐格式：FlexAlign.Start
  
• 程度方向上对齐格式：FlexAlign.Center
  

  不支持所有的事件相应。
  布局方式更改和事件相应均可通过挂载子组件来设置。
  内部所写的非UI逻辑需要封装在一个或多个函数内。

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

复制代码

生命周期说明

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

2. void EGLCore::UpdateSize(int width, int height)
3. {
4. width_ = width;
5. height_ = height;
6. if (width_ > 0) {
7. // 计算绘制矩形宽度百分比
8. width_Percent_ = FIFTY_PERCENT * height_ / width_;
9. }
10. }
12. bool EGLCore::EglContextInit(void *window, int width, int height)
13. {
14. // ...
15. UpdateSize(width, height);
16. eglWindow_ = static_cast<EGLNativeWindowType>(window);
18. // 初始化display
19. eglDisplay_ = eglGetDisplay(EGL_DEFAULT_DISPLAY);
20. if (eglDisplay_ == EGL_NO_DISPLAY) {
21. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglGetDisplay: unable to get EGL display");
22. return false;
23. }
25. // 初始化EGL
26. EGLint majorVersion;
27. EGLint minorVersion;
28. if (!eglInitialize(eglDisplay_, &majorVersion, &minorVersion)) {
29. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore",
30. "eglInitialize: unable to get initialize EGL display");
31. return false;
32. }
34. // 选择配置
35. const EGLint maxConfigSize = 1;
36. EGLint numConfigs;
37. if (!eglChooseConfig(eglDisplay_, ATTRIB_LIST, &eglConfig_, maxConfigSize, &numConfigs)) {
38. OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglChooseConfig: unable to choose configs");
39. return false;
40. }
42. // 创建环境
43. return CreateEnvironment();
44. }

复制代码

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的时序如下图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。