diff --git a/zh-cn/device-dev/subsystems/Readme-CN.md b/zh-cn/device-dev/subsystems/Readme-CN.md index 4785ce48abee34ddd875ef66ca03cf636877f5aa..590c7695a25ff6eef47216f09a666b0c02aa02b0 100644 --- a/zh-cn/device-dev/subsystems/Readme-CN.md +++ b/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-container-guide.md) - - [布局容器类组件开发指导](subsys-graphics-layout-guide.md) - - [普通组件开发指导](subsys-graphics-common-guide.md) - - [动画开发指导](subsys-graphics-animation-guide.md) +- 小型系统图形图像 + - [小型系统图形图像概述](subsys-graphics-overview.md) + - [普通组件开发指导](subsys-graphics-common-guide.md) + - [容器类组件开发指导](subsys-graphics-container-guide.md) + - [布局容器类组件开发指导](subsys-graphics-layout-guide.md) + - [动画开发指导](subsys-graphics-animation-guide.md) + - [Windows QT 模拟器使用指导](subsys-graphics-simulator-guide.md) + - [如何对接图形框架](subsys-graphics-porting-guide.md) - 媒体 - 相机 - [相机开发概述](subsys-multimedia-camera-overview.md) diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_git_clone.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_git_clone.png new file mode 100644 index 0000000000000000000000000000000000000000..7a14060b0ca524dbff45d445380f3278a353161b Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_git_clone.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_git_download.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_git_download.png new file mode 100644 index 0000000000000000000000000000000000000000..7922723d1e6724a465a2abe75d5d1fd7f7570c08 Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_git_download.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_install.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_install.png new file mode 100644 index 0000000000000000000000000000000000000000..fb987964467f78edd4e1dfddd097762a21c7c7af Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_install.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_build.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_build.png new file mode 100644 index 0000000000000000000000000000000000000000..0942b423a07a8d90c82ec4f60d87235713e9d21d Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_build.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_debug.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_debug.png new file mode 100644 index 0000000000000000000000000000000000000000..f6d5788e5895effbd7f6b86dc3615afed062f87e Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_debug.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_demo.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_demo.png new file mode 100644 index 0000000000000000000000000000000000000000..642aa6b648ad9fc3c38c18ddcd98956440ad2e61 Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_demo.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open.png new file mode 100644 index 0000000000000000000000000000000000000000..fc16e719f40b523d0bb9449cd0b2ea4cf07117f4 Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open2.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open2.png new file mode 100644 index 0000000000000000000000000000000000000000..d23734717dd397fff1be76de6f94bb421cc65228 Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_open2.png differ diff --git a/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_run.png b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_run.png new file mode 100644 index 0000000000000000000000000000000000000000..76f8da15a94598c45116293988c3841236a4e48b Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/graphic_lite_qt_project_run.png differ diff --git a/zh-cn/device-dev/subsystems/figures/openharmony_ui.png b/zh-cn/device-dev/subsystems/figures/openharmony_ui.png new file mode 100644 index 0000000000000000000000000000000000000000..2f3e488b0b789ecb89168f84cb850adcb36d8e45 Binary files /dev/null and b/zh-cn/device-dev/subsystems/figures/openharmony_ui.png differ diff --git a/zh-cn/device-dev/subsystems/subsys-graphics-overview.md b/zh-cn/device-dev/subsystems/subsys-graphics-overview.md index 3b1f71aba168cc2d739a86636f0514d618145e66..3de6356195d01365cb3d37c12be01634806939cc 100755 --- a/zh-cn/device-dev/subsystems/subsys-graphics-overview.md +++ b/zh-cn/device-dev/subsystems/subsys-graphics-overview.md @@ -1,42 +1,157 @@ -# 图形图像概述 +# 小型系统图形图像框架介绍 +## 概述 +小型系统图形图像子系统是一套轻量级图形框架，框架包括轻量级 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 <|-- 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 +} + +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 +} +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格式。 -- 字体渲染 - 支持矢量字体的实时绘制。 diff --git a/zh-cn/device-dev/subsystems/subsys-graphics-porting-guide.md b/zh-cn/device-dev/subsystems/subsys-graphics-porting-guide.md new file mode 100644 index 0000000000000000000000000000000000000000..58d0700d855c721532a0bbb1d6d045a28d6c91c2 --- /dev/null +++ b/zh-cn/device-dev/subsystems/subsys-graphics-porting-guide.md @@ -0,0 +1,409 @@ +# 小型系统图形框架集成指导 + +当前，小型系统图形模块以子系统的形式在 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(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(g_fontMemBaseAddr), MIN_FONT_PSRAM_LENGTH, dPath.c_str(), nullptr); +#endif + +#if ENABLE_ICU + GraphicStartUp::InitLineBreakEngine(reinterpret_cast(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); +} +``` diff --git a/zh-cn/device-dev/subsystems/subsys-graphics-simulator-guide.md b/zh-cn/device-dev/subsystems/subsys-graphics-simulator-guide.md new file mode 100644 index 0000000000000000000000000000000000000000..ffdc0be788f0fc8b8e2da154c1000d5444a11aa8 --- /dev/null +++ b/zh-cn/device-dev/subsystems/subsys-graphics-simulator-guide.md @@ -0,0 +1,101 @@ +# 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 "测试界面") + +