更多信息请访问：Harmonyos.51cto.com1简介本文基于OpenHarmony3.0，讲解Graphic子系统的UI。图形UI组件实现了一套系统级的图形引擎，为应用程序开发提供UIKit接口，包括动画、布局、图形转换、事件处理和丰富的UI组件。组件直接调用HAL接口，或使用WMS（WindowManagerService）提供的客户端与硬件进行交互，完成事件响应、图像绘制等操作。目前只看到在L1中使用。1.1图形子系统相关《OpenHarmony 源码解析之图形子系统 (一)》《OpenHarmony 源码解析之图形子系统(UI)》1.2OpenHarmony架构图1.3图形子系统架构图2基础知识2.1代码目录/foundation/graphic/ui├──frameworks#框架代码│├──animator#动画模块│├──common#public模块│├──components#components│├──core#ui主进程（渲染、任务管理等）│├──default_resource│├──dfx#维度测量函数│├──dock#driver适配层││└──ohos#ohos平台适配│├──draw#绘图逻辑│├──engines#绘图引擎││├──dfb││├──general│├──gpu_vglite││└──software_zlite│├──events#events│├──font#font│├──imgdecode#imagemanagement│├──layout#pagelayout│├──themes#thememanagement│├──window#windowmanagement适配层│└──window_manager│└──dfb├──interfaces#Interfaces│├──innerkits#模块之间的接口││└──xxx#子模块的接口│└──kits#外部接口│└────xxx#子模块接口├──test#测试代码│├──framework││├──include#测试框架头文件││└──src#测试框架s源代码│├──uitest#显示效果测试（可执行程序在foundation/graphic/wms/test:sample_ui）││└──test_xxx#特定UI组件效果测试│└──unittest#单元测试│└───xxx#具体UI组件单元测试└──tools#测试和模拟器工具（模拟器工程、资源文件）└──qt#QT工程2.2图形组件列表3练习3.1UI控制效果具体UI控制效果你可以运行通过QTCreator进行QT工程，效果如下：所有UI控件都在工程中你可以找到效果。通过查看项目代码，可以了解各个控件的使用方法和参数详情。3.2示例下面我们举个例子UIButton解析控件的现实：构造函数-参数UIButton::UIButton():defaultImgSrc_(nullptr),triggeredImgSrc_(nullptr),currentImgSrc_(ButtonImageSrc::_BTN_0),imgX(IMAGE_DEFAULT)contentWidth_(0),contentHeight_(0),state_(RELEASED),styleState_(RELEASED),#ifDEFAULT_ANIMATIONenableAnimation_(true),animator_(*this),#endifbuttonStyleAllocFlag_(false)设置ThemevoidUIButton::SetupThemeStyles(){Theme*theme=ThemeManager::GetInstance().GetCurrent();if(theme==nullptr){buttonStyles_[RELEASED]=&(StyleDefault::GetButtonReleasedStyle());buttonStyles_[PRESSED]=&(StyleDefault::GetButtonPressedStyle());buttonStyles_[INACTIVE]=&(StyleDefault::GetButtonInactiveStyle());}else{buttonStyles_[RELEASED]=&(theme->GetButtonStyle().released);buttonStyles_[PRESSED]=&(theme->GetButtonStyle().pressed);buttonStyles_[INACTIVE]=&(theme->GetButtonStyle().inactive);}style_=buttonStyles_[RELEASED];}绘制OnDrawvoidUIButton::OnDraw(BufferInfo&gfxDstBuffer,constRect&invalidatedArea){OpacityTypeopa=GetMixOpaScale();BaseGfxEngine::GetInstance()->DrawRect(gfxDstBuffer,GetOrigRect(),invalidatedArea,*buttonStyles_[state_],opa);DrawImg(gfxDstBuffer,invalidatedArea,opa);}可以看到需要绘制2，先通过绘图引擎->DrawRect,voidBaseGfxEngine::DrawRect(BufferInfo&dst,constRect&rect,constRect&dirtyRect,constStyle&style,OpacityTypeopacity){DrawRect::Draw(dst,rect,dirtyRect,style,opacity);}2绘制点图片->DrawImgvoidUIButton::DrawImg(BufferInfo&gfxDstBuffer,constRect&invalidatedArea,OpacityTypeopaScale){constImage*image=GetCurImageSrc();if(image==nullptr){return;}ImageHeaderheader={0};image->GetHeader(header);Rectcoords;RectviewRect=GetContentRect();coords.SetLeft(viewRect.GetLeft()+GetImageX());coords.SetTop(viewRect.GetTop()+GetImageY());coords.SetWidth(header.width);坐标。SetHeight(header.height);Recttrunc(invalidatedArea);if(trunc.Intersect(trunc,viewRect)){image->DrawImage(gfxDstBuffer,coords,trunc,*buttonStyles_[state_],opaScale);}}可以发现，最后调用draw目录绘制点、线、图等：UIButton的事件处理只重写了OnPressEvent、OnReleaseEvent和OnCancelEvent，添加Animation，具体实现还是在基类UIView中，主要用到的函数：voidUIView::InvalidateRect(constRect&invalidatedArea){if(!visible_){if(needRedraw_){needRedraw_=false;}else{return;}}Recttrunc(invalidatedArea);boolisIntersect=true;UIView*par=parent_;UIView*cur=this;while(par!=nullptr){if(!par->visible_){return;}isIntersect=trunc.Intersect(par->GetContentRect(),trunc);if(!isIntersect){break;}cur=par;par=par->parent_;}if(isIntersect&&(cur->GetViewType()==UI_ROOT_VIEW)){RootView*rootView=reinterpret_cast
