Xcomponent绘图流程分析

Xcomponent绘图流程分析

HarmonyOS
2024-05-21 21:58:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
jshyb

Native XComponent是XComponent组件提供在Native层的实例,可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。针对Native XComponent,主要的开发场景如下:

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

使用的核心API

XComponent开发指导

开发流程:

1. 在界面中定义Xcomponent

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

3. 注册Component事件回调,使用NAPI实现XComponent事件回调函数

4. 初始化环境

5. 渲染功能实现

6. 释放相关资源

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

Xcomponent绘图简略流程

具体流程

ArkTS侧方法调用:

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

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

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

C++侧渲染功能实现:

1、初始化环境:

XComponent的宽高,通过static_cast<OHNativeWindow*>()实例化NativeWindow;

− 通过 OH_NativeWindow_NativeWindowRequestBuffer 获取 OHNativeWindowBuffer 实例

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

2、绘制图形:

在接口函数NapiDrawPattern()中调用绘制方法

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

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

根据需求绘制相应图形;

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

通过OH_NativeWindow_NativeWindowFlushBuffer 提交给消费者使用,例如:显示在屏幕上

3、改变背景:

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

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

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

核心代码解释

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

3.将接口函数NapiDrawPattern ()注册为ArkTS侧接口drawPattern (),在ArkTS侧调用drawPattern ()方法,完成绘制。

使用NAPI将C++方法传递给ArkTS:

创建接口函数NapiDrawPattern (),封装对应C++渲染方法。根据XComponent组件信息,获取对应的渲染模块render,调用绘制方法。

注册为ArkTS侧接口的方法,固定为napi_value (*napi_callback)(napi_env env, napi_callback_info info)类型,不可更改。napi_value为NAPI定义的指针,无返回值时返回 nullptr。

将接口函数NapiDrawPattern ()注册为ArkTS侧接口drawPattern (),在ArkTS侧调用drawPattern ()方法,完成绘制。

释放相关资源:

释放申请资源的步骤如下:

EGLCore类下创建Release()方法,去掉内存映射

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

将回调函数方法绑定为组件销毁事件的回调方法,组件销毁时触发,释放相关资源。

注册与编译:

在napi_init.cpp文件中,Init方法注册上文实现的接口函数,从而将封装的C++方法传递出来,供ArkTS侧调用。

通过PluginManager调用Export()编写接口函数,根据实际需要可以修改对应参数。

attribute((constructor))修饰的方法由系统自动调用,使用NAPI接口napi_module_register()传入模块描述信息进行模块注册。

使用CMake工具链将C++源代码编译成动态链接库文件 实现效果 实现效果

注明适配的版本信息

DevEco Studio Version: 4.0.1.601

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-22 17:55:11
相关问题
XComponent使用OpenGl ES
279浏览 • 1回复 待解决
简单的绘图板有人知道方法吗?
346浏览 • 1回复 待解决
Xcomponent、NativeImage开发指导
460浏览 • 1回复 待解决
XComponent 怎么设置为透明
936浏览 • 1回复 待解决
应用子窗口的开发流程是什么
775浏览 • 1回复 待解决
xComponent组件帧率怎么统计?
274浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
922浏览 • 1回复 待解决
编译打包流程任务编排
347浏览 • 1回复 待解决
XComponent 怎么设置成透明
662浏览 • 1回复 待解决
首页LazyForEach predict耗时久分析
373浏览 • 1回复 待解决
分析埋点无法正常上报
481浏览 • 1回复 待解决
什么是PolarDB的锁分析
1651浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
465浏览 • 1回复 待解决
zlib.decompressFile()解压报错如何分析
481浏览 • 1回复 待解决
有没有性能分析工具啊?
352浏览 • 1回复 待解决
什么是PolarDB的空间分析
2812浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
512浏览 • 1回复 待解决
XComponent是怎么与native进行关联的?
1050浏览 • 1回复 待解决
响应时延/掉帧性能问题分析
210浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
278浏览 • 1回复 待解决
"NAPI通信耗时长"导致丢帧分析
180浏览 • 1回复 待解决