Xcomponent、NativeImage开发指导

Xcomponent、NativeImage开发指导

HarmonyOS
2024-05-21 22:06:25
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
lovingkane

NativeImage是提供

针对NativeImage,常见的开发场景如下:

 通过NativeImage提供的Native API接口创建NativeImage实例作为消费者端,获取与该实例对应的NativeWindow作为生产者端。NativeWindow相关接口可用于填充Buffer内容并提交,NativeImage将Buffer内容更新到OpenGL外部纹理上。本模块需要配合NativeWindow、NativeBuffer、EGL、GLES3模块一起使用。

使用的核心API

XComponent开发

NativeImage开发

开发流程:

在界面中定义Xcomponent

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

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

初始化环境

渲染功能实现

释放相关资源

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

Xcomponent绘图简略流程

具体流程

ArkTS侧方法调用:

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

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

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

C++侧渲染功能实现:

1、初始化环境:

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

初始化EGL环境:检查egl扩展,通过GetPlatformEglDisplay()方法回去当前显示设备并初始化,绑定图形绘制的API为OpenGLES,通过eglChooseConfig()获取一个有效的系统配置信息,创建EGL上下文, 关联上下文

2、绘制图形:

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

创建OH_NativeImage实例。

获取对应的数据生产者端NativeWindow和NativeWindowBuffer

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

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

根据需求绘制相应图形;

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

3、改变背景:

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

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

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

核心代码解释

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

3、创建OH_NativeImage实例,获取对应的数据生产者端NativeWindow、NativeWindowBuffer

4.更新内容到OpenGL纹理,并解绑OpenGL纹理,绑定到新的外部纹理上。

5.将接口函数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 20:12:00
相关问题
访问控制开发指导,有谁知道吗?
466浏览 • 1回复 待解决
Charles工具-App开发抓包指导
263浏览 • 1回复 待解决
OH_NativeImage_UpdateSurfaceImage接口错误码
600浏览 • 1回复 待解决
指导Hi3861平台的JS应用开发???
5229浏览 • 2回复 待解决
Xcomponent绘图流程分析
498浏览 • 1回复 待解决
XComponent使用OpenGl ES
283浏览 • 1回复 待解决
DFX-性能打点(HiTrace)指导
252浏览 • 1回复 待解决
XComponent 怎么设置为透明
946浏览 • 1回复 待解决
xComponent组件帧率怎么统计?
274浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
959浏览 • 1回复 待解决
有谁知道常用AppFreeze使用指导
248浏览 • 1回复 待解决
应用性能问题定位和优化指导
1218浏览 • 1回复 待解决
XComponent 怎么设置成透明
678浏览 • 1回复 待解决
DFX-Hilog日志打印指导
266浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
469浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
512浏览 • 1回复 待解决
XComponent是怎么与native进行关联的?
1059浏览 • 1回复 待解决