opengl渲染矩形，如何实现opengl渲染，并用Xcomponent显示出来

opengl渲染矩形

HarmonyOS

噜啦噜啦嘞噜啦嘞

2024-05-21 22:19:29

1.8w浏览

回答 1

按赞同

按时间

计算机编程小强

本文主要介绍如何实现opengl渲染，并用Xcomponent显示出来

相关核心API

EGL

Xcomponent

核心代码介绍

ArkTs测调用

build() { 
  Column() { 
    Row() { 
      Text($r('app.string.title')) 
        .fontSize($r('app.float.title_text_font_size')) 
        .fontWeight(CommonConstants.FONT_WEIGHT) 
        .margin({ left: $r('app.float.title_text_margin_left'), top: $r('app.float.title_text_margin_top') }) 
    } 
    .margin({ top: $r('app.float.title_margin_top') }) 
    .width(CommonConstants.FULL_PARENT) 
    .height($r('app.float.title_height')) 
 
    Column() { 
      XComponent({ 
        id: CommonConstants.XCOMPONENT_ID, 
        type: CommonConstants.XCOMPONENT_TYPE, 
        libraryname: CommonConstants.XCOMPONENT_LIBRARY_NAME 
      }).onLoad((xComponentContext?: object | Record<string, () => void>) => { 
        if (xComponentContext) { 
          this.xComponentContext = xComponentContext as Record<string, () => void>; 
        } 
      }) 
    } 
    .margin({ 
      top: $r('app.float.xcomponent_margin_top'), 
      left: $r('app.float.xcomponent_margin_left'), 
      right: $r('app.float.xcomponent_margin_right') 
    }) 
    .height(CommonConstants.XCOMPONENT_HEIGHT) 
 
    Row() { 
      Button($r('app.string.button_text')) 
        .fontSize($r('app.float.button_font_size')) 
        .fontWeight(CommonConstants.FONT_WEIGHT) 
        .margin({ bottom: $r('app.float.button_margin_bottom') }) 
        .onClick(() => { 
          if (this.xComponentContext) { 
            this.xComponentContext.drawRectangle(); 
          } 
        }) 
        .width(CommonConstants.BUTTON_WIDTH) 
        .height($r('app.float.button_height')) 
    } 
    .width(CommonConstants.FULL_PARENT) 
    .justifyContent(FlexAlign.Center) 
    .alignItems(VerticalAlign.Bottom) 
    .layoutWeight(CommonConstants.LAYOUT_WEIGHT) 
  }.width(CommonConstants.FULL_PARENT).height(CommonConstants.FULL_PARENT) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.

初始化环境

EGL渲染矩形

void EGLCore::Draw() 
{ 
    m_flag = false; 
    OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "Draw"); 
    GLint position = PrepareDraw(); 
    if (POSITION_ERROR == position) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw get position failed"); 
        return; 
    } 
    if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES, 
        sizeof(BACKGROUND_RECTANGLE_VERTICES))) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw background failed"); 
        return; 
    } 
    const GLfloat rectangleVertices[] = { 
        -m_widthPercent, FIFTY_PERCENT, 
        m_widthPercent, FIFTY_PERCENT, 
        m_widthPercent, -FIFTY_PERCENT, 
        -m_widthPercent, -FIFTY_PERCENT 
    }; 
    if (!ExecuteDraw(position, DRAW_COLOR, rectangleVertices, sizeof(rectangleVertices))) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw rectangle failed"); 
        return; 
    } 
    if (!FinishDraw()) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw FinishDraw failed"); 
        return; 
    } 
    m_flag = true; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.