1# Native XComponent 2 3### 介绍 4 5本示例中主要介绍开发者如何使用Native XComponent接口来获取NativeWindow实例、获取布局/事件信息、注册事件回调并通过OpenGL/EGL实现在页面上绘制形状。功能主要包括点击按钮绘制一个五角星，并可以通过点击XComponent区域改变五角星的颜色。 6 7> **说明** 8> 本示例已停止演进，XComponent使用方法推荐参考[ArkTSXComponent示例](../ArkTSXComponent/README_zh.md)。 9### 效果预览 10 11| 主页 | 绘制五角星 | 改变颜色 | 12| ------------------------------------ | --------------------------------------------- | --------------------------------------------------- | 13|  |  |  | 14 15使用说明 16 171. 安装编译生成的hap包，并打开应用。 18 192. 点击页面底部“Draw Star”按钮，页面将绘制一个五角星。 20 213. 点击XComponent组件区域（页面中灰色区域）改变五角星颜色。 22 23 24### 工程目录 25 26``` 27├──entry/src/main 28│ ├──cpp // C++代码区 29│ │ ├──CMakeLists.txt // CMake配置文件 30│ │ ├──napi_init.cpp // Napi模块注册 31│ │ ├──common 32│ │ │ └──common.h // 常量定义文件 33│ │ ├──manager // 生命周期管理模块 34│ │ │ ├──plugin_manager.cpp 35│ │ │ └──plugin_manager.h 36│ │ ├──render // 渲染模块 37│ │ │ ├──egl_core.cpp 38│ │ │ ├──egl_core.h 39│ │ │ ├──plugin_render.cpp 40│ │ │ └──plugin_render.h 41│ ├──ets // ets代码区 42│ │ ├──entryability 43│ │ │ └──EntryAbility.ts // 程序入口类 44│ │ └──pages // 页面文件 45│ │ └──Index.ets // 主界面 46| ├──resources // 资源文件目录 47``` 48 49### 具体实现 50 51通过在IDE中创建Native c++ 工程，在c++代码中定义对外接口为drawPattern，在js侧调用该接口可在页面上绘制出一个三角形。 52 53在XComponent的OnSurfaceCreated回调中获取NativeWindow实例并初始化EGL环境。调用OH_NativeXComponent_GetXComponentSize接口获取XComponent的宽高，并以此为输入调用EGL相关的绘制接口在NativeWindow上绘制出一个五角星。在DispatchTouchEvent回调中再次调用EGL相关的绘制接口在NativeWindow上绘制出一个大小相同、颜色不同的五角星，以达到点击后改变颜色的目的。 54 55源码参考：[render目录](entry/src/main/cpp/render)下的文件。 56 57涉及到的相关接口： 58 59| 接口名 | 描述 | 60| ------------------------------------------------------------ | ------------------------------------------------------- | 61| OH_NativeXComponent_GetXComponentId(OH_NativeXComponent* component, char* id, uint64_t* size) | 获取XComponent的id。 | 62| OH_NativeXComponent_GetXComponentSize(OH_NativeXComponent* component, const void* window, uint64_t* width, uint64_t* height) | 获取XComponent持有的surface的大小。 | 63| OH_NativeXComponent_GetXComponentOffset(OH_NativeXComponent* component, const void* window, double* x, double* y) | 获取XComponent持有的surface相对窗口左上角的偏移量。 | 64| OH_NativeXComponent_GetTouchEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_TouchEvent* touchEvent) | 获取由XComponent触发的触摸事件。 | 65| OH_NativeXComponent_GetTouchPointToolType(OH_NativeXComponent* component, uint32_t pointIndex, OH_NativeXComponent_TouchPointToolType* toolType) | 获取XComponent触摸点的工具类型。 | 66| OH_NativeXComponent_GetTouchPointTiltX(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltX) | 获取XComponent触摸点处相对X轴的倾斜角度。 | 67| OH_NativeXComponent_GetTouchPointTiltY(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltY) | 获取XComponent触摸点处相对Y轴的倾斜角度。 | 68| OH_NativeXComponent_GetMouseEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_MouseEvent* mouseEvent) | 获取由XComponent触发的鼠标事件。 | 69| OH_NativeXComponent_RegisterCallback(OH_NativeXComponent* component, OH_NativeXComponent_Callback* callback) | 为此OH_NativeXComponent实例注册生命周期和触摸事件回调。 | 70| OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent* component, OH_NativeXComponent_MouseEvent_Callback* callback) | 为此OH_NativeXComponent实例注册鼠标事件回调。 | 71| OH_NativeXComponent_RegisterFocusEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) | 为此OH_NativeXComponent实例注册获得焦点事件回调。 | 72| OH_NativeXComponent_RegisterKeyEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) | 为此OH_NativeXComponent实例注册按键事件回调。 | 73| OH_NativeXComponent_RegisterBlurEventCallback(OH_NativeXComponent* component, void (*callback)(OH_NativeXComponent* component, void* window)) | 为此OH_NativeXComponent实例注册失去焦点事件回调。 | 74| OH_NativeXComponent_GetKeyEvent(OH_NativeXComponent* component, OH_NativeXComponent_KeyEvent** keyEvent) | 获取由XComponent触发的按键事件。 | 75| OH_NativeXComponent_GetKeyEventAction(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyAction* action) | 获取按键事件的动作。 | 76| OH_NativeXComponent_GetKeyEventCode(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyCode* code) | 获取按键事件的键码值。 | 77| OH_NativeXComponent_GetKeyEventSourceType(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_EventSourceType* sourceType) | 获取按键事件的输入源类型。 | 78| OH_NativeXComponent_GetKeyEventDeviceId(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* deviceId) | 获取按键事件的设备ID。 | 79| OH_NativeXComponent_GetKeyEventTimestamp(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* timestamp) | 获取按键事件的时间戳。 | 80 81### 相关权限 82 83不涉及。 84 85### 依赖 86 87不涉及。 88 89### 约束与限制 90 911. 本示例仅支持标准系统上运行，支持设备：RK3568 92 932. 本示例为Stage模型，支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release) 94 953. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行 96 97### 下载 98 99如需单独下载本工程，执行如下命令： 100 101``` 102git init 103git config core.sparsecheckout true 104echo code/BasicFeature/Native/XComponent/ > .git/info/sparse-checkout 105git remote add origin https://gitee.com/openharmony/applications_app_samples.git 106git pull origin master 107``` 108
