!19455 轻量级图形图像开发指导优化

Merge pull request !19455 from Lizhiqi/master

zh-cn/device-dev/subsystems/Readme-CN.md

@@ -25,12 +25,14 @@
       - [ 常见问题](subsys-build-FAQ.md)
 - [ArkCompiler](subsys-arkcompiler-guide.md)
 - [分布式远程启动](subsys-remote-start.md)
-- 图形图像
-    - [图形图像概述](subsys-graphics-overview.md)
+- 小型系统图形图像
+    - [小型系统图形图像概述](subsys-graphics-overview.md)
+      - [普通组件开发指导](subsys-graphics-common-guide.md)
       - [容器类组件开发指导](subsys-graphics-container-guide.md)
       - [布局容器类组件开发指导](subsys-graphics-layout-guide.md)
-    - [普通组件开发指导](subsys-graphics-common-guide.md)
       - [动画开发指导](subsys-graphics-animation-guide.md)
+      - [Windows QT 模拟器使用指导](subsys-graphics-simulator-guide.md)
+      - [如何对接图形框架](subsys-graphics-porting-guide.md)
 - 媒体
     - 相机
         - [相机开发概述](subsys-multimedia-camera-overview.md)

zh-cn/device-dev/subsystems/subsys-graphics-overview.md

-# 图形图像概述
+# 小型系统图形图像框架介绍
 
+## 概述
+小型系统图形图像子系统是一套轻量级图形框架，框架包括轻量级 UI 控件、动画、事件、2D 图形库、字体布局引擎、多后端渲染和窗口管理等模块，主要用于运动手表、智能家居等小型带屏设备的图形 UI 显示。
 
-OpenHarmony图形系统，提供基础UI组件和容器类组件，包括button、image、label、list、animator、scroll view、swipe view、font、clock、chart、canvas、slider、layout等。同时提供截屏、导出组件树的DFX能力。模块内部实现组件渲染、动画、输入事件分发等功能。
+### OpenHarmony 中各 UI 之间的关系
+当前对于 OpenHarmony 应用界面开发，你可能已经了解到几个不同的概念，比如 ArkUI 声明式开发范式、ArkUI 类 Web 开发范式等，那他们和当前小型系统图形图像框架之间是什么关系呢？
 
+当前 [ace_engine](https://gitee.com/openharmony/arkui_ace_engine)  实现了标准系统的 ArkUI 声明式开发范式和 ArkUI 类 Web 开发范式两套开发框架，他们之间的详细对比可以参考 [方舟开发框架（ArkUI）概述](../../application-dev/ui/arkui-overview.md)；根据小型系统的特点 [ace_engine_lite](https://gitee.com/openharmony/arkui_ace_engine_lite) 实现了轻量级的 ArkUI 类 Web 开发范式 lite 版本，其能力是 ArkUI 类 Web 开发范式的子集。
 
-## UI组件
+按照系统类型分类如下：
+- 标准系统：
+  - ArkUI 声明式开发范式 (推荐)
+  - ArkUI 类 Web 开发范式
+- 小型系统：
+  - ArkUI 类 Web 开发范式 Lite
+  - C++ (系统应用)
 
-实现各种控件，如按钮、文本、进度条等各种基本控件。
+小型系统图形图像框架中的 [ui_lite](https://gitee.com/openharmony/arkui_ui_lite) 和 [ace_engine_lite](https://gitee.com/openharmony/arkui_ace_engine_lite)、 [ace_engine](https://gitee.com/openharmony/arkui_ace_engine) 的代码实现关系如下图：
+
+![UI关系图](figures/openharmony_ui.png)
 
-提供界面切换、图片序列帧等复杂控件。
+如何确定应用开发所需的 API 套件？对于标准系统，优先选择 ArkUI 声明式开发范式；对于小型系统，请优先考虑使用 ArkUI 类 Web 开发范式 lite。而在某些配置较低的设备上进行系统应用开发时，则可以考虑选择 C++ API，因为相比类 Web 范式，它具有更高的性能和更好的灵活性。
 
 
-## 布局
+### UI 控件
+实现各种控件，如按钮、文本、进度条等各种基本控件。
+
+提供列表、Swiper、图片序列帧等复杂控件。
 
+### 布局
 实现网格布局、灵活布局（如居中、左对齐、右对齐）。
 
 布局为一次性布局。布局函数每运行一次，会计算一次控件的位置，但是控件位置由其他方式改变时（如拖动），其他相关联的控件位置不会自动发生变化，需要重新调用一次布局函数。
 
+### 动画
+框架支持自定义动画，所有动画由 AnimatorManager 管理，根据屏幕刷新事件事件，由 AnimatorManager 周期性调用回调函数处理修改属性变化，然后触发刷新重新绘制组件，达到组件动画效果。
 
-## 动画
+提供动画的开始/停止、暂停/恢复、创建/销毁等各种操作 ，用于实现动画效果。
 
-根据tick事件，由Task Manager周期性调用回调函数处理属性变化，然后触发刷新重新绘制组件，达到组件动画效果。
+### 事件
+Input 事件包括触摸屏触摸输入事件和物理按键输入事件，引擎每运行一次，InputManager 是管理所有输入设备的模块，GUI 引擎每运行一次，InputManager 会读取一次所有注册的硬件设备的输入，转化为各种事件供UI控件使用。
 
-提供动画的开始/停止、暂停/恢复、创建/销毁等各种操作 ，用于实现动画效果。
+### 绘制
+2D 图形绘制： 实现线、矩形、三角形、弧线的绘制操作。
+
+图像绘制：实现各种类型图片的绘制能力，如 RGB565、RGB888、ARGB8888、PNG、JPG 格式。
+
+字体绘制：支持矢量字体的实时绘制、布局排版。
+
+## 实现原理
+
+小型系统图形框架中，任务队列由屏幕刷新同步信号驱动。每个任务都是一个 task，并存放在任务队列中。周期性的屏幕刷新信号触发周期性回调，从而循环驱动任务队列中的 task 执行。输入事件、动画和渲染等操作均作为单独的 task 运行。
+
+### 事件交互
+
+当前图形框架支持触摸事件（PointerInputDevice）、按键事件（KeyInputDevice）、旋转表冠事件（RotateInputDevice）。
+
+```mermaid
+classDiagram
+
+class InputDevice {
+     +Read(DeviceData& data): bool
+}
+
+class PointerInputDevice {
+    +Read(DeviceData& data): bool
+}
+
+class RotateInputDevice {
+    +Read(DeviceData& data): bool
+}
+
+class KeyInputDevice {
+    +Read(DeviceData& data): bool
+}
+
+
+class InputManager {
+    -deviceList_: List<InputDevice*>
+}
+
+InputDevice <|-- PointerInputDevice
+InputDevice <|-- RotateInputDevice
+InputDevice <|-- KeyInputDevice
+Task <|-- InputManager
+InputManager *-- InputDevice
+```
+
+输入事件相关类图如上，每类输入事件根据自己特点，重写 InputDevice 基类的 Read 函数，读取对应的输入数据，然后根据输入数据生成对应的事件分发给 UI 控件，如 PointerInputDevice 读取触摸的坐标点，根据坐标点，从组件树查找当前坐标对应的控件，生成对应的点击、长按、拖拽事件，分发给对应控件。
+
+### 动效框架
+
+```mermaid
+classDiagram
+
+class AnimatorCallback {
+     +Callback(UIView* view): void
+}
+
+class Animator {
+    +Start(): void
+    +Stop(): void
+    -callback_: AnimatorCallback*
+}
+
+class AnimatorManager {
+    -list_: List<Animator*>
+}
+
+Task <|-- AnimatorManager
+AnimatorManager *-- Animator
+Animator *-- AnimatorCallback
+```
+
+每一个自定义动画都需要继承自 Animator 类，实现 AnimatorCallback 的 Callback 接口。所有的 Animator 都由 AnimatorManager 统一管理。 Callback 接口入参为当前动画的 View，可以通过修改 View 对应的属性来产生动画效果，如坐标位置、颜色变换、缩放效果等。
+
+### 渲染框架
+
+```mermaid
+classDiagram
+
+class WindowImpl {
+    Render: void
+}
 
+class UIView {
+    OnDraw: void
+    Invalidate : void
+}
 
-## Input事件
+class RootView {
+    Measure: void
+    Render : void
+}
 
-Input事件包括触摸屏触摸输入事件和物理按键输入事件，GUI引擎每运行一次，Input Manager会读取一次所有注册的硬件设备的输入，转化为各种事件供UI控件使用。
+class RenderManager {
+    +Callback: void
+    -winList_: List<Window*>
+}
 
+Task <|-- RenderManager
+Window <|-- WindowImpl
+UIView <|-- RootView
+WindowImpl *-- RootView
+RenderManager *-- Window
+```
 
-## 渲染
+ - 每一个窗口 Window 持有一个 RootView
+ - RootView 为当前窗口的根节点，当前窗口所有控件都必须挂载在 RootView 下才能显示
+ - UIView 为所有 View 的基类，每个 View 实现自己的 OnDraw 绘制函数
+ - 每个 View 显示发生变化时，调用 Invalidate 函数，将当前区域标记为脏区域
+ - RootView 统一管理当前窗口所有的脏区域信息
+ - 每次刷新信号触发，会遍历绘制所有的 Window，每个 Window 从 RootView 开始先进行 Measure 布局，然后调用 Render 函数绘制，遍历绘制所有脏区域内的 View。
 
-- 2D图形渲染
-  实现线、矩形、三角形、弧线的绘制操作。
 
-- 图像渲染
-  实现各种类型图片的绘制API，如RGB565、RGB888、ARGB8888、PNG、JPG格式。
 
-- 字体渲染
-  支持矢量字体的实时绘制。

zh-cn/device-dev/subsystems/subsys-graphics-porting-guide.md

+# 小型系统图形框架集成指导
+
+当前，小型系统图形模块以子系统的形式在 OpenHarmony 中运行。开发者只需适配实现OpenHarmony HDF 层 API 即可。由于使用场景不同，图形子系统也支持在不同平台集成运行。例如，在 Windows/Mac 上开发应用程序时，可以使用 QT Creator 进行简单的页面布局、开发和调试。此时，图形子系统已经适配到了 Windows/Mac 平台上运行。如果想要将图形子系统独立集成到现有项目中，则需要进行一些简单的适配工作，并分为以下几个主要部分：
+
+1. 引擎初始化
+2. 显示设备适配
+3. 输入设备适配
+4. 字体初始化
+5. 屏幕刷新对接
+
+具体步骤如下，步骤最后有参考示例代码，具体可参照 [OpenHarmony 小型系统图形 Simulator 适配实现](https://gitee.com/openharmony/arkui_ui_lite/tree/master/tools/qt/simulator)。
+
+### 图形引擎初始化
+主要包括初始化 UI 任务、渲染模块、动画模块、默认样式等
+```c++
+// graphic_startup.h
+GraphicStartUp::Init();
+```
+
+### 显示设备适配
+
+主要包括设置屏幕大小，对接基础图元绘制，获取图形绘制的 buffer，把图形绘制的数据刷到屏幕上显示等。
+
+显示层适配根据硬件绘制和软件绘制不同，需继承实现不同的类。其中 [gfx_engine_manager.h](https://gitee.com/openharmony/arkui_ui_lite/blob/master/interfaces/innerkits/engines/gfx/gfx_engine_manager.h) 中的 BaseGfxEngine 类为纯虚实现，只定义了接口，不含任何实现，适合作为自行实现的硬件绘制的父类；[soft_engine.h](https://gitee.com/openharmony/arkui_ui_lite/blob/master/interfaces/innerkits/engines/gfx/soft_engine.h) 中的 SoftEngine 继承自 BaseGfxEngine，对 BaseGfxEngine 的接口进行了软件层实现，适合作为软件绘制的父类。
+
+BaseGfxEngine 类中有3类接口：
+
+第一类：获取显存、申请缓存、释放缓存；
+
+第二类：绘制类基础接口，例如：画线、Blit、Fill 等；
+
+第三类：送显接口，调用该接口完成把绘制内容送显。
+
+其中获取显存和送显接口为移植不同平台必须实现的，第二类接口，图形 UI 框架有默认软件实现，具体在 soft_engine.h 的 SoftEngine 中，软件绘制可继承 SoftEngine 进行功能拓展；不同平台如有硬件加速，例如 DMA2D，可继承 gfx_engine_manager.h 的 BaseGfxEngine，对其纯虚方法进行全部实现后，进行扩展性适配。
+
+图形对接接口代码如下：
+```c++
+// gfx_engine_manager.h
+virtual void DrawArc(BufferInfo& dst,
+                        ArcInfo& arcInfo,
+                        const Rect& mask,
+                        const Style& style,
+                        OpacityType opacity,
+                        uint8_t cap) = 0;
+
+virtual void DrawLine(BufferInfo& dst,
+                        const Point& start,
+                        const Point& end,
+                        const Rect& mask,
+                        int16_t width,
+                        ColorType color,
+                        OpacityType opacity) = 0;
+
+virtual void DrawLetter(BufferInfo& gfxDstBuffer,
+                        const uint8_t* fontMap,
+                        const Rect& fontRect,
+                        const Rect& subRect,
+                        const uint8_t fontWeight,
+                        const ColorType& color,
+                        const OpacityType opa) = 0;
+
+virtual void DrawCubicBezier(BufferInfo& dst,
+                                const Point& start,
+                                const Point& control1,
+                                const Point& control2,
+                                const Point& end,
+                                const Rect& mask,
+                                int16_t width,
+                                ColorType color,
+                                OpacityType opacity) = 0;
+
+virtual void
+    DrawRect(BufferInfo& dst, const Rect& rect, const Rect& dirtyRect, const Style& style, OpacityType opacity) = 0;
+
+virtual void DrawTransform(BufferInfo& dst,
+                            const Rect& mask,
+                            const Point& position,
+                            ColorType color,
+                            OpacityType opacity,
+                            const TransformMap& transMap,
+                            const TransformDataInfo& dataInfo) = 0;
+
+// x/y: center of a circle
+virtual void ClipCircle(const ImageInfo* info, float x, float y, float radius) = 0;
+
+virtual void Blit(BufferInfo& dst,
+                    const Point& dstPos,
+                    const BufferInfo& src,
+                    const Rect& subRect,
+                    const BlendOption& blendOption) = 0;
+
+virtual void Fill(BufferInfo& dst, const Rect& fillArea, const ColorType color, const OpacityType opacity) = 0;
+
+virtual void DrawPath(BufferInfo& dst,
+                        void* param,
+                        const Paint& paint,
+                        const Rect& rect,
+                        const Rect& invalidatedArea,
+                        const Style& style) = 0;
+
+virtual void FillPath(BufferInfo& dst,
+                        void* param,
+                        const Paint& paint,
+                        const Rect& rect,
+                        const Rect& invalidatedArea,
+                        const Style& style) = 0;
+
+virtual uint8_t* AllocBuffer(uint32_t size, uint32_t usage) = 0;
+
+virtual void FreeBuffer(uint8_t* buffer, uint32_t usage) = 0;
+
+virtual BufferInfo* GetFBBufferInfo()
+{
+    return nullptr;
+}
+
+virtual void AdjustLineStride(BufferInfo& info) {}
+
+virtual void Flush(const Rect& flushRect) {}
+
+virtual uint16_t GetScreenWidth()
+{
+    return screenWidth_;
+}
+
+virtual uint16_t GetScreenHeight()
+{
+    return screenHeight_;
+}
+
+virtual void SetScreenShape(ScreenShape screenShape)
+{
+    screenShape_ = screenShape;
+}
+
+virtual ScreenShape GetScreenShape()
+{
+    return screenShape_;
+}
+```
+
+### 输入设备适配
+
+图形框架支持触摸、按键和旋转设备。当前所有输入设备都需要继承 InputDevice 实现 Read 接口。
+
+触摸输入继承 PointerInputDevice 类实现 Read 接口，需要返回 x/y 坐标和按压状态；
+
+按键输入继承 KeyInputDevice 类实现 Read 接口，需要设置 keyId 和按键状态；
+
+旋转输入继承 RotateInputDevice 类实现 Read 接口，需要设置 rotate 值。
+
+InputDevice 设备对接实例代码如下：
+
+```c++
+// input_device.h Read 接口
+/**
+ * @brief Read data from hardware.User should override this to set data *
+ * @param [out] input device data. *
+ * @returns no more data to read if true.
+ */
+virtual bool Read(DeviceData& data) = 0;
+
+// 继承实现 InputDevice 基类的 Read 接口，以触摸事件对接为例，示例代码如下：
+class TouchInput : public OHOS::PointerInputDevice {
+public:
+    TouchInput() {}
+    virtual TouchInput() {}
+    // implements read fouction
+    bool Read(OHOS::DeviceData& data) override
+    {
+        // set position and state, you should update the value when touch
+        data.point.x = g_lastX;
+        data.point.y = g_lastY;
+        data.state = g_leftButtonDown ? STATE_PRESS : STATE_RELEASE;
+        return false;
+    }
+};
+```
+
+
+
+### 字体初始化
+
+字体分为点阵字体和矢量字体。
+
+点阵字体：需要使用字体打包工具生成对应字体 font.bin 文件，工具支持打包中英文字体，详细支持字号和 fontId 可以在工具生成的 ui_text_language.h 中查看。
+
+矢量字体：默认注册了 DEFAULT_VECTOR_FONT_FILENAME，假如想使用其他字体，可以调用 RegisterFontInfo 注册其他字体文件。矢量字体解析和布局需要依赖三方开源软件 freetype 和 icu，假如想支持阿拉伯语等复杂语言需要依赖三软件 harfbuzz，同时打开 ENABLE_SHAPING 和 ENABLE_ICU。
+
+字体初始化接口代码如下：
+
+```c++
+// graphic_config.h
+#define DEFAULT_VECTOR_FONT_FILENAME      "SourceHanSansSC-Regular.otf"
+// 矢量字体开关
+#define ENABLE_VECTOR_FONT                1
+// 点阵字体开关
+#define ENABLE_BITMAP_FONT                0
+#define ENABLE_ICU                        0
+#define ENABLE_SHAPING                    0
+
+// ui_font.h
+uint8_t RegisterFontInfo(const char* ttfName, uint8_t shaping = 0)
+
+// graphic_startup.h
+static void InitFontEngine(uintptr_t psramAddr, uint32_t psramLen, const char* dPath, const char* ttfName);
+```
+
+### 屏幕刷新对接
+
+根据屏幕硬件刷新信号（类似 Vsync 信号），周期性回调 TaskHandler
+
+屏幕刷新对接接口代码如下：
+
+```c++
+TaskManager::GetInstance()->TaskHandler();
+```
+
+### 图形适配示例代码
+
+对接相关宏定义说明如下：
+
+```c++
+// graphic_config.h
+// 默认定义了不同级别设备宏定义，轻设备请启动 VERSION_LITE 宏
+/**
+ * Defines three graphics library versions: lightweight, standard, and extended versions.
+ * The three versions have different requirements on the memory and hardware.
+ * The standard version is enabled by default.
+ *
+ * The macros of the versions are defined as follows:
+ * Name                | Version Description
+ * ------------------- | ----------
+ * VERSION_LITE        | Lightweight version
+ * VERSION_STANDARD    | Standard version
+ * VERSION_EXTENDED    | Extended version
+ */
+#ifdef _LITEOS
+#define VERSION_LITE
+#elif defined _WIN32 || defined __APPLE__
+#define VERSION_LITE
+#else
+#define VERSION_STANDARD
+#endif
+
+// 关闭窗口合成，打开需要依赖 wms 窗口合成服务
+/**
+ * @brief Multi-window, which is disabled by default on WIN32.
+ */
+#define ENABLE_WINDOW                     0
+
+// 关闭 png、jpeg 格式图片支持，打开需要引入三方库
+#define ENABLE_JPEG_AND_PNG               0
+
+// 硬件加速，关闭默认走CPU软绘制，可以先关闭，界面显示后再打开适配硬件能力
+/**
+ * @brief Graphics rendering hardware acceleration, which is disabled by default on WIN32.
+ */
+#define ENABLE_HARDWARE_ACCELERATION     0
+```
+
+对接示例代码如下：
+
+```c++
+using namespace OHOS;
+
+int main(int argc, char** argv)
+{
+    // init graphic
+    GraphicStartUp::Init();
+
+    // init display/input device
+    InitHal();
+
+    // init font engine
+    InitFontEngine();
+
+    // run your app code
+    RunApp();
+
+    // use while loop to simulate hardware flush callback
+    // you should call *TaskHandler* in screen flush signal callback(like Vsync).
+    while (1) {
+        TaskManager::GetInstance()->TaskHandler();
+        Sleep(DEFAULT_TASK_PERIOD);
+    }
+    return 0;
+}
+
+// assuming below are the memory pool
+static uint8_t g_fontPsramBaseAddr[MIN_FONT_PSRAM_LENGTH];
+#if ENABLE_SHAPING
+static uint8_t g_shapePsramBaseAddr[MIN_SHAPING_PSRAM_LENGTH];
+#else
+static uint8_t* g_shapePsramBaseAddr = nullptr;
+#endif
+
+static void InitFontEngine()
+
+{
+#if ENABLE_VECTOR_FONT
+    GraphicStartUp::InitFontEngine(reinterpret_cast<uintptr_t>(g_fontMemBaseAddr), MIN_FONT_PSRAM_LENGTH, VECTOR_FONT_DIR, DEFAULT_VECTOR_FONT_FILENAME);
+#else
+    BitmapFontInit();
+    std::string dPath(_pgmptr);
+    size_t len = dPath.size();
+    size_t pos = dPath.find_last_of('\\');
+    dPath.replace((pos + 1), (len - pos), "..\\..\\simulator\\font\\font.bin");
+    GraphicStartUp::InitFontEngine(reinterpret_cast<uintptr_t>(g_fontMemBaseAddr), MIN_FONT_PSRAM_LENGTH, dPath.c_str(), nullptr);
+#endif
+
+#if ENABLE_ICU
+    GraphicStartUp::InitLineBreakEngine(reinterpret_cast<uintptr_t>(g_icuMemBaseAddr), SHAPING_WORD_DICT_LENGTH,
+ VECTOR_FONT_DIR, DEFAULT_LINE_BREAK_RULE_FILENAME);
+#endif
+}
+
+// display adaptor
+class SDLMonitorGfxEngine : public BaseGfxEngine {
+public:
+    BufferInfo* GetFBBufferInfo() override
+    {
+        static BufferInfo* bufferInfo = nullptr;
+        if (bufferInfo == nullptr) {
+            bufferInfo = new BufferInfo;
+            bufferInfo->rect = {0, 0, HORIZONTAL_RESOLUTION - 1, VERTICAL_RESOLUTION - 1};
+            bufferInfo->mode = ARGB8888;
+            bufferInfo->color = 0x44;
+            bufferInfo->virAddr = GetFramBuff();
+            bufferInfo->phyAddr = bufferInfo->virAddr;
+            // 4: bpp
+            bufferInfo->stride = HORIZONTAL_RESOLUTION * 4;
+            bufferInfo->width = HORIZONTAL_RESOLUTION;
+            bufferInfo->height = VERTICAL_RESOLUTION;
+        }
+
+        return bufferInfo;
+    }
+
+    void Flush() override
+    {
+        MonitorRenderFinish();
+    }
+};
+
+class TouchInput : public OHOS::PointerInputDevice {
+public:
+    TouchInput() {}
+    virtual TouchInput() {}
+
+    // implements read function
+    bool Read(OHOS::DeviceData& data) override
+    {
+        // set position x,y and state, you should update the
+        // g_lastX/g_lastY/g_leftButtonDown when touch
+        data.point.x = g_lastX;
+        data.point.y = g_lastY;
+        data.state = g_leftButtonDown ? STATE_PRESS : STATE_RELEASE;
+
+        return false;
+    }
+};
+
+class KeyInput : public OHOS::KeyInputDevice {
+public:
+    KeyInput();
+    virtual ~KeyInput() {}
+
+    // implements read fouction
+    bool Read(OHOS::DeviceData& data) override
+    {
+        data.keyId = g_lastKeyId;
+        data.state = g_lastState;
+        g_lastState = INVALID_KEY_STATE;
+        return false;
+    }
+};
+
+// other device if you need to add
+class XXInput : public OHOS::XXInputDevice {
+public:
+    KeyInput();
+    virtual ~KeyInput() {}
+
+    // implements read fouction
+    bool Read(OHOS::DeviceData& data) override
+    {
+        // set device data info
+    }
+};
+
+static void InitHal()
+{
+    // Setup gfxengine
+    BaseGfxEngine::GetInstance()->InitEngine(new SDLMonitorGfxEngine());
+
+    // Setup touch device
+    TouchInput* touch = new TouchInput();
+    InputDeviceManager::GetInstance()->Add(touch);
+
+    // Setup key device if you need
+    KeyInput* key = new KeyInput();
+    InputDeviceManager::GetInstance()->Add(key);
+
+    // Setup xx device if you need
+    XXInput* inputXX = new XXInput();
+    InputDeviceManager::GetInstance()->Add(inputXX);
+}
+```

zh-cn/device-dev/subsystems/subsys-graphics-simulator-guide.md

+# Windows QT 模拟器使用指导
+
+本文介绍在 Windows 系统下如何使用 Qt Creator 模拟器快速开发调试图形框架，Qt Creator 是跨平台的集成开发环境（IDE），通过此IDE，开发者可以快速上手和操作，高效且相对轻松地完成项目和程序的开发工作。当前图形框架也提供了 Qt Creator 运行工程，方便开发者快速上手熟悉图形框架。
+
+主要内容有：在PC端如何安装 QT、Git 软件，获取 UI 模拟器最小代码仓，实现程序编译和运行。
+
+## 软件安装
+
+此次需下载安装 QT Creator 和 Git 软件，详细步骤如下：
+
+### QT Creator 安装
+Qt 可在官网 [https://www.qt.io/offline-installers](https://www.qt.io/offline-installers) 下载。
+
+注意安装时必须包含以下3个组件：
+
+![安装组件选择](figures/graphic_lite_qt_install.png)
+
+### Git 安装
+Git 下载网址：[Git官网链接](https://git-scm.com/)
+
+![Git官网](figures/graphic_lite_git_download.png "Git官网")
+
+双击下载的安装程序，按引导界面完成安装即可。
+
+## 获取UI模拟器最小代码仓
+
+### 源码获取
+
+使用 git 命令拉取 UI 模拟器最小代码仓：
+
+```git
+git clone https://gitee.com/openharmony/arkui_ui_lite.git                        -b   master  foundation/arkui/ui_lite
+git clone https://gitee.com/openharmony/graphic_graphic_utils_lite.git           -b   master  foundation/graphic/graphic_utils_lite
+
+git clone https://gitee.com/openharmony/graphic_surface_lite.git                 -b   master  foundation/graphic/surface_lite
+git clone https://gitee.com/openharmony/window_window_manager_lite.git           -b   master  foundation/window/window_window_manager_lite
+
+git clone https://gitee.com/openharmony/third_party_zlib.git                     -b   master  third_party/zlib
+git clone https://gitee.com/openharmony/third_party_qrcodegen.git                -b   master  third_party/qrcodegen
+git clone https://gitee.com/openharmony/third_party_libpng.git                   -b   master  third_party/libpng
+git clone https://gitee.com/openharmony/third_party_libjpeg.git                  -b   master  third_party/libjpeg
+git clone https://gitee.com/openharmony/third_party_icu.git                      -b   master  third_party/icu
+git clone https://gitee.com/openharmony/third_party_harfbuzz.git                 -b   master  third_party/harfbuzz
+git clone https://gitee.com/openharmony/third_party_freetype.git                 -b   master  third_party/freetype
+git clone https://gitee.com/openharmony/third_party_bounds_checking_function.git -b   master  third_party/bounds_checking_function
+git clone https://gitee.com/openharmony/third_party_cJSON.git                    -b   master  third_party/cJSON
+git clone https://gitee.com/openharmony/third_party_giflib.git                   -b   master  third_party/giflib
+git clone https://gitee.com/openharmony/third_party_libjpeg-turbo.git            -b   master  third_party/libjpeg-turbo
+```
+
+1. 新建一个源码工程目录。
+2. 在新建目录按鼠标右键选择 Git Bash Here。
+3. 复制粘贴上面命令到终端回车等待下载。或者在当前目录新建一个clone.bat文件，将上面命令复制保存，双击运行clone.bat，等待下载完成。
+
+  ![源码下载](figures/graphic_lite_git_clone.png "屏幕截图")
+
+### 打开 QT Creator
+
+1. 点击菜单：文件—>打开文件或项目
+2. 弹出的文件选择框中选择工程项目
+
+参考源码路径：
+```bash
+foundation/arkui/ui_lite/tools/qt/simulator/simulator.pro
+```
+
+注意：第一次打开项目时，需要在 Configure Project 界面，kits 列表中勾选 minGW（仅勾选 minGW ）。
+
+![打开项目](figures/graphic_lite_qt_project_open.png "打开项目")
+
+3. 点击 configure project 按钮加载工程。
+
+![勾选minGW](figures/graphic_lite_qt_project_open2.png "勾选minGW")
+
+### UI Test应用运行入口
+
+展开项目树
+
+```
+simulator
+  |-UITest
+    |-Sources
+      |-main.cpp
+```
+![项目树](figures/graphic_lite_qt_project_run.png "项目树")
+
+### 编译
+
+依次点击：**构建—>编译项目**，或者直接在项目树中右键，在右键菜单中选择**重新构建**即可。
+
+![构建](figures/graphic_lite_qt_project_build.png "构建")
+
+### 调试
+
+点击左下角运行三角形即可运行代码，点击调试按钮即可运行调试。
+
+![运行窗口](figures/graphic_lite_qt_project_debug.png "运行窗口")
+
+![测试界面](figures/graphic_lite_qt_project_demo.png "测试界面")
+
+