From adcef1399f083afd3595314b4534faba1926b632 Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Wed, 10 Sep 2025 15:12:15 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E6=B8=B8=E6=88=8F=E7=95=8C=E9=9D=A2=E3=80=91=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en.md | 16 ++++++++-------- README.md | 14 +++++++------- entry/src/main/cpp/CMakeLists.txt | 2 +- .../main/ets/entryability/EntryAbility.ets | 19 +++++++++++++++---- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/README.en.md b/README.en.md index 6a4d98a..1a346e0 100644 --- a/README.en.md +++ b/README.en.md @@ -1,20 +1,20 @@ # OpenGL Tetrahedron -### Overview +## Overview The XComponent is frequently used for displaying camera preview streams and rendering game graphics. In HarmonyOS, it can be combined with the NativeWindow to create an OpenGL development environment, allowing you to display graphics rendered using OpenGL on the XComponent. This sample, based on the Native C++ template, uses OpenGL (OpenGL ES) API calls to draw a 3D shape (tetrahedron) and render it on the XComponent of the page. The sample also includes an auto rotation button for continuous spinning and a damped rotation button that slows down the rotation until it stops. In addition, you can manipulate the tetrahedron by swiping on the screen, presenting the shape from various perspectives on the page. -### Preview +## Preview | Home page | Rotated drawing | |:------------------------------------:|:-------------------------------------:| | ![](screenshots/device/index.en.png) | ![](screenshots/device/rotate.en.png) | -### How to Use +## How to Use The app's UI demonstrates the use of the XComponent and employs OpenGL (OpenGL ES) standard APIs to render a 3D graphic (tetrahedron), with a simple linear light source for the 3D illumination. You can swipe across the screen to rotate the tetrahedron. The primary method for updating the 3D graphic's rotation angle is through the NAPI interface. -### Project Directory +## Project Directory ``` ├──entry/src/main/cpp/ @@ -48,7 +48,7 @@ The app's UI demonstrates the use of the XComponent and employs OpenGL (OpenGL E └──entry/src/main/resources // Static resources ``` -### How to Implement +## How to Implement Create a native C++ project in DevEco Studio, define the **Init** and **Update** functions in the C++ code for initializing the 3D graphics rendering environment and updating the graphics rendering, respectively. Map the NAPI interface **UpdateAngle**. On the ArkTS side, use the XComponent to implement **Index.ets**. On the C++ side, use the OpenGL ES standard APIs to handle the rendering process of the tetrahedron and to facilitate the interaction with ArkTS. @@ -71,15 +71,15 @@ Native XComponent functions are as follows: | OH_NativeXComponent_RegisterCallback(OH_NativeXComponent *component, OH_NativeXComponent_Callback *callback) | Registers a callback for this instance. | | OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent *component, OH_NativeXComponent_MouseEvent_Callback *callback) | Registers a mouse event callback for this instance. | -### Required Permissions +## Required Permissions N/A -### Dependencies +## Dependencies N/A -### Constraints +## Constraints 1. The sample is only supported on Huawei phones, tablets with standard systems. diff --git a/README.md b/README.md index 6c6dd1e..2c1aa32 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # 多设备游戏界面 -### 介绍 +## 介绍 XComponent控件常用于相机预览流的显示和游戏画面的绘制，在HarmonyOS上，可以配合Native Window创建OpenGL开发环境，并最终将OpenGL绘制的图形显示到XComponent控件。本示例基于"Native C++"模板，调用OpenGL(OpenGL ES)图形库相关API绘制3D图形（三棱锥），并将结果渲染到页面的XComponent控件中进行展示。同时，点击自动旋转按钮可以自动旋转，点击阻尼旋转可以减速旋转直至停止旋转，还可以在屏幕上通过触摸滑动手势对三棱锥进行旋转，最终得到不同角度的图形并显示到页面。 -### 效果预览 +## 效果预览 | 手机 | 折叠屏 | 平板 | |:-----:|:-------------------------------:|------------------------------------| @@ -18,7 +18,7 @@ XComponent控件常用于相机预览流的显示和游戏画面的绘制，在H 此外，增加了一多适配能力，OpenGL绘制三棱锥区域可自适应手机、折叠屏、平板设备，同时，支持竖屏旋转，且自动避让摄像头区域。 -### 工程目录 +## 工程目录 ``` ├──entry/src/main/cpp/ @@ -52,7 +52,7 @@ XComponent控件常用于相机预览流的显示和游戏画面的绘制，在H └──entry/src/main/resources // 应用静态资源目录 ``` -### 具体实现 +## 具体实现 通过在IDE中创建Native C++工程，在C++代码中定义接口为Init和Update用于3D图形绘制环境的初始化和图形渲染更新，并映射NAPI相关接口UpdateAngle。ArkTS侧主要利用XComponent控件实现Index.ets，C++侧主要采用OpenGL ES相关标准API实现三棱锥的绘制流程相关代码，并可与ArkTS进行交互。 @@ -74,15 +74,15 @@ Native XComponent相关函数如下： | OH_NativeXComponent_RegisterCallback(OH_NativeXComponent *component, OH_NativeXComponent_Callback *callback) | 实例注册回调 | | OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent *component, OH_NativeXComponent_MouseEvent_Callback *callback) | 实例注册鼠标事件回调 | -### 相关权限 +## 相关权限 不涉及。 -### 依赖 +## 依赖 不涉及。 -### 约束与限制 +## 约束与限制 1. 本示例仅支持标准系统上运行，支持设备：华为手机、平板。 2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。 diff --git a/entry/src/main/cpp/CMakeLists.txt b/entry/src/main/cpp/CMakeLists.txt index 0848534..1e2fb32 100644 --- a/entry/src/main/cpp/CMakeLists.txt +++ b/entry/src/main/cpp/CMakeLists.txt @@ -14,7 +14,7 @@ # # the minimum version of CMake. -cmake_minimum_required(VERSION 3.4.1) +cmake_minimum_required(VERSION 3.5.0) # project project(Tetrahedron) diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index ced332d..1622b12 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -17,6 +17,7 @@ import { UIAbility } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; import { Logger } from '../utils/Logger'; +import { hilog } from '@kit.PerformanceAnalysisKit'; // [Start get_breakPoint] export default class EntryAbility extends UIAbility { @@ -29,7 +30,6 @@ export default class EntryAbility extends UIAbility { AppStorage.setOrCreate('windowHeight', windowSize.height); AppStorage.setOrCreate('windowWidth', windowSize.width); }; - // [StartExclude get_breakPoint] // [Start onAvoidAreaChange] public onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => { @@ -37,6 +37,7 @@ export default class EntryAbility extends UIAbility { AppStorage.setOrCreate('cutout', avoidArea); } } + // [StartExclude onAvoidAreaChange] onCreate() { Logger.info('Ability onCreate'); @@ -45,6 +46,7 @@ export default class EntryAbility extends UIAbility { onDestroy() { Logger.info('Ability onDestroy'); } + // [EndExclude get_breakPoint] // [EndExclude onAvoidAreaChange] @@ -57,9 +59,15 @@ export default class EntryAbility extends UIAbility { Logger.info('Ability onWindowStageCreate'); // [EndExclude immersive] - // Set the main window to immersive and hide the navigation bar. - windowStage.getMainWindowSync().setWindowLayoutFullScreen(true); - windowStage.getMainWindowSync().setWindowSystemBarEnable([]); + try { + // Set the main window to immersive and hide the navigation bar. + windowStage.getMainWindowSync().setWindowLayoutFullScreen(true); + windowStage.getMainWindowSync().setWindowSystemBarEnable([]); + } catch (error) { + let err = error as BusinessError; + hilog.error(0x0000, 'EntryAbility', + `Failed to set the window state. Error code=${err.code}, message=${err.message}`); + } // [StartExclude immersive] // Set the display direction of the main window. @@ -126,6 +134,7 @@ export default class EntryAbility extends UIAbility { }); // [EndExclude immersive] } + // [End immersive] // [End onAvoidAreaChange] @@ -144,6 +153,8 @@ export default class EntryAbility extends UIAbility { // Ability has back to background Logger.info('%{public}s', 'Ability onBackground'); } + // [EndExclude get_breakPoint] }; + // [End get_breakPoint] \ No newline at end of file -- Gitee From 9b1235b109873817a780b4e58dbcfc98d18b83ce Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Wed, 10 Sep 2025 15:18:43 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E6=B8=B8=E6=88=8F=E7=95=8C=E9=9D=A2=E3=80=91=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/pages/Index.ets | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 76c8ec6..559995b 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -201,7 +201,7 @@ struct Index { .onLoad(() => { Logger.info('onLoad'); }) - .key('tetrahedron') + .id('tetrahedron') .onDestroy(() => { Logger.info('onDestroy'); }) -- Gitee