渲染

本章节将介绍 Widget_Render() 函数的基本用法，Widget_Render() 函数的主要功能是渲染部件内容，LCUI 输出的图形界面都是由该函数渲染出来的。

Widget_Render() 函数接受两个参数，第一个参数是需渲染的部件，第二个参数是 LCUI_PaintContext 类型的绘制实例数据，它包含 rect 和 canvas 两个成员，rect 用于指定部件中需要渲染的区域，而 canvas 是一个用于接受渲染结果的画板。

以下是示例程序：

  1. #include <LCUI_Build.h>
  2. #include <LCUI/LCUI.h>
  3. #include <LCUI/graph.h>
  4. #include <LCUI/gui/widget.h>
  5. #include <LCUI/gui/widget/textview.h>
  7. int main( void )
  8. {
  9.         int ret;
  10.         LCUI_Graph canvas;
  11.         LCUI_Widget root, box, txt;
  12.         LCUI_PaintContextRec paint;
  13.         LCUI_Rect area = {40, 40, 320, 240};
  14.         LCUI_Color bgcolor = RGB( 242, 249, 252 );
  15.         LCUI_Color bdcolor = RGB( 201, 230, 242 );
  17.         LCUI_Init();
  19.         /* 创建一些部件 */
  20.         root = LCUIWidget_New( NULL );
  21.         box = LCUIWidget_New( NULL );
  22.         txt = LCUIWidget_New( "textview" );
  24.         /* 创建一块灰色的画板 */
  25.         Graph_Init( &canvas );
  26.         Graph_Create( &canvas, 320, 240 );
  27.         Graph_FillRect( &canvas, RGB( 240, 240, 240 ), NULL, FALSE );
  29.         /* 初始化一个绘制实例，绘制区域为整个画板 */
  30.         paint.with_alpha = FALSE;
  31.         paint.rect.width = 320;
  32.         paint.rect.height = 320;
  33.         paint.rect.x = paint.rect.y = 0;
  34.         Graph_Quote( &paint.canvas, &canvas, &area );
  36.         /* 设定基本的样式和内容 */
  37.         Widget_SetPadding( box, 20, 20, 20, 20 );
  38.         Widget_SetBorder( box, 1, SV_SOLID, bdcolor );
  39.         Widget_SetStyle( box, key_background_color, bgcolor, color );
  40.         TextView_SetTextW( txt, L"[size=24px]这是一段测试文本[/size]" );
  41.         Widget_Append( box, txt );
  42.         Widget_Append( root, box );
  43.         /* 标记需要更新样式 */
  44.         Widget_UpdateStyle( txt, TRUE );
  45.         Widget_UpdateStyle( box, TRUE );
  46.         Widget_UpdateStyle( root, TRUE );
  47.         /* 更新部件，此处的更新顺序必须是父级到子级 */
  48.         Widget_Update( root );
  49.         Widget_Update( box );
  50.         Widget_Update( txt );
  52.         /* 渲染部件 */
  53.         Widget_Render( box, &paint );
  54.         ret = Graph_WritePNG( "test_widget_render.png", &canvas );
  55.         Graph_Free( &canvas );
  56.         return ret;
  57. }

编译运行后，可以在程序所在工作目录下找到 test_widget_render.png 文件，打开它可看到如下图所示的内容：

绘制出来的部件

在 LCUI 中，一级部件的尺寸是与屏幕对应的，而本实例中 root 部件仅仅充当容器，因为它并没有与屏幕绑定，在调用 Widget_Update() 后尺寸会为 0 x 0，所以实际渲染的对象是 box。

Widget_Update() 需要按照从父到子的顺序调用，因为子级部件的坐标、宽度等属性的计算依赖父级部件。

原文: https://docs.lcui.lc-soft.io/zh-cn/gui_widgets/render.html