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

opengl渲染矩形

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

本文主要介绍如何实现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) 
}

初始化环境

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; 
}

绘制前准备,获取position

释放相关资源

实现效果

适配版本信息

 IDE:DevEco Studio 4.0.1.501

 SDK:HarmoneyOS 4.0.0.38

分享
微博
QQ
微信
回复
2024-05-22 21:22:03
相关问题
为何picker-view无法显示出来
6214浏览 • 2回复 待解决
XComponent使用OpenGl ES
314浏览 • 1回复 待解决
XComponentopenGL实现3D图形绘制
544浏览 • 1回复 待解决
如何openGL做解码后处理
699浏览 • 0回复 待解决
如何渲染gif类型的文件
5700浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
472浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
401浏览 • 1回复 待解决
webview是否支持同层渲染
752浏览 • 1回复 待解决
class二次刷新渲染数组
344浏览 • 1回复 待解决
组件状态修改与build渲染机制
381浏览 • 1回复 待解决
ArkUI节点模型和渲染机制
402浏览 • 1回复 待解决
在Stage模型下如何主动重新渲染UI
1749浏览 • 1回复 已解决
动画如何渲染一次不消失
6417浏览 • 1回复 待解决
Web组件是否支持离屏渲染
650浏览 • 0回复 待解决
视频解码结果通过到vulkan渲染
698浏览 • 1回复 待解决
合理选择条件渲染和显隐控制
248浏览 • 1回复 待解决