# XComponent

**Repository Path**: harmonyos_codelabs/XComponent

## Basic Information

- **Project Name**: XComponent
- **Description**: 基于XComponent组件调用Native API，实现图形渲染。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 5
- **Created**: 2024-06-15
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Native XComponent组件的使用

### 简介

本篇Codelab主要介绍如何使用XComponent组件调用NAPI来创建EGL/GLES环境，实现在主页面绘制一个正方形，并可以改变正方形的颜色。本篇CodeLab使用Native C++模板创建。

如图所示，点击绘制矩形按钮，XComponent组件绘制区域中渲染出一个正方形，点击绘制区域，正方形显示另一种颜色，点击绘制矩形按钮正方形还原至初始绘制的颜色。

![native_xcomponent](screenshots/device/native_xcomponent.gif)

### 相关概念

- EGL：EGL 是Khronos渲染API (如OpenGL ES 或 OpenVG) 与底层原生窗口系统之间的接口。
- XComponent：可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。

### 相关权限

不涉及

### 使用说明

1. 点击“绘制矩形”按钮，界面绘制区域中渲染出一个正方形，点击绘制区域，正方形切换显示另一种颜色，点击绘制矩形按钮还原按钮绘制的颜色。

### 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。
2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。
3. DevEco Studio版本：DevEco Studio 5.0.5 Release及以上。
4. HarmonyOS SDK版本：HarmonyOS 5.0.5 Release SDK及以上。