Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 69812af2 编写于 作者: M minjie.yu
浏览文件
操作

add zh-cn/third-party-cases/how-to-use-opengl-to-draw-3d-graphics.md 

Signed-off-by: Nminjie.yu <minjie.yu@unionman.com.cn>
上级 cf5e0610
隐藏空白更改
内联 并排
Showing with 802 addition and 0 deletion
zh-cn/third-party-cases/Readme-CN.md
浏览文件 @ 69812af2
......@@ -20,6 +20,7 @@
- [如何实现列表的二级联动](interact-lists.md)
- [时钟开发示例](time-styles-shift.md)
- [弹簧动画开发](how-to-develop-spring-animation.md)
- [如何使用OpenGL实现3D图形](how-to-use-opengl-to-draw-3d-graphics.md)
### 网络管理
- [如何请求并加载网络图片](how-to-load-images-from-internet.md)
......
zh-cn/third-party-cases/how-to-use-opengl-to-draw-3d-graphics.md 0 → 100644
浏览文件 @ 69812af2
# 如何使用OpenGL绘制3D图形
## 场景介绍
XComponent控件常用于相机预览流的显示和游戏画面的绘制,在OpenHarmony上，可以配合Native Window创建OpenGL开发环境，并最终将OpenGL绘制的图形显示到XComponent控件。本文将采用"Native C++"模板，调用OpenGL ES图形库绘制3D图形（三棱锥），并将结果渲染到页面的XComponent控件中进行展示。同时，还可以在屏幕上通过触摸滑动手势对三棱锥进行旋转，最终得到不同角度的图形并显示到页面。
## 效果展示
| 首页 | 滑动屏幕旋转变换 |
| ----------------------------------------------------- | ------------------------------------------------------- |
| ![3d-graphic-index.png](figures/3d-graphic-index.png) | ![3d-graphic-rotate.png](figures/3d-graphic-rotate.png) |
## 环境要求
- 本示例仅支持在标准系统上运行。
- IDE：DevEco Studio 3.1 Beta2
- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
## 实现思路
利用XComponent组件，并配合OpenHarmony的native侧提供的native window用来创建EGL/OpenGLES环境，进而使用标准的OpenGL ES相关API进行应用开发。其中
XComponent组件作为一种绘制组件，通常用于满足开发者较为复杂的自定义绘制需求，当XComponent设置为surface类型时通常用于EGL/OpenGLES和媒体数据写入，并将其显示在XComponent组件上。
## 开发步骤
### 1、环境搭建
我们首先要完成应用开发环境的搭建，本示例运行DAYU200开发板上。
- 搭建应用开发环境
（1）开始前，请参考完成[DevEco Studio的安装和开发环境配置](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-deveco-studio-overview-0000001263280421)。
> 说明：
>
> 为确保运行效果，本案例以使用DevEco Studio 3.1 Beta2 SDK：API9 （3.2.11.9）版本为例。
![3d-graphic-creat-project.png](figures/3d-graphic-creat-project.png)
（2）开发环境配置完成后，创建工程（模板选择“Native C++”)，选择eTS语言开发。
- 应用调测工程创建完成后，选择使用真机进行调测。
（1）将搭载OpenHarmony标准系统的开发板与电脑连接。
（2）点击File> Project Structure... > Project>SigningConfigs界面勾选“Automatically generate signature”，等待自动签名完成即可，最后点击“OK”。如下图所示：
![3d-graphic-creat-signature.png](figures/3d-graphic-signature.png)
（3）在编辑窗口右上角的工具栏，点击"运行"按钮运行。
![3d-graphic-run.png](figures/3d-graphic-run.png)
### 2、源码结构
- 代码结构分析，整个工程的代码结构如下：
![3d-graphic-creat-code-struct.png](figures/3d-graphic-code-struct.png)
- 文件说明如下：
```shell
.
└── main
├── cpp
│   ├── app_napi.cpp //C++与ArkTS中XComponent控件交互的napi接口实现
│   ├── CMakeLists.txt //CMake规则配置文件，NAPI C/C++代码编译需要配置该文件
│   ├── include
│   │   ├── app_napi.h
│   │   ├── tetrahedron.h //三棱锥类实现头文件
│   │   └── util
│   ├── module.cpp //NAPI模块注册
│   ├── napi_manager.cpp
│   ├── napi_util.cpp
│   ├── tetrahedron.cpp //三棱锥的绘制OpenGL实现
│   └── type
│   └── libentry
├── ets
│   ├── entryability
│   │   └── EntryAbility.ts
│   └── pages
│   └── Index.ets    //主页面
├── module.json5
└── resources    //资源文件目录
├── base
│   ├── element
│   ├── media
│   └── profile
├── en_US
│   └── element
├── rawfile
└── zh_CN
└── element
```
### 3、绘制流程
- 3D绘制函数调用流程如下：
```mermaid
graph LR
A[napi init]
B[AppNapi Export]
C[AppNapi OnSurfaceCreatedCB]
D[AppNapi OnSurfaceCreated]
E[triangles Init]
F[triangles Update]
A ----> B
B ----> C
C -- Xcomponent, window--> D
D -- Native window --> E
E ----> F
```
- 在Tetrahedron类的Update方法中使用GLES3库着色器绘制，最终通过ArkUI的XComponent组件显示，流程如下：
```mermaid
graph LR
A[glClear]
B[设置gl_Position]
C[设置gl_FragColor]
D[glDrawArrays]
A ----> B
B ----> C
C ----> D
```
### 4、C++（OpenGL）实现
C++端方法源码是工程的entry/src/main/cpp/tetrahedron.cpp文件。
- 注册模块先定义一个模块，在entry/src/main/cpp/module.cpp文件中，对应结构体类型为napi_module，模块定义好后，调用NAPI提供的模块注册函数napi_module_register(napi_module* mod)注册到系统中；
```cpp
/*
* Napi Module define
*/
static napi_module appNapiModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_register_func = Init,
.nm_modname = "tetrahedron_napi",
.nm_priv = ((void*)0),
.reserved = { 0 },
};
/*
* Module register function
*/
extern "C" __attribute__((constructor)) void RegisterModule(void)
{
napi_module_register(&appNapiModule);
}
```
- 调用OpenGL相关图形API绘制三棱锥
（1）初始化
```cpp
int32_t Tetrahedron::Init(void *window, int32_t width, int32_t height)
{
window_ = window;
width_ = width;
height_ = height;
LOGI("Init window = %{public}p, w = %{public}d, h = %{public}d.", window, width, height);
mEglWindow = reinterpret_cast<EGLNativeWindowType>(window);
// 1. create sharedcontext
mEGLDisplay = eglGetDisplay(EGL_DEFAULT_DISPLAY);
if (mEGLDisplay == EGL_NO_DISPLAY) {
LOGE("unable to get EGL display.");
return -1;
}
EGLint eglMajVers, eglMinVers;
if (!eglInitialize(mEGLDisplay, &eglMajVers, &eglMinVers)) {
mEGLDisplay = EGL_NO_DISPLAY;
LOGE("unable to initialize display");
return -1;
}
int version = 3;
mEGLConfig = getConfig(version, mEGLDisplay);
if (mEGLConfig == nullptr) {
LOGE("GLContextInit config ERROR");
return -1;
}
// 2. Create EGL Surface from Native Window
EGLint winAttribs[] = {EGL_GL_COLORSPACE_KHR, EGL_GL_COLORSPACE_SRGB_KHR, EGL_NONE};
if (mEglWindow) {
mEGLSurface = eglCreateWindowSurface(mEGLDisplay, mEGLConfig, mEglWindow, winAttribs);
if (mEGLSurface == nullptr) {
LOGE("eglCreateContext eglSurface is null");
return -1;
}
}
// 3. Create EGLContext from
int attrib3_list[] = {
EGL_CONTEXT_CLIENT_VERSION, 2,
EGL_NONE
};
mEGLContext = eglCreateContext(mEGLDisplay, mEGLConfig, mSharedEGLContext, attrib3_list);
if (!eglMakeCurrent(mEGLDisplay, mEGLSurface, mEGLSurface, mEGLContext)) {
LOGE("eglMakeCurrent error = %{public}d", eglGetError());
}
mProgramHandle = CreateProgram(vertexShader, fragmentShader);
if (!mProgramHandle) {
LOGE("Could not create CreateProgram");
return -1;
}
LOGI("Init success.");
return 0;
}
```
其中，顶点着色器实现如下：
```cpp
char vertexShader[] =
"attribute vec4 apos;\n"
"attribute vec4 a_color;\n"
"attribute vec4 a_normal;\n"
"uniform vec3 u_lightColor;\n"
"uniform vec3 u_lightDirection;\n"
"uniform mat4 a_mx;\n"
"uniform mat4 a_my;\n"
"varying vec4 v_color;\n"
"void main(){\n"
"float radian = radians(30.0);\n"
"float cos = cos(radian);\n"
"float sin = sin(radian);\n"
" gl_Position = a_mx * a_my * vec4(apos.x, apos.y, apos.z, 1.0);\n"
" vec3 normal = normalize((a_mx * a_my * a_normal).xyz);\n"
" float dot = max(dot(u_lightDirection, normal), 0.0);\n"
" vec3 reflectedLight = u_lightColor * a_color.rgb * dot;\n"
" v_color = vec4(reflectedLight, a_color.a);\n"
"}\n\0";
```
（2）图像渲染
​ OpenGL ES图像渲染中着色器涉及到内置变量如下，所谓内置变量就是不用声明可以直接赋值，主要是为了实现特定的功能。
| 序号 | 内置变量 | 含义 | 值数据类型 |
| --- | ------------- | ----------------- | ----- |
| 1 | gl_PointSize | 点渲染模式，方形点区域渲染像素大小 | float |
| 2 | gl_Position | 顶点位置坐标 | vec4 |
| 3 | gl_FragColor | 片元颜色值 | vec4 |
| 4 | gl_FragCoord | 片元坐标，单位像素 | vec2 |
| 5 | gl_PointCoord | 点渲染模式对应点像素坐标 | vec2 |
​ 而本次渲染涉及到两个内建变量：gl_Position和gl_FragColor；
​ 其中，gl_Position变量表示最终传入片元着色器片元化要使用的顶点位置坐标，取值范围为-1.0到1.0，点超过该范围将自动被裁剪。初始化代码如下：
```cpp
gl_Position = a_mx * a_my * vec4(apos.x, apos.y, apos.z, 1.0);
```
​
a_my为y轴旋转矩阵，获取到旋转角度后初始化旋转矩阵；a_mx为x轴旋转矩阵，apos为绘制多面体点矩阵；
这些值的初始化通过glUniformMatrix4fv函数实现：
```cpp
mxGL_APICALL void GL_APIENTRY glUniformMatrix4fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat *value)
```
其中参数的含义如下：
| 序号 | 参数名 | 含义 |
| --- | --------- | ------------------------------------------------------------- |
| 1 | location | uniform对应的变量名 |
| 2 | count | 需要加载数据的数组元素的数量或者需要修改的矩阵的数量 |
| 3 | transpose | 指明矩阵是列优先(column major)矩阵（GL_FALSE）还是行优先(row major)矩阵（GL_TRUE） |
| 4 | value | 指向由count个元素的数组的指针 |
​ gl_FragColor变量用于确定图形的颜色，可通过设置不同片段着色器的颜色，实现立体效果。
        片段着色器实现如下：
```cpp
char fragmentShader[] =
"precision mediump float;\n"
"varying vec4 v_color;\n"
"void main () {\n"
" gl_FragColor = v_color;\n"
"}\n\0";
```
       三棱锥核心绘制代码如下：
```cpp
void Tetrahedron::Update(float angleX, float angleY)
{
angleY_ = angleY;
angleX_ = angleX;
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(mProgramHandle);
unsigned int aposLocation = glGetAttribLocation(mProgramHandle, "apos");
unsigned int a_color = glGetAttribLocation(mProgramHandle, "a_color");
unsigned int a_normal = glGetAttribLocation(mProgramHandle, "a_normal");
unsigned int u_lightColor = glGetUniformLocation(mProgramHandle, "u_lightColor");
unsigned int u_lightDirection = glGetUniformLocation(mProgramHandle, "u_lightDirection");
unsigned int mx = glGetUniformLocation(mProgramHandle, "a_mx");
unsigned int my = glGetUniformLocation(mProgramHandle, "a_my");
/**
y轴旋转度
**/
float radianY = angleY * PI /180.0;
float cosY = cosf(radianY);
float sinY = sinf(radianY);
float myArr[] = {
cosY,0,-sinY,0, 0,1,0,0, sinY,0,cosY,0, 0,0,0,1
};
glUniformMatrix4fv(my, 1,false, myArr);
/**
x轴旋转度
**/
float radianX = angleX * PI /180.0;
float cosX = cosf(radianX);
float sinX = sinf(radianX);
float mxArr[] = {
1,0,0,0, 0,cosX,-sinX,0, 0,sinX,cosX,0, 0,0,0,1
};
glUniformMatrix4fv(mx, 1,false, mxArr);
/**
给平行光传入颜色和方向数据，RGB(1,1,1),单位向量(x,y,z)
**/
glUniform3f(u_lightColor, 1.0, 1.0, 1.0);
// 保证向量(x,y,z)的长度为1，即单位向量
float x = 1.0/sqrt(15), y = 2.0/sqrt(15), z = 3.0/sqrt(15);
glUniform3f(u_lightDirection, x,-y,z);
/**
创建顶点位置数据数组data，原点到各顶点的距离都为1
**/
float data[] = {
-0.75, -0.50, -0.43, 0.75, -0.50, -0.43, 0.00, -0.50, 0.87,
0.75, -0.50, -0.43, 0.00, -0.50, 0.87, 0.00, 1.00, 0.00,
0.00, -0.50, 0.87, 0.00, 1.00, 0.00, -0.75, -0.50, -0.43,
0.00, 1.00, 0.00, -0.75, -0.50, -0.43, 0.75, -0.50, -0.43,
};
/**
创建顶点颜色数组colorData
**/
float colorData[] = {
1,0,0, 1,0,0, 1,0,0,//红色——面1
1,0,0, 1,0,0, 1,0,0,//红色——面2
1,0,0, 1,0,0, 1,0,0,//红色——面3
1,0,0, 1,0,0, 1,0,0 //红色——面4
};
/**
顶点法向量数组normalData
**/
float normalData[] = {
0.00, -1.00, 0.00, 0.00, -1.00, 0.00, 0.00, -1.00, 0.00,
-0.83, -0.28, -0.48, -0.83, -0.28, -0.48, -0.83, -0.28, -0.48,
-0.83, 0.28, 0.48, -0.83, 0.28, 0.48, -0.83, 0.28, 0.48,
0.00, -0.28, 0.96, 0.00, -0.28, 0.96, 0.00, -0.28, 0.96,
};
/**
创建缓冲区buffer，传入顶点位置数据data
**/
unsigned int buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(data), data, GL_STATIC_DRAW);
glVertexAttribPointer(aposLocation, 3, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(aposLocation);
unsigned int normalBuffer;
glGenBuffers(1, &normalBuffer);
glBindBuffer(GL_ARRAY_BUFFER, normalBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(normalData), normalData, GL_STATIC_DRAW);
glVertexAttribPointer(a_normal, 3, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(a_normal);
/**
创建缓冲区colorBuffer，传入顶点颜色数据colorData
**/
unsigned int colorBuffer;
glGenBuffers(1, &colorBuffer);
glBindBuffer(GL_ARRAY_BUFFER, colorBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(colorData), colorData, GL_STATIC_DRAW);
glVertexAttribPointer(a_color, 3, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(a_color);
/* 执行绘制命令 */
glDrawArrays(GL_TRIANGLES, 0, 12);
}
```
### 5、NAPI接口定义
接口定义为固定写法，在napi_property_descriptor desc[]中，我们需要使用DECLARE_NAPI_FUNCTION宏，以Add函数为例，将函数名字符串"Add"与具体的实现方法napi_value Add(napi_env env, napi_callback_info info)进行关联，即DECLARE_NAPI_FUNCTION("Add", Add)最终添加到desc[]。如下所示，其中UpdateAngle对应的是Native C++的接口，其应用端的接口对应为UpdateAngle，NAPI通过napi_define_properties接口将napi_property_descriptor结构体中的2个接口绑定在一起，并通过exports变量对外导出，使应用层可以调用UpdateAngle和getContext方法。
```cpp
/*
* function for module exports
*/
EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports)
{
LOGE("Init");
napi_property_descriptor desc[] = {
DECLARE_NAPI_FUNCTION("getContext", NapiManager::GetContext),
DECLARE_NAPI_FUNCTION("UpdateAngle", AppNapi::UpdateAngle),
};
NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
bool ret = NapiManager::GetInstance()->Export(env, exports);
if (!ret) {
LOGE("Init failed");
}
return exports;
}
EXTERN_C_END
```
### 6、NAPI接口实现
​ Tetrahedron::UpdateAngle：传入angleX和angleY两个参数，分别为为绕X，Y轴的旋转角度；作为参数调用```Tetrahedron::UpdateAngle(float angleX, float angleY)```重新渲染，具体代码如下：
```cpp
napi_value AppNapi::UpdateAngle(napi_env env, napi_callback_info info){
LOGE("Tetrahedron UpdateAngle");
size_t requireArgc = 2;
size_t argc = 2;
int speed = 3;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args , nullptr, nullptr);
napi_valuetype valuetype0;
napi_typeof(env, args[0], &valuetype0);
napi_valuetype valuetype1;
napi_typeof(env, args[1], &valuetype1);
double offsetX;
napi_get_value_double(env, args[0], &offsetX);
double offsetY;
napi_get_value_double(env, args[1], &offsetY);
/* 处理offsetX偏移角度 */
float tetrahedron_angleX = tetrahedron_->GetAngleX();
float tetrahedron_angleY = tetrahedron_->GetAngleY();
/* 上下滑动绕x轴 */
if(offsetY < 0){
tetrahedron_angleX = tetrahedron_angleX + speed;
}
else{
tetrahedron_angleX = tetrahedron_angleX - speed;
}
/* 左右滑动绕y轴 */
if(offsetX < 0){
triangles_angleY = triangles_angleY + speed;
}
else{
triangles_angleY = triangles_angleY - speed;
}
tetrahedron_angleY = normalize(tetrahedron_angleY);
tetrahedron_angleX = normalize(tetrahedron_angleX);
tetrahedron_->Update(tetrahedron_angleX, tetrahedron_angleY);
/* 创建一个数组 */
napi_value ret;
napi_create_array(env, &ret);
/* 设置数组并返回 */
napi_value num;
napi_create_int32(env, tetrahedron_angleX, &num);
napi_set_element(env, ret, 0, num);
napi_create_int32(env, tetrahedron_angleY, &num);
napi_set_element(env, ret, 1, num);
return ret;
}
```
​ GetContext：得到渲染所XComponent的上下文context，以便后续绑定XComponentID渲染，具体代码如下：
```cpp
napi_value NapiManager::GetContext(napi_env env, napi_callback_info info)
{
napi_status status;
napi_value exports;
size_t argc = 1;
napi_value args[1];
NAPI_CALL(env, napi_get_cb_info(env, info, &argc, args, nullptr, nullptr));
if (argc != 1) {
napi_throw_type_error(env, NULL, "Wrong number of arguments");
return nullptr;
}
napi_valuetype valuetype;
status = napi_typeof(env, args[0], &valuetype);
if (status != napi_ok) {
return nullptr;
}
if (valuetype != napi_number) {
napi_throw_type_error(env, NULL, "Wrong arguments");
return nullptr;
}
int64_t value;
NAPI_CALL(env, napi_get_value_int64(env, args[0], &value));
NAPI_CALL(env, napi_create_object(env, &exports));
switch (value) {
case int64_t(ContextType::APP_LIFECYCLE):
{
/* AppInit 对应 app.ets中的应用生命周期 onCreate, onShow, onHide, onDestroy */
LOGD("GetContext APP_LIFECYCLE");
/* Register App Lifecycle */
napi_property_descriptor desc[] = {
DECLARE_NAPI_FUNCTION("onCreate", NapiManager::NapiOnCreate),
DECLARE_NAPI_FUNCTION("onShow", NapiManager::NapiOnShow),
DECLARE_NAPI_FUNCTION("onHide", NapiManager::NapiOnHide),
DECLARE_NAPI_FUNCTION("onDestroy", NapiManager::NapiOnDestroy),
};
NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
}
break;
case int64_t(ContextType::JS_PAGE_LIFECYCLE):
{
/* JS Page */
LOGD("GetContext JS_PAGE_LIFECYCLE");
napi_property_descriptor desc[] = {
DECLARE_NAPI_FUNCTION("onPageShow", NapiManager::NapiOnPageShow),
DECLARE_NAPI_FUNCTION("onPageHide", NapiManager::NapiOnPageHide),
};
NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
}
break;
default:
LOGE("unknown type");
}
return exports;
}
```
​ Export：先拿到XComponentID等信息后，通过NapiManager得到context，再通过context得到处理3D绘画的appNapi类并进行相应输出处理。部分代码如下（具体请查看源码）：
```cpp
bool NapiManager::Export(napi_env env, napi_value exports)
{
napi_status status;
napi_value exportInstance = nullptr;
OH_NativeXComponent *nativeXComponent = nullptr;
int32_t ret;
char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { };
uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
status = napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
if (status != napi_ok) {
return false;
}
status = napi_unwrap(env, exportInstance, reinterpret_cast<void**>(&nativeXComponent));
if (status != napi_ok) {
return false;
}
ret = OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize);
if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
return false;
}
std::string id(idStr);
auto context = NapiManager::GetInstance();
if (context) {
context->SetNativeXComponent(id, nativeXComponent);
auto app = context->GetApp(id);
app->SetNativeXComponent(nativeXComponent);
app->Export(env, exports);
return true;
}
return false;
}
```
### 7、ArkTS接口定义
（1）修改 index.d.ts 用于对外提供方法、说明（命名为tetrahedron_napi.d.ts）。
```ts
//传入x，y偏移量并返回x，y旋转角
export const UpdateAngle:(offsetX:number,offsetY:number)=>Array;
```
（2）在同目录下的 oh-package.json5 文件中将 tetrahedron_napi.d.ts 与cpp文件关联起来。
```json
{
"name": "libtetrahedron_napi.so",
"types": "./tetrahedron_napi.d.ts",
"version": "1.0.0",
"description": "Please describe the basic information."
}
```
（3）修改项目的oh-package.json5文件，添加动态库。
```json
{
"license": "",
"devDependencies": {
"@types/libtetrahedron_napi.so": "file:./src/main/cpp/type/libentry"
},
"author": "",
"name": "entry",
"description": "Please describe the basic information.",
"main": "",
"version": "1.0.0",
"dependencies": {}
}
```
### 8、CMake规则配置
entry/src/main/cpp/CMakeLists.txt是CMake规则文件。
`project`：用于设置项目(project)的名称。
`set(CMAKE_CXX_STANDARD 11)`：设置C++标准。
`include_directories`：用于包含头文件。
`add_library`：编译产生链接库。
`target_link_libraries`：指定链接给定目标和/或其依赖项时要使用的库或标志，在PUBLIC字段后的库会被链接到tetrahedron_napi中。
```textile
# the minimum version of CMake.
cmake_minimum_required(VERSION 3.4.1)
project(TetrahedronHap)
set(NATIVE_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
include_directories(${NATIVE_ROOT_PATH}
${NATIVE_ROOT_PATH}/include
${NATIVE_ROOT_PATH}/include/util)
add_library(triangles_napi SHARED
module.cpp
app_napi.cpp
tetrahedron.cpp
napi_manager.cpp
napi_util.cpp)
target_link_libraries(tetrahedron_napi PUBLIC EGL)
target_link_libraries(tetrahedron_napi PUBLIC GLESv3)
target_link_libraries(tetrahedron_napi PUBLIC hilog_ndk.z)
target_link_libraries(tetrahedron_napi PUBLIC ace_ndk.z)
target_link_libraries(tetrahedron_napi PUBLIC ace_napi.z)
target_link_libraries(tetrahedron_napi PUBLIC libc++.a)
target_link_libraries(tetrahedron_napi PUBLIC z)
target_link_libraries(tetrahedron_napi PUBLIC uv)
target_link_libraries(tetrahedron_napi PUBLIC libace_napi.z.so)
```
### 9、ArkTS实现
界面实现部分代码如下（具体请参考源码）,其中：libraryname参数对应先前设置的模块名：tetrahedron_napi
```ts
import hilog from '@ohos.hilog';
import tetrahedron_napi from 'libtetrahedron_napi.so'
@Entry
@Component
struct Index {
private xcomponentContext = null;
private xcomponentId = 'tetrahedron';
private offset_x: number = 0.000;
private offset_y: number = 0.000;
private index: number = 0;
private type_: number = 5;
private touchTypeDown: number = 0;
private touchTypeUp: number = 1;
private touchTypeMove: number = 2;
private touchTypeCancel: number = 3;
@State startVisible: Visibility = Visibility.Visible;
@State angleArray: Array<number> = new Array<number>();
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All })
@State offsetX: number = 0
@State offsetY: number = 0
@State positionX: number = 0
@State positionY: number = 0
@State message: string = 'wu'
async aboutToAppear() {
}
build() {
Column() {
Text($r('app.string.EntryAbility_desc'))
.fontSize($r('app.float.head_font_24'))
.lineHeight($r('app.float.wh_value_33'))
.fontFamily('HarmonyHeiTi-Bold')
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.font_color_182431'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.wh_value_13'), bottom: $r('app.float.wh_value_15') });
Text(this.angleArray[0]&this.angleArray[1]?'X轴旋转:'+this.angleArray[0].toString() +'°\nY轴旋转:'+this.angleArray[1].toString() + '°':'')
.fontSize($r('app.float.head_font_24'))
.lineHeight($r('app.float.wh_value_33'))
.fontFamily('HarmonyHeiTi-Bold')
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.font_color_182431'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
.textAlign(TextAlign.Start)
.margin({ top: $r('app.float.wh_value_13'), bottom: $r('app.float.wh_value_15') });
Stack({ alignContent: Alignment.Center }) {
XComponent({ id: this.xcomponentId, type: 'surface', libraryname: 'tetrahedron_napi' })
.onLoad((context) => {
hilog.info(0x0000, 'Xcomponent', 'onLoad')
this.xcomponentContext = context;
globalThis.xcomponentContext = this.xcomponentContext;
globalThis.xcomponentId = this.xcomponentId;
globalThis.touchTypeDown = this.touchTypeDown;
globalThis.touchTypeUp = this.touchTypeUp;
globalThis.type_ = this.type_;
globalThis.index = this.index;
globalThis.touchTypeMove = this.touchTypeMove;
globalThis.touchTypeCancel = this.touchTypeCancel;
globalThis.offset_x = this.offset_x;
globalThis.offset_y = this.offset_y;
})
.width($r('app.float.wh_value_362'))
.height($r('app.float.wh_value_362'))
.key('tetrahedron')
.backgroundColor('#00000000')
.onDestroy(() => {
globalThis.flag = false;
hilog.info(0x0000, "Xcomponent", 'onDestroy')
})
}
.gesture(
PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => {
console.info('onActionStart');
})
.onActionUpdate((event: GestureEvent) => {
this.angleArray = tetrahedron_napi.UpdateAngle(event.offsetX, event.offsetY);
hilog.info(0x0000, "Gesture", 'offSet:' + event.offsetX + "," + event.offsetY);
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
console.info('onActionEnd');
})
)
.width('100%')
.height('100%')
.backgroundColor('#00000000')
}
}
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或