• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Graphics Subsystem
2
3The Graphics subsystem mainly consists of user interface (UI) components, layout, animator, font, input event, window management, and rendering and drawing modules. It is an application framework that can be built on the LiteOS to develop OpenHarmony applications for Internet of Things (IoT) devices with limited hardware resources or on the standard OS to develop OpenHarmony applications for standard- and large-system devices.
4
5## Mini System
6
7### Introduction
8
9The Graphics subsystem mainly consists of UI components, layout, animator, font, input event, window management, and rendering and drawing modules. It is an application framework that can be built on the LiteOS to develop OpenHarmony applications for IoT devices with limited hardware resources.
10
11**Figure 1** Graphics subsystem architecture
12![](figures/graphics-subsystem-architecture.png "graphics subsystem architecture")
13
14The related modules are described as follows:
15
16-   View: provides application components, including **UIView**, **UIViewGroup**, **UIButton**, **UILabel**, **UILabelButton**, **UIList**, and **UISlider**.
17-   Animator: defines functions for customizing animations.
18-   Layout: lays out components, including **FlexLayout**, **GridLayout**, and **ListLayout**.
19-   Transform: rotates, translates, or scales images.
20-   Event: processes basic events, including click, press, drag, and long press events.
21-   Rendering engine: performs rendering and drawing operations.
22-   2D graphics library: draws 2D graphical elements including lines, rectangles, circles, arcs, images, and texts. Functions of this module include interconnection with the software drawing and hardware acceleration capabilities.
23-   Multi-language: processes the line feed and shaping of texts in different languages.
24-   Image library: parses and operates images of different types and formats, such as PNG, JPEG, ARGB8888, and ARGB565.
25-   WindowManager: manages windows, including creating, showing, hiding, and combining windows.
26-   InputManager: processes input events.
27
28### Directory Structure
29
30```
31/foundation/arkui
32├── ui_lite                  # UI module, including UI components, animations, and fonts
33
34/foundation/graphic
35├── surface_lite  # Shared memory
36├── graphic_utils_lite       # Basic graphics library and hardware adaptation layer
37
38/foundation/window
39└── window_manager_lite      # Window and input event management
40```
41
42### Constraints
43
44-   The Graphics subsystem does not support multi-thread concurrent operations. You are advised to perform related operations in UI threads.
45-   The **utils/interfaces/innerkits/graphic\_config.h** file provides the configuration information about macro switches that can be used to enable or disable graphics features. You need to configure these switches before compilation. Note that some switches are configured depending on the platform.
46
47### Usage
48
49For details, see the README and **test** directory of each repository.
50
51### Repositories Involved
52
53**Graphics subsystem**
54
55[graphic\_surface_lite](https://gitee.com/openharmony/graphic_surface_lite)
56
57[arkui\_ui_lite](https://gitee.com/openharmony/arkui_ui_lite)
58
59[window\_window_manager_lite](https://gitee.com/openharmony/window_window_manager_lite)
60
61[graphic\_graphic_utils_lite](https://gitee.com/openharmony/graphic_graphic_utils_lite)
62
63## Standard System
64
65### Introduction
66
67The Graphics subsystem provides graphics APIs.
68
69The following figure shows the architecture of the Graphics subsystem.
70
71![Graphics subsystem architecture](figures/graphic_rosen_architecture.jpg)
72
73The OpenHarmony graphics stack is divided into the following layers:
74
75Interface layer: provides native APIs for the Graphics subsystem, including WebGL, native drawing, and OpenGL command-level drawing.
76
77Framework layer: consists of the Render Service, Drawing, Animation, Effect, and Display and Memory Management modules.
78| Module                    | Description                                                                                      |
79|------------------------|--------------------------------------------------------------------------------------------|
80| Render Service| Performs UI framework drawing. This module converts the ArkUI component description into drawing tree information and renders the optimal path based on the corresponding rendering policy. It also provides the core underlying mechanism for multi-window smoothness and spatial UI sharing.      |
81| Drawing          | Provides standard internal interfaces in the Graphics subsystem to implement 2D rendering, 3D rendering, and rendering engine management.                                               |
82| Animation        | Provides capabilities related to the animation engine.                                                                              |
83| Effect           | Processes image effects and rendering effects, including cascading and parallel processing of multiple effects, and adding rendering effects and component interaction effects during layout.                              |
84| Display and Memory Management               | Decouples the graphics stack from hardware and provides OpenHarmony display and memory management. OEMs need to adapt the HDIs defined by this module.|
85
86Engine layer: consists of the 2D graphics library and 3D graphics engine. The 2D graphics library provides bottom-layer APIs for 2D graphics drawing (including text drawing). The 3D graphics engine capability is being developed.
87
88
89### Directory Structure
90
91```
92foundation/graphic/standard/
93├── figures                 # Images referenced by Markdown
94├── frameworks              # Framework code
95│   ├── animation_server    # Animation server code
96│   ├── bootanimation       # Boot animation
97│   ├── dumper              # Graphic dumper code
98│   ├── fence               # Fence code
99│   ├── surface             # Surface code
100│   ├── vsync               # Vsync code
101├── rosen                   # Framework code
102│   ├── build               # Build description
103│   ├── doc                 # doc
104│   ├── include             # Code of external header files
105│   ├── lib                 # lib
106│   ├── modules             # Graphic subsystem code, organized by module
107│   ├── samples             # Sample code
108│   ├── test                # Development and test code
109│   ├── tools               # Tool code
110├── interfaces              #  Graphics APIs
111│   ├── innerkits           # Native APIs
112│   └── kits                # JS APIs and native APIs
113└── utils                   # Utilities
114```
115
116### Constraints
117
118Programming language version: C++ 11 or later
119
120### Compilation and Building
121
122### Usage
123
124For details, see the README and **test** directory of each repository.
125
126### Repositories Involved
127
128**Graphics subsystem**
129
130- [**graphic_graphic_2d**](https://gitee.com/openharmony/graphic_graphic_2d)
131- [arkui_ace_engine](https://gitee.com/openharmony/arkui_ace_engine)
132- [ability_ability_runtime](https://gitee.com/openharmony/ability_ability_runtime)
133- [multimedia_player_framework](https://gitee.com/openharmony/multimedia_player_framework)
134- [multimedia_image_standard](https://gitee.com/openharmony/multimedia_image_standard)
135- [Windowmanager](https://gitee.com/openharmony/windowmanager)
136- [third_party_egl](https://gitee.com/openharmony/third_party_egl)
137- [third_party_opengles](https://gitee.com/openharmony/third_party_opengles)
138- [third_party_skia](https://gitee.com/openharmony/third_party_skia)
139- [third_party_giflib](https://gitee.com/openharmony/third_party_giflib)
140