更多信息请访问：HarmonyOSLightDeviceGraphicsFrameworkhttps://harmonyos.51cto.comHarmonyOSLightDeviceGraphicsFramework是一个HarmonyOSLightDeviceGraphicsFramework接口开发框架，面向有屏设备,可以运行在LiteOS/Linux/Windows等操作系统上。除了提供基本的UI组件外，它还提供独立的图形引擎，适用于基于ArmCortex-M的MCU和ArmCortex-A芯片之上的低内存资源。主要特点：1）高性能：Armcortex-M120MHzCPU下，纯软渲染可达30FPS。2）极度轻量级：在Armcortex-M下，UI框架可以在ROM<150KB、RAM<30KB的硬件条件下运行，支持按需裁剪。3）支持多渲染后端：支持自研2D渲染，支持扩展其他三方渲染库。4)支持自定义主题：应用可以自定义主题覆盖系统或组件默认主题。同时支持在运行时更改主题。5）硬件加速：支持2D硬件加速和SIMD加速，可扩展支持具有GPU能力的硬件加速。6)支持丰富的控件：34个组件（17种容器类型，17种控件类型）。HarmonyOS轻端图形框架介绍HarmonyOS轻端图形框架包括UIKit端和Server端（如图1所示）。UIKit端运行在应用端，主要处理事件交互、图像解析、字体整形、2D变换，根据用户设置的布局在相应的画布上绘制组件，生成一帧数据为直接发送到显示或提交到服务器端进行合成；终端主要负责多窗口管理、多层合成、输入事件管理。HarmonyOS轻设备图形框架主要运行在具有cortex-MMCU级别和有限RAM资源的cortex-A设备上。UI框架和渲染部分可以在M核设备上独立运行。多语言矢量字体和图像解码依赖于硬件能力，一般建议在A核上运行。图1图形子系统架构图1.UIKitUIKit包括组件、动画、布局、2D变换、2D图形库、多语言、图像解码库、渲染多后端、事件和渲染引擎，共10个子模块，下面介绍前8。1）组件目前提供17个容器组件和17个控件组件，满足大部分页面开发场景的需求，支持开发者扩展自定义控件。目前支持的控件列表及继承关系如下：图2ComponentTree图2)Animation支持Bezier、EaseInBack、EaseOutBack和EaseInOutBack等19种动画曲线，支持开发者设置自己的动画曲线；以缓动函数动画曲线为例，算法方程和图像如下：Back:(s+1)t^3-st^2图3缓动函数曲线图3）布局支持相对布局、百分比布局和简单的弹性布局。4)二维变换通过三阶矩阵变换实现图像和分量级别的缩放、旋转和平移；缩放功能主要体现在TransformMap类的Scal()函数中，通过矩阵变换实现。坐标变换矩阵是一个3*3的矩阵，用于将图形的坐标从原来的坐标点变换到新的坐标点。缩放变换的公式为：坐标矩阵变换的公式为：旋转函数与缩放函数类似，也是通过3*3矩阵变换实现的。主要体现在TransformMap类中的Rotate()函数中。绕原点逆时针旋转θ角的变换公式为：坐标矩阵变换公式为：下面是ImageView二维变换的示例代码：RectviewRect=imageView_->GetOrigRect();TransformMaptransMap(viewRect);//58：变换相对X坐标58：变换相对Y坐标Vector2pivot_(58,58);if(&view==rotateBtn_){//90：旋转角度transMap.Rotate(90,pivot_);}elseif(&view==scaleBtn_){//1.5:x轴缩放1.5:y轴缩放transMap.Scale(Vector2(1.5,1.5),pivot_);}elseif(&view==translateBtn_){//80:x-axisTranslationdistance//-30:y坐标轴平移距离transMap.Translate(Vector2(80,-30));}imageView_->SetTransformMap(transMap);5)HarmonyOS的二维图形库有一个基本图形图书馆。在海量设备上提供高效的二维图形绘制能力，支持直线、圆弧、圆、矩形、三角形、贝塞尔曲线等基本绘制，并支持抗锯齿，针对每张图进行独特的优化算法实现软件绘图的最佳性能。·具体代码路径请参考：https://gitee.com/openharmony/graphic_ui/tree/master/frameworks/draw6）HarmonyOS多语言轻设备图形框架实现了47种语言的显示、换行和整形，满足设备的全球分布。多语言整形渲染流程：图4多语言整形渲染时序图图形文本控制：通过SetText接口设置文本，若参数为UTF8字符串str，则属于动态字体运行方式；如果参数是一个textId枚举值，属于静态字体的运行方式。控件布局完成后，Invalidate操作负责绘制控件。Shaping类：根据控件的fontId判断是否为复杂语言。如果是复杂的语言，需要通过整形类进行整形，将UTF8字符串整形为字形索引；否则，UTF8字符串将直接转换为Unicode。另外，对UTF8字符串进行Bidi双向排版，然后得到该字符串的所有换行位置。动态字体类：初始化时加载font.bin，根据Unicode或glyphindex按照一定的规则查找glyph参数。静态字体类：初始化时加载glyphs.bin，根据Unicode或glyphindex按一定顺序查找glyph参数。绘图类：根据字形参数结合颜色值将字形绘制到帧缓冲区中，并根据双向和换行布局进行合理布局。7）图像解码库Cortex-A场景通过三方库支持png、jpeg、bmp、gif图像格式解析处理。做编解码处理。8）Renderingmulti-backendRenderingmulti-backend位于UIKit底层，用于适配不同芯片平台的硬件能力。每个芯片制造商都实现了多个后端接口。UIKit就是通过这个抽象层接口来屏蔽芯片差异，充分发挥芯片硬件能力。.如下图5所示，左边是没有多后端的UIKit实现，UIKit框架中嵌入了硬件使能，即每一个新的芯片都要对UIKit进行相应的修改；右侧是multi-backendoneImplementation，硬件使能和UIKit分离，即切换到新的芯片平台时，只需要修改适配层，UIKit不需要修改。图5多渲染后端框架图多渲染后端renderbackends在整体框架中的位置如图5所示。通过这一层，三方渲染库和图形可以更高效地连接到系统接口。渲染引擎支持多渲染后端、软件渲染、2D硬件加速（TDE/DMA2D）；对于支持OpenGL的硬件平台，它支持OpenGL后端扩展。2.服务器端服务器端主要包括窗口管理模块和事件管理模块（如图6所示）。该模块主要用于cortex-A场景下的多窗口管理、多层综合和底层事件管理。图6服务端框架图1）多窗口管理采用C/S架构，不同APP的窗口在服务端统一管理Z序和层组成，一个窗口绑定一个RootView.2）多层合成采用C/S架构，接受不同APP提交的图层数据，使用软件或硬件进行合成，叠加多个图层发送显示。3）底层事件管理对接底层输入事件驱动框架，对输入事件进行监控和分发。如图7所示：图7事件消息流●驱动适配层（driver）提供原始输入事件机制连接底层硬件●InputManger服务层（IMS）监听原始输入事件（InputEventHub）并封装原始输入事件（InputEventReader）分发事件到目标窗口（InputEventDistributer）UIKit客户端层（client）监听窗口管理服务输入事件生成高级输入事件分发高级输入事件到视图组件运行渲染原理轻设备GUI由MainLoop驱动，有事件、动画或绘图时，当没有事件输入时，MainLoop会进入挂起模式，当有事件输入时，会唤醒循环，达到降低功耗的目的，如左图图8.图8右侧WMS的主要功能是处理多窗口管理、多层合成和事件管理盖章。App（UIKit）向WMS提交一帧数据，WMS完成多个图层的合成，发送给展示。该应用程序的主要功能是循环处理事件、动画和绘图。当没有事件或动作效果时，处于挂起模式；当有事件或动作效果时，会操作RootView树，更新脏区，在Render过程中重绘脏区。图8MainLoop框架图下面以创建一个Button页面为例说明渲染原理。首先创建一个UIButton，添加到组件树中，进入MainLoop绘制Button页面。点击Button界面，MainLoop接收Input事件，识别事件对应组件，更新脏区，进入Render后刷新Button界面，用户感知按钮点击变化。RootView树更新脏区和重绘过程的时序介绍参见图9和图10。图9脏区生成时序图InvalidateRect()脏区刷新流程，如图9所示：循环获取与父节点相交的区域，如果有，调用RenderManager中的InvalidateRect刷新区域。判断刷新区域是否在屏幕显示范围内，获取相交区域。看看invalidRects中要刷新的区域是否包括这个区域。保存到invalidRects图10渲染序列图1.基于脏区渲染的RenderTask流程：JoinRect：合并invalidRects中重叠较大的区域。判断依据：A的面积+B的面积>A的面积.Inflate(B)2.DealRect：循环调用RenderRect，对每个invalidRects区域进行渲染RenderRect过程：获取显示缓冲区，计算最大行数根据显示缓冲区的最大缓冲区大小if不止一个渲染大小，循环和分段渲染每个区域的RenderPartRenderPart过程：1）找到完全覆盖该区域的最顶层组件2）刷新该组件的相关区域和其子组件（如果有相交区域）3）循环刷新其背面4）刷新外边框区域Shadow等总结：HarmonyOS轻机图形框架还在不断演进和完善中。本文主要对目前HarmonyOS轻设备图形框架的总体特点进行介绍，希望能帮助开发者了解HarmonyOS轻设备图形框架的开发原理。更多信息请访问：Harmonyos.51cto.com，与华为官方合作打造的鸿蒙技术社区
