# 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**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Realization of Image Rendering Function Base on XComponent Component

## Introduction

This codelab introduces how to use **XComponent** to call the NAPI to create an EGL/GLES environment, draw a square on the home page, and change the color of the square. The Native C++ template is used here.

As shown in the following figure, tap the Draw Rectangle button to render a square in the drawing area of **XComponent**. Tap the drawing area so that the square displays another color. Tap the Draw Rectangle button again so that the square is restored to the original color.

<img src='./screenshots/device/native_xcomponent.en.webp' width=320>

## Concepts

- EGL: an interface between Khronos rendering APIs (such as OpenGL ES and OpenVG) and the underlying native window system.
- XComponent: a component that can accept and display the EGL/OpenGL ES and media data input.

## Permissions

N/A

## How to Use

1. Tap Draw Rectangle to render a square in the drawing area. Tap the drawing area to render the square with another color. Tap Draw Rectangle again to restore the color.

## Constraints

1. The sample is only supported on Huawei phones with standard systems.

2. HarmonyOS: HarmonyOS 5.0.5 Release or later.

3. DevEco Studio: DevEco Studio 6.0.2 Release or later.

4. HarmonyOS SDK: DevEco Studio 6.0.2 Release SDK or later.